Унифицированные локаторы ресурсов HTML

Унифицированный локатор ресурсов (URL), который обычно называют веб-адресом, — это ссылка на веб-ресурс, указывающая его местоположение в компьютерной сети и механизм его получения. URL — это особый тип Унифицированного идентификатора ресурса (URI), хотя эти два термина иногда используются как взаимозаменяемые. В большинстве веб-браузеров URL веб-страницы отображается над страницей в адресной строке.

URL может состоять из слов или адреса в протоколе Internet Protocol (IP). Как правило, пользователи вводят имена, поскольку их легче запомнить, чем числа.

На этой странице рассматриваются структура URL, поведение абсолютных и относительных URL в атрибутах HTML, принцип работы компонентов запроса и фрагмента, кодирование URL, а также наиболее распространённые схемы.

Синтаксис URL

Общий синтаксис полного веб-адреса выглядит так:

scheme://host:port/path?query#fragment

Структура URL

Согласно RFC 3986 — спецификации, определяющей URL — URL состоит из компонентов, перечисленных ниже. Отдельного компонента «имя файла» не существует: имя файла — это просто последний сегмент пути.

Полный URL с разбором компонентов

Рассмотрим следующий адрес:

https://www.w3docs.com:443/learn-html/page.html?tab=1#intro

Он состоит из следующих частей:

Абсолютные и относительные URL

В HTML URL можно записать в полной (абсолютной) или частичной (относительной) форме. При использовании относительного URL браузер дополняет недостающие части — схему, хост и базовый каталог — на основе URL текущей страницы.

Это важно везде, где вы ссылаетесь на другой ресурс: в ссылках <a href>, изображениях <img src> и таблицах стилей <link href>.

Предположим, что текущая страница — https://example.com/learn-html/page.html:

<!-- Absolute URL: includes the scheme and host -->
<a href="https://example.com/page">External page</a>

<!-- Root-relative: starts at the site root -->
<img src="/images/logo.png" alt="Logo" />

<!-- Relative: relative to the current page's folder -->
<link rel="stylesheet" href="../css/style.css" />

Используйте относительные URL для ссылок внутри собственного сайта (они продолжат работать, если сайт переедет на новый домен), и абсолютные URL для ссылок на внешние ресурсы. Подробнее о создании ссылок читайте в разделе Ссылки HTML.

Компонент запроса

Строка запроса следует после ? и передаёт данные ресурсу в виде пар key=value. Несколько параметров объединяются с помощью &:

https://www.w3docs.com/search?q=html&page=2

Здесь q=html и page=2 — два отдельных параметра. Серверы (и JavaScript) считывают эти значения, чтобы решить, что возвращать — например, поисковый запрос и номер страницы.

Фрагмент (якорь)

Фрагмент следует после # и указывает на определённую часть страницы. Браузер прокручивает страницу к элементу, чей id совпадает с фрагментом. Фрагмент обрабатывается исключительно в браузере и никогда не отправляется на сервер.

<!-- Links to the element with id="section2" on the same page -->
<a href="#section2">Jump to Section 2</a>

<h2 id="section2">Section 2</h2>

Кодирование URL

URL могут передаваться через Интернет только с использованием набора символов ASCII. Если URL содержит символы, не входящие в этот набор, или символы, имеющие специальное значение в URL, они должны быть закодированы.

При кодировании URL (также называемом процентным кодированием) символ заменяется знаком %, за которым следует его двузначное шестнадцатеричное значение. URL не может содержать пробелы, поэтому пробел заменяется на %20 (или, в строках запроса, знаком +):

Before:  https://www.w3docs.com/search?q=hello world
After:   https://www.w3docs.com/search?q=hello%20world

Зарезервированные символы, такие как ?, &, =, # и /, несут структурное значение в URL, поэтому когда они встречаются внутри значения, они тоже должны быть закодированы (например, & становится %26). Некоторые распространённые замены:

Распространённые схемы

Схема сообщает браузеру, какой протокол или сервис использовать. Наиболее распространённые приведены ниже.

<a href="mailto:[email protected]">Email us</a>
<a href="tel:+15551234567">Call us</a>

По соображениям безопасности современные браузеры ограничивают использование схем ftp: и file:: поддержка ftp: была удалена из большинства браузеров, а ссылки file: на локальные файлы, как правило, не работают со страниц, обслуживаемых по http/https.

Практика