Абсолютні та відносні посилання в HTML

У нашому довіднику є цілий розділ, присвячений HTML.

Розглянемо, що являють собою посилання в HTML в абсолютному і відносному варіантах.

Так як гіперпосилання, яке нерозривно пов'язане з гіпертекстом, є окремим випадком посилання, то в ракурсі теми, що розглядається, ці терміни можна вважати тотожними.

Абсолютний та відносний шляхи в посиланнях

Основною відмітною ознакою будь-якого посилання є наявність URL-адреси, яка найчастіше містить абсолютний шлях (повний) до сторінки або файлу:

У такому вигляді ми вводимо посилання в пошуковий рядок браузера для отримання доступу до об'єкта. При цьому будь-який URL обов'язково починається з найменування протоколу передачі даних та включає ім'я домену («http://site.ua/»). Саме в подібному вигляді шлях до об'єкта (веб-сторінки або файлу) використовується як параметр атрибуту href при створенні абсолютного посилання за допомогою засобів HTML для її подальшої вставки в контент заданої сторінки (документ):

Абсолютні гіперпосилання можна теоретично використовувати скрізь, але на практиці їх застосовують частіше тоді, коли потрібно послатися на зовнішній веб-ресурс, а відносні ефективніші при переходах у межах одного сайту, оскільки вони коротші і не захаращують HTML-код.

Варіанти відносних посилань

Якщо наведений вище приклад повного шляху в URL-адресі трохи модифікувати, прибравши «http:», то вийде зразок відносного шляху:

Якщо ж залучити кошти HTML, можна створити посилання щодо протоколу:

Такий варіант цілком працює не тільки в межах домену, а й на сторонніх веб-сторінках, причому незалежно від того, який протокол (HTTP або HTTPS) встановлений для конкретного сайту. Тому на практиці цей вид відносних посилань успішно можна застосувати, наприклад, у разі перекладу веб-проекту на безпечний протокол HTTPS.

Ходімо далі й ще до назви протоколу приберемо ще й подвійний сліш разом із доменним ім'ям. Вийде інша варіація відносного шляху:

На його основі таким же чином створюється відносне гіперпосилання:

Візьмемо для наочності приклад із файлом (file1.html).

Такий лінк буде працювати тільки в тому випадку, якщо файл розташований у папці (каталозі), яка, в свою чергу, знаходиться у складі кореневої директорії сайту.

Тобто шлях до файлу (у складі URL, який служить параметром атрибуту href) буде вказано щодо кореня веб-ресурсу:

Якщо файл (у нашому прикладі file2.html) входить безпосередньо до складу кореневої директорії, то шлях до нього щодо кореня (site.ua) набуде такого вигляду:

Тут найперший сліш "/" замінює кореневу папку "site.ua/". Тобто при створенні переходу на головну сторінку сайту з будь-якої його сторінки можна використовувати коротку конструкцію:

Той самий принцип працює і при проставлянні лінків з однієї веб-сторінки проекту на іншу. Зразком може бути той самий блог WordPress, де є головна сторінка, статичні та прив'язані до певних рубрик (категорій) веб-сторінки записів.

Скажімо, з будь-якої сторінки проекту можна проставити відносне посилання на іншу сторінку із зазначенням рубрики.

Візьмемо для прикладу такий блог, в якому є рубрика «HTML» і ця стаття всередині рубрики:

А, скажімо, відносне посилання на статичну веб-сторінку (яка не належить жодній рубриці, але входить до складу кореневої папки «Блог.com») з будь-якої іншої сторінки в межах одного проекту може виглядати так:

Отже, ми з'ясували, що гіперлінки щодо кореневої папки зазвичай і використовуються на практиці, коли необхідно послатися з однієї сторінки сайту на іншу.

Тепер давайте розглянемо ще кілька випадків створення лінків щодо поточного веб-документа (файлу чи web-сторінки), а не кореня сайту. Тут один із файлів буде донором (з якого проставлено посилання), а інший акцептором (на який веде гіперпосилання).

1. Файли розташовані в одній папці:

У цьому випадку відносне посилання буде містити тільки назву документа, який є акцептором (зверніть увагу, що знак слєша тут опущений, оскільки шлях вказується не щодо кореня, а цілком конкретної папки):

2. Файли знаходяться в різних директоріях, причому документ, на який необхідно послатися, розташовується всередині каталогу, що знаходиться в одній папці, що містить донор:

Тоді в процесі створення відносного гіперпосилання у змісті донора слід додатково прописати директорію, де знаходиться акцептор:

Якщо цільовий файл, на який вказує посилання, знаходиться ще на рівень нижче щодо донорського документа в ієрархічній структурі (наприклад, розташовується в catalog3, який вкладено в catalog2), то шлях буде таким:

І так далі, залежно від кількості вкладених одна в одну директорій.

3. Тепер розберемо зворотну ситуацію, коли документ-акцептор розташовується на рівень (або кілька) вище за донорський файл:

При такому розкладі перед найменуванням файлика необхідно поставити слеш "/" і двокрапку, що означає, що акцептор розташований на один рівень вище:

Якщо документ, на який посилаються, знаходиться на два рівні вище (скажімо, донорський документ перебуває в папці catalog3, яка вкладена в catalog2), то HTML код відносного гіперпосилання набуде наступного вигляду:

Як ви, напевно, зрозуміли, подібних рівнів може бути скільки завгодно багато, все залежить від файлової структури вашого веб-проекту. Чим більше рівнів між акцептором і донором, тим більша кількість двокрапок та слішків необхідно вказати.

4. Є ще варіант, коли акцептор та донор розташовані в різних папках одного рівня:

Для того, щоб сформувати відносний гіперлінк, потрібно перейти на один рівень вище (catalog), а в дорозі вказати директорію документа, на який посилатимемося:

5. Ну і тепер найскладніший випадок. Це коли документ, що містить відносне посилання, і файл, на який вона веде, розташовуються в різних папках, причому директорія з донором знаходиться на один або кілька рівнів вище за папку з акцептором:

Якщо різниця 1 рівень, то відносним посиланням є таке:

Це лише основні приклади відносних посилань, насправді їх значно більше. Але головне зрозуміти суть алгоритму їх створення. Тим більше, що всі інші варіації будуть просто похідними від зазначених вище.

Особливості відносних та абсолютних гіперпосилань

Якщо як цільовий об'єкт абсолютного або відносного посилання вказати не файл, а всю директорію, то в кінці URL бажано прописувати слеш:

Тим самим ви вказуєте серверу, що потрібно відкрити для перегляду весь каталог, а не конкретний файл. Якщо ж опустити значок «/» і оформити гіперпосилання ось так:

.... то серверний обробник спочатку почне пошуки файлу «uploads», саме в такому вигляді (без розширення), а вже потім знайде папку з таким ім'ям. Проставивши відразу ж слеш, ви заощадите ресурси сервера, на якому розміщується сайт.

Також необхідно мати на увазі, що з метою безпеки вміст будь-якого робочого каталогу сайту має бути прихованим. Тому веб-сервер зазвичай налаштований таким чином, щоб запобігти відображенню його файлів. Наприклад, натомість може бути показаний порожній індексний файл index.php або index.html (у браузері це буде просто біла сторінка).

Я настійно рекомендую перевірити, чи такі справи й на вашому сайті. Наприклад, якщо у вас веб-проект під керуванням Wordpress, то вивчіть відповідний матеріал, що розповідає про базові налаштування захисту при використанні в тому числі цього методу (щоправда, у сучасних версіях WP ця ситуація вже під контролем, але перевірка не завадить).

Загалом принцип створення абсолютних і відносних посилань діє і щодо стандартних веб-сторінок сайту. Але оскільки левова частка вебмайстрів (особливо це стосується власників повномасштабних веб-ресурсів, а не односторінок) використовує для управління веб-ресурсом CMS, то тут є деякі нюанси.

Що стосується головної сторінки, то абсолютне посилання на неї включає доменне ім'я, яке є назвою кореневої папки відповідно до файлової структури сайту на сервері:

Зразок відносного лінка щодо головної: