Руководство по ссылкам HTML

Ссылки позволяют пользователям легко переходить с одной страницы на другую на любой сервер в любой точке мира.

Ссылка может вести на любой веб-ресурс, например изображение, аудио- или видеофайл, PDF-файл, HTML-документ, элемент в самом документе, и т. д.

По умолчанию ссылки отображаются в большинстве браузеров следующим образом:

• Не посещенная ссылка подчеркнута и выделена синим цветом;
• Посещенная ссылка подчеркнута и выделена фиолетовым цветом;
• Активная ссылка подчеркнута и выделена красным цветом.

Однако вы можете перезаписать эти правила с помощью CSS-стилей. См. Руководство по ссылкам в CSS.

Синтаксис HTML-ссылок

Ссылки указываются в HTML с помощью тега <a>.

Ссылка или гиперссылка может быть выражена словом, группой слов, цифрами или изображением.

<a href="url">Link text</a>

Все, что находится между открывающим тегом <a> и закрывающим тегом </a>, становится частью ссылки, которую пользователь видит и нажимает в браузере. Вот несколько примеров ссылок:

<a href="https://www.google.com/">Google Search</a>
<a href="https://artzolin.ru/">Zolin Digital</a>
<a href="images/kites.jpg">
    <img src="kites-thumb.jpg" alt="kites">
</a>
<a href="https://www.google.com/">Google Search</a>

Атрибут href указывает цель ссылки. Она может быть в виде абсолютного или относительного URL-адреса.

Абсолютный URL-адрес — это адрес, который включает в себя полный URL-путь — протокол, имя хоста и путь к документу или файлу, например https://www.google.com/, https://www.example.com./form.php и т. д.

Относительный URL-адрес не включает имя домена и префикс http:// или https://, например, contact.html, images/smiley.png и т. д.

Настройки атрибута target

Атрибут target сообщает браузеру, каким образом открыть связанный документ. Есть четыре определенные цели, и каждое имя цели начинается с символа нижнего подчеркивания (_):

• _blank — открывает связанный документ в новом окне или вкладке.
• _parent — открывает связанный документ в родительском окне.
• _self — открывает связанный документ в том же окне или вкладке, что и исходный документ. Это значение по умолчанию, поэтому нет необходимости явно указывать это значение.
• _top — открывает связанный документ в полном окне браузера.

Посмотрим следующий пример, чтобы понять, как работает цель атрибут target:

<a href="/about-us.php" target="_top">About Us</a>
<a href="https://www.google.com/" target="_blank">Google</a>
<a href="images/sky.jpg" target="_parent">
    <img src="sky-thumb.jpg" alt="Cloudy Sky">
</a>

Создание якорей # на странице

Вы также можете создать закладку или якорь, чтобы пользователи могли переходить к определенному разделу веб-страницы. Закладки особенно полезны, если у вас очень длинная веб-страница.

Создание закладок представляет собой двухэтапный процесс: сначала добавьте атрибут id для элемента, к которому вы хотите перейти, затем используйте значение этого атрибута id, которому предшествует знак хештега (#), в качестве значения атрибута href тега <a>, как показано в следующем примере:

<a href="#sectionA">Переход в раздел A</a>
<h2 id="sectionA">Раздел А</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

Создание ссылок для скачивания

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

В следующем примере мы создали ссылки для загрузки файлов .zip, .pdf и .jpg.

<a href="downloads/test.zip">Скачать Zip-файл</a>
<a href="downloads/masters.pdf">Скачать PDF-файл</a>
<a href="downloads/sample.jpg">Скачать Image-файл</a>