W3Docs

Тема

Русский

HTML-ссылки ​

Сайты содержат различные типы ссылок, которые ведут напрямую на другие страницы или позволяют перейти к определенной части страницы. Ссылки в HTML называются гиперссылками. Они определяются с помощью тега <a>.

Гиперссылки могут быть применены к фразе, слову, изображению или любому HTML-элементу.

По умолчанию ссылки в HTML имеют следующие цвета:

  • непосещенные ссылки: подчеркнутые и синие
  • посещенные ссылки: подчеркнутые и фиолетовые
  • активные ссылки: подчеркнутые и красные

Это стиль ссылок по умолчанию, но вы можете убрать подчеркивание или изменить цвет ссылок, используя CSS-стили.

Синтаксис ​

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

Чтобы создать гиперссылку, используйте тег <a> и атрибут href, значением которого является URL или адрес, на который указывает ссылка.

Ссылки в HTML

html
<a href="url">your text</a>.

Пример тега HTML <a> с атрибутом href: ​

Пример HTML-ссылок|W3Docs.com|W3Docs

html
<!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>
Try it Yourself »

Результат ​

hyperlink

В приведенном выше примере мы использовали <h2> для определения подзаголовков и тег <a> для создания ссылок. Между тегами <a> и </a> находится текст W3Docs.com. Нажмите на него, и вы перейдете на главную страницу нашего сайта.

Атрибут target ​

Чтобы открыть ссылку в новой вкладке, добавьте в код target="_blank". Атрибут target указывает, где именно нужно открыть связанную страницу. При использовании target="_blank" связанная страница откроется в новом окне или новой вкладке.

Ссылки в HTML

html
<a href="https://www.w3docs.com/" target="_blank" rel="noopener noreferrer">W3Docs.com</a>

Атрибут id ​

Чтобы перейти к определенной части страницы, используйте атрибут id.

Вот как это следует делать:

  1. Используйте атрибут id, чтобы задать имя части страницы, куда пользователь должен быть перенаправлен после нажатия на ссылку. Значением атрибута может быть слово или фраза, описывающая эту часть (если используется фраза, в ней не должно быть пробелов — используйте нижнее подчеркивание вместо них).
    Пример: <h2 id="jump">Link example with id attribute</h2>. Мы использовали атрибут id со значением "jump".

  2. Создайте гиперссылку, используя 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

html
<!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>
Try it Yourself »

Как применить гиперссылку к изображению ​

Чтобы применить гиперссылку к изображению, достаточно поместить изображение внутрь тега <a>. Для этого используется тег <img>, который должен иметь несколько обязательных атрибутов:

  1. src — источник изображения
  2. alt — альтернативный текст для изображения
  3. width — ширина изображения
  4. height — высота изображения

Пример тегов <a> и <img> для применения гиперссылки к изображению: ​

Гиперссылка, примененная к изображению|Пример HTML-ссылок|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/">
    <img src="https://ru.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo" />
    </a>
  </body>
</html>
Try it Yourself »

Изображения в HTML будут подробно рассмотрены в следующей главе.

Заголовки ссылок ​

Атрибут title используется для указания дополнительной информации об элементе. Эта информация часто отображается в виде всплывающей подсказки при наведении курсора мыши на элемент.

Пример заголовков ссылок: ​

Пример заголовков ссылок

html
<!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>
Try it Yourself »

Внешние пути ​

Вы можете ссылаться на внешние страницы по URL или пути, соответствующему текущей веб-странице. В приведенном ниже примере показано, как это сделать:

Пример тега HTML <a> для ссылки на внешнюю страницу по URL: ​

Пример тега HTML <a> для ссылки на внешнюю страницу по URL:

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>External paths</h1>
    <div>Example of referencing an external page with its URL</div>
    <p><a href="https://en.wikipedia.org/wiki/HTML">More about HTML</a></p>
  </body>
</html>
Try it Yourself »

Практика ​

Какие различные атрибуты имеет тег HTML <a> согласно статье?

Считаете ли это полезным?

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.