10. Ссылки и навигация

![Иллюстрация к уроку](/lessons/html-links-navigation.png)
Ссылки – это клей, который соединяет веб-страницы вместе и позволяет пользователям перемещаться по сайту и в интернете. В этом уроке мы разберемся, как создавать ссылки и использовать их для навигации.

## Что такое ссылки?

Ссылка в HTML создается с помощью тега `<a>` (от слова "anchor" - якорь). Самый важный атрибут тега `<a>` - это `href`, который указывает на адрес (URL) страницы, на которую ведет ссылка.

```html
<a href="https://www.example.com">Посетите Example.com</a>

В этом примере мы создали ссылку, которая ведет на сайт example.com. Текст “Посетите Example.com” будет отображаться как ссылка на странице. При нажатии на этот текст браузер перейдет на указанный адрес.

Типы ссылок

Ссылки могут быть разных типов:

• Внешние ссылки: Ведут на другие веб-сайты (как в примере выше).
• Внутренние ссылки: Ведут на другие страницы в пределах вашего сайта.
• Якорные ссылки: Ведут к определенному разделу на той же странице.
• Ссылки на электронную почту: Открывают почтовый клиент пользователя с указанным адресом.

Внутренние ссылки

Чтобы создать внутреннюю ссылку, просто укажите путь к другой HTML-странице на вашем сайте.

<a href="about.html">О компании</a>

Этот код создаст ссылку на файл about.html, который должен находиться в той же папке, что и текущая страница. Если about.html находится в подпапке, укажите путь к этой подпапке.

<a href="pages/about.html">О компании</a>

Якорные ссылки

Якорные ссылки позволяют переходить к определенному месту на текущей странице. Для этого нужно сначала задать идентификатор (id) для элемента, к которому вы хотите перейти.

<h2 id="section1">Раздел 1</h2>

<a href="#section1">Перейти к разделу 1</a>

Когда пользователь нажмет на ссылку “Перейти к разделу 1”, браузер прокрутит страницу к элементу с id="section1".

Ссылки на электронную почту

Чтобы создать ссылку, которая открывает почтовый клиент пользователя, используйте схему mailto:.

<a href="mailto:[email protected]">Напишите нам</a>

При нажатии на эту ссылку откроется почтовый клиент пользователя с адресом [email protected] в поле “Кому”.

Атрибут target

Атрибут target определяет, где откроется связанная страница. Наиболее часто используемые значения:

• _self (по умолчанию): Открывает страницу в текущем окне или вкладке.
• _blank: Открывает страницу в новом окне или вкладке.

<a href="https://www.example.com" target="_blank">Посетите Example.com (откроется в новой вкладке)</a>

Жизненный пример

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

Фреймворки, такие как React, Vue или Angular, используют компоненты, которые генерируют HTML-ссылки, но с добавлением интерактивности и логики маршрутизации. Например, React Router предоставляет компоненты <Link> для создания внутренних ссылок в одностраничных приложениях (SPA).

В CMS (системах управления контентом), таких как WordPress, Drupal или Joomla, ссылки используются повсеместно для создания меню, связывания страниц, и для перехода к другим статьям.

Ключевые моменты

• Тег <a> используется для создания ссылок.
• Атрибут href указывает на адрес, на который ведет ссылка.
• Существуют внешние, внутренние и якорные ссылки.
• Атрибут target определяет, где откроется связанная страница.
• Ссылки – основа веб-навигации.