HTML5 ссылки: руководство для начинающих

Создание базовой ссылки

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

<a>Перейти в Google</a>

Этот код отобразит «Перейти в Google» как обычный текст. Чтобы сделать его ссылкой, необходим атрибут href. Тег <a> без href не является ссылкой.

Атрибут href содержит URL. Например:

<a href="https://google.com">Перейти в Google</a>

Теперь клик на «Перейти в Google» перенаправит пользователя на Google.

Атрибут title

Атрибут title добавляет подсказку при наведении курсора:

<a href="https://google.com" title="Нажми на меня">Перейти в Google</a>

Появится подсказка «Нажми на меня».

Атрибут target

Атрибут target управляет открытием ссылки:

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

Пример target="_blank":

<a href="https://google.com" target="_blank">Перейти в Google</a>

Ссылки на локальные файлы

Навигация между HTML-файлами осуществляется с помощью относительных путей. Например, для файлов index.html и about.html:

<a href="about.html">Перейти на страницу "Про нас"</a>

(в index.html). Файлы должны находиться в одной директории. Путь / перед именем файла не нужен при локальном запуске, но требуется на локальном сервере.

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

Якорные ссылки позволяют переходить к месту на странице.

  1. Создание якоря: Используйте атрибут name в <a> без href:

    <a name="bottom_page"></a>
  2. Ссылка на якорь: Используйте # перед именем якоря в href:

    <a href="#bottom_page">Вниз</a>

Клик на «Вниз» переместит к bottom_page.

Ссылки на почтовые клиенты

Для ссылки, открывающей почтовый клиент с заполненными полями:

<a href="mailto:admin@aitprager.com">Написать на почту</a>

Откроется клиент с адресом admin@aitprager.com.

Комбинирование и встраивание

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

Создание ссылок — важный аспект веб-разработки. Изучив основы, вы сможете создавать эффективные ссылки на внешние ресурсы, локальные файлы и якоря.

Что будем искать? Например,программа