HTML-ссылки
Ссылки ведут на другие страницы или к частям страницы. Учитесь создавать HTML-ссылки с тегом <a>: href, абсолютные и относительные URL, атрибут target.
Веб-сайты содержат различные типы ссылок, которые ведут вас на другие страницы или позволяют перейти к определённой части страницы. Ссылки в HTML называются гиперссылками. Они определяются с помощью тега <a>.
Гиперссылки применяются к фразе, слову, изображению или любому HTML-элементу.
Цвет ссылок по умолчанию в HTML:
- непосещённые ссылки: подчёркнутые и синие
- посещённые ссылки: подчёркнутые и фиолетовые
- активные ссылки: подчёркнутые и красные
Это стиль ссылок по умолчанию, но вы можете убрать подчёркивание или изменить цвет ссылок, используя стили CSS.
Синтаксис
Тег <a> используется парами: открывающий <a> указывает, где начинается ссылка, а закрывающий </a> — где она заканчивается.
Чтобы создать гиперссылку, нужно использовать тег <a> и атрибут href, значением которого является URL-адрес или местоположение, на которое указывает ссылка.
HTML-ссылки
<a href="url">your text</a>.Пример тега HTML <a> с атрибутом href:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Link example</h2>
<a href="https://www.w3docs.com/">W3Docs.com</a>
</body>
</html>В приведённом примере мы использовали <h2> для определения подзаголовка и тег <a> для создания ссылки. Между тегами <a> и </a> находится текст W3Docs.com, который браузер отображает как синюю подчёркнутую ссылку. При нажатии на неё пользователь переходит на главную страницу нашего сайта.
Атрибут target
Чтобы открыть ссылку на новой странице, нужно добавить target="_blank" в код. Атрибут target указывает, где именно открывать связанную страницу. С target="_blank" связанная страница откроется в новом окне или новой вкладке.
Наиболее распространённые значения атрибута target:
_self— открыть в той же вкладке (это значение по умолчанию, поэтому его обычно не пишут)._blank— открыть в новой вкладке или окне.
HTML-ссылки
<a href="https://www.w3docs.com/" target="_blank" rel="noopener noreferrer">W3Docs.com</a>Почему rel="noopener noreferrer" важен
Обратите внимание на rel="noopener noreferrer" в ссылке выше. Когда вы открываете ссылку с target="_blank", новая страница в обычных условиях может получить доступ к странице, которая её открыла, через свойство window.opener. Вредоносная страница может воспользоваться этим, чтобы незаметно перенаправить вашу исходную вкладку на фишинговый сайт — такая атака называется обратным перехватом вкладок (reverse tabnabbing).
Добавление rel="noopener" разрывает эту связь, и новая страница не может воздействовать на вашу вкладку. noreferrer делает то же самое и дополнительно запрещает браузеру отправлять заголовок Referer на новую страницу. Как правило, всегда добавляйте rel="noopener noreferrer", когда делаете ссылку на внешний сайт с target="_blank".
Атрибут id
Чтобы перейти к конкретной части страницы, используйте атрибут id.
Вот как это делается:
-
Используйте атрибут
id, чтобы задать имя части страницы, к которой пользователь должен перейти после нажатия на ссылку. Значением атрибута может быть слово или фраза, описывающая эту часть (если используется фраза, в ней не должно быть пробелов — используйте вместо них подчёркивания).
Пример:<h2 id="jump">Link example with id attribute</h2>. Мы использовали атрибутidсо значением «jump». -
Создайте гиперссылку, используя
idцелевого элемента, перед которым ставится символ решётки (#).
Пример:<a href="#jump">When you click on this link, you will be redirected to the part of the page with "jump" id</a>.
Теперь посмотрим, как это выглядит в HTML-коде. В примере ниже прокрутите страницу вниз до ссылки, нажмите на неё, и вы вернётесь обратно наверх.
Пример тега HTML <a> с атрибутом id:
Пример ссылки с атрибутом id
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2 id="jump">Link example with id attribute</h2>
<p>
Here can be any part of the page you want to the user to end up clicking on hyperlink. We use attribute id called “jump”.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum ut ipsum quis elementum. Curabitur a sem a ante pulvinar tincidunt. Nullam posuere arcu in erat laoreet, vitae efficitur ex venenatis. Quisque in fermentum nunc, vel consequat risus. Suspendisse risus purus, semper quis tempus eget, iaculis euismod velit. Quisque mi nunc, cursus et suscipit eget, gravida et nisi. Duis eros massa, eleifend eget tincidunt in, porta sit amet ante. Nunc eu feugiat quam. Morbi vel sapien ac dolor ultricies dapibus quis quis libero. Cras et auctor leo.
</p>
<p>
Donec accumsan sapien vitae diam commodo lobortis. Nam feugiat ullamcorper malesuada. Praesent fermentum nulla quis mauris consequat mollis. In lacus libero, laoreet nec aliquam in, vestibulum quis dui. Donec congue enim et lorem lobortis, ut suscipit augue congue. Integer efficitur ligula nec lectus aliquet, in luctus magna efficitur. Mauris euismod mauris viverra enim tincidunt efficitur. Ut imperdiet quis lorem in tincidunt. Nam magna orci, venenatis et felis rhoncus, semper maximus eros. Proin mauris mauris, sodales quis eleifend vel, convallis in leo. Curabitur vel auctor lacus. Integer vestibulum nisi magna, id malesuada erat consequat quis. Vivamus iaculis aliquam ullamcorper. Aenean faucibus posuere rhoncus. Mauris tincidunt magna velit, sed semper arcu venenatis non. Sed odio risus, luctus eget aliquam vel, elementum id sem.
</p>
<p>
Ut imperdiet pharetra nisl ut mollis. Aenean neque odio, volutpat a imperdiet sit amet, sollicitudin non dolor. Donec velit odio, lacinia sed dui in, dignissim consequat sem. Nullam vel vestibulum mi, ornare lacinia diam. Vivamus sed vestibulum ligula, a tempor magna. Nulla vitae nisi ligula. Vivamus euismod tincidunt justo varius rhoncus. Aliquam vitae enim odio. Nunc pretium, odio in fermentum fringilla, ipsum nulla aliquet magna, ac aliquet dui tellus viverra lacus. In vel feugiat elit. Nulla a pretium nunc, consequat blandit tellus. Proin sit amet molestie eros. Aliquam sit amet quam tincidunt, egestas nunc ut, vehicula tellus. Donec ullamcorper, ipsum cursus rutrum fermentum, ipsum sem semper orci, quis ultrices odio turpis sit amet tortor.
</p>
<p>
Phasellus ultrices at neque sit amet varius. Fusce molestie lacinia lorem, eu interdum urna tempor malesuada. Etiam nec ultricies nisi, ut fringilla nibh. Phasellus arcu metus, ultrices eu ipsum eu, fermentum fermentum tellus. Cras blandit massa turpis, eu condimentum purus suscipit ut. In hac habitasse platea dictumst. Sed nec magna sit amet mi congue aliquam. Integer tempor lobortis eros, ut finibus tortor fringilla id. Mauris mollis sollicitudin justo, et condimentum lacus. Nam tellus velit, efficitur nec efficitur eu, pharetra ac tortor. Mauris vitae sagittis purus.
</p>
<p>
Donec accumsan sapien vitae diam commodo lobortis. Nam feugiat ullamcorper malesuada. Praesent fermentum nulla quis mauris consequat mollis. In lacus libero, laoreet nec aliquam in, vestibulum quis dui. Donec congue enim et lorem lobortis, ut suscipit augue congue. Integer efficitur ligula nec lectus aliquet, in luctus magna efficitur. Mauris euismod mauris viverra enim tincidunt efficitur. Ut imperdiet quis lorem in tincidunt. Nam magna orci, venenatis et felis rhoncus, semper maximus eros. Proin mauris mauris, sodales quis eleifend vel, convallis in leo. Curabitur vel auctor lacus. Integer vestibulum nisi magna, id malesuada erat consequat quis. Vivamus iaculis aliquam ullamcorper. Aenean faucibus posuere rhoncus. Mauris tincidunt magna velit, sed semper arcu venenatis non. Sed odio risus, luctus eget aliquam vel, elementum id sem.
</p>
<p>
Ut imperdiet pharetra nisl ut mollis. Aenean neque odio, volutpat a imperdiet sit amet, sollicitudin non dolor. Donec velit odio, lacinia sed dui in, dignissim consequat sem. Nullam vel vestibulum mi, ornare lacinia diam. Vivamus sed vestibulum ligula, a tempor magna. Nulla vitae nisi ligula. Vivamus euismod tincidunt justo varius rhoncus. Aliquam vitae enim odio. Nunc pretium, odio in fermentum fringilla, ipsum nulla aliquet magna, ac aliquet dui tellus viverra lacus. In vel feugiat elit. Nulla a pretium nunc, consequat blandit tellus. Proin sit amet molestie eros. Aliquam sit amet quam tincidunt, egestas nunc ut, vehicula tellus. Donec ullamcorper, ipsum cursus rutrum fermentum, ipsum sem semper orci, quis ultrices odio turpis sit amet tortor.
</p>
<p>
Fusce ultricies ex eros, et maximus est feugiat vel. Ut non nunc turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi viverra eu dui congue pulvinar. Donec tincidunt, nulla sed sodales iaculis, felis sem dapibus sem, et viverra justo massa sed magna. Vestibulum eleifend ex vitae mattis iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<a href="#jump">When we click on this link, we will be redirected to the part of the page with “jump” id</a>
</body>
</html>Вы также можете перейти к элементу с определённым id на другой странице, добавив фрагмент в конец URL этой страницы. Например, если на странице about есть элемент с id="contact", следующая ссылка откроет эту страницу и сразу прокрутит её до нужного места:
<a href="/about#contact">Contact us</a>Как применить гиперссылку к изображению
Чтобы применить гиперссылку к изображению, нужно просто поместить изображение внутрь тега <a>. Для этого используется тег <img>, у которого должны быть следующие обязательные атрибуты:
- src — источник изображения
- alt — альтернативный текст для изображения
- width — ширина изображения
- height — высота изображения
Пример тегов <a> и <img> для применения гиперссылки к изображению:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/">
<img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo" />
</a>
</body>
</html>Изображения в HTML будут подробно рассмотрены в следующей главе.
Заголовки ссылок
Атрибут title используется для указания дополнительной информации об элементе. Эта информация часто отображается в виде всплывающей подсказки при наведении указателя мыши на элемент.
Пример заголовков ссылок:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Link Title Example</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>The <span class="attribute">title</span> attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.</p>
<a href="https://www.w3docs.com/learn-html.html" title="Learn HTML">Learn more about HTML</a>
</body>
</html>Абсолютные и относительные URL
Значение атрибута href может быть одним из двух видов адресов. Понимание разницы между ними — одна из важнейших составляющих правильного создания ссылок.
Абсолютный URL — это полный веб-адрес, включающий протокол (https://) и доменное имя. Используйте его для создания ссылок на страницы другого сайта:
<a href="https://en.wikipedia.org/wiki/HTML">More about HTML</a>Относительный URL указывает на страницу того же сайта, описывая её расположение относительно текущей страницы. Браузер самостоятельно подставляет протокол и домен. Относительные URL бывают нескольких видов:
<!-- Same folder as the current page -->
<a href="./contact.html">Contact</a>
<!-- One folder up, then into another folder -->
<a href="../images/logo.png">Logo</a>
<!-- Root-relative: starts at the site root, no matter where the current page is -->
<a href="/about">About us</a>Как выбрать:
- Ведущий
/(корневой относительный путь вида/about) всегда начинается с корня сайта, поэтому одна и та же ссылка работает на любой странице. Это обычно самый надёжный вариант для навигации по всему сайту. ./означает «текущая папка», а../— «перейти на папку выше». Такие документо-относительные пути перестают работать, если вы позднее переместите страницу в другую папку, поэтому используйте их осторожно.- Полный абсолютный URL используйте только тогда, когда целевая страница находится на другом домене.
Подробнее о структуре URL читайте в разделе HTML URL.
Пример абсолютных и относительных ссылок:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>External and internal paths</h1>
<p><a href="https://en.wikipedia.org/wiki/HTML">More about HTML (absolute)</a></p>
<p><a href="/about">About us (root-relative)</a></p>
</body>
</html>Ссылки для email и телефона
Значение href не ограничивается только веб-страницами. С помощью специальных схем URL можно открыть почтовый клиент пользователя или, на мобильном устройстве, начать звонок.
Ссылка mailto: открывает новое письмо, адресованное указанному адресу:
<a href="mailto:[email protected]">Email us</a>Ссылка tel: позволяет пользователям мобильных устройств нажать и набрать номер телефона:
<a href="tel:+15551234567">Call us</a>Атрибуты rel, download и hreflang
Помимо href, target и title, тег <a> поддерживает ещё несколько полезных атрибутов.
Атрибут rel описывает взаимосвязь между текущей и связанной страницей. Вы уже видели rel="noopener noreferrer" для обеспечения безопасности. Другое распространённое значение — rel="nofollow", которое сообщает поисковым системам не передавать рейтинговый вес по ссылке:
<a href="https://example.com" rel="nofollow">Sponsored link</a>Атрибут download указывает браузеру загрузить целевой файл вместо перехода по ссылке. Вы можете задать ему значение, чтобы предложить имя файла:
<a href="/files/report.pdf" download="annual-report.pdf">Download the report</a>Атрибут hreflang указывает язык связанного документа. Он не изменяет поведение для пользователей, но помогает браузерам и поисковым системам понять целевую страницу:
<a href="https://example.fr/" hreflang="fr">French version</a>Полный список атрибутов тега <a> смотрите в справочнике HTML-тег <a>.
Доступность: пишите информативный текст ссылок
Пользователи программ чтения с экрана часто перемещаются от ссылки к ссылке, воспринимая только текст ссылки вне контекста. Расплывчатые формулировки вроде «нажмите здесь» или «читать далее» ничего не говорят им о том, куда ведёт ссылка. Пишите текст ссылки так, чтобы он описывал место назначения самостоятельно:
<!-- Avoid: meaningless out of context -->
<p>To learn about our pricing, <a href="/pricing">click here</a>.</p>
<!-- Better: the link text describes the target -->
<p>See our <a href="/pricing">pricing plans</a>.</p>Размещайте значимые слова внутри тегов <a>, следите за тем, чтобы ссылки визуально отличались от окружающего текста, и избегайте использования голого URL в качестве текста ссылки для важных ссылок.