Гиперссылки имеют ключевое значение — именно они превращают Интернет в тот, каким мы его знаем. В этой статье представлен синтаксис, необходимый для создания ссылок, и обсуждаются лучшие практики их использования.

Предварительные требования: Базовое понимание HTML, как описано в Основы HTML - элементы, атрибуты и теги .
Задача: Научиться правильно управлять гиперссылками и связывать различные файлы между собой.

Что из себя представляет гиперссылка?

Гиперссылки — одни из самых интересных возможностей Интернета. Они присутствуют со дня его возникновения и позволяют Интернету быть тем, чем он является. С их помощью мы можем соединять наши документы с любым другим ресурсом. Также мы можем указывать на определенные части документов и делать приложения доступны по простому веб-адресу, а не требовать их установки на устройство. Практически любой веб-контент может стать ссылкой, которая при активации заставляет браузер перейти на новый адрес (URL).

Примечание

URL-адрес может указывать на HTML документы, текстовые файлы, изображения, видео, аудио и другие ресурсы в сети. Если ваш браузер не умеет их обрабатывать, он предложит вам выбрать: открыть файл в подходящем приложении или сохранить и открыть его позже.

К примеру, на главной странице BBC вы найдете множество ссылок, указывающих на актуальные новости, разные секции сайта и инструменты для пользователей, такие как вход и регистрация.

Анатомия гиперссылки

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

<p>Я создал ссылку на
  <a href="https://ask42.us">домашнюю страницу Ask42</a>.
</p>

Это дало нам следующий результат:

Я создал ссылку на домашнюю страницу Ask42.

Добавляем информацию через атрибут title

Можно дополнительно использовать атрибут title для добавления справочной информации о ссылке, которая, например, объясняет содержание страницы. Например:

<p>Я создал ссылку на
  <a href="https://ask42.us"
     title="Работа в IT">домашнюю страницу Ask42
  </a>.
</p>

Вот что получилось (описание появится, если навести курсор на ссылку):

Я создал ссылку на домашнюю страницу Ask42.

Примечание

Описание из атрибута title показывается только при наведении, что создает трудности для пользователей, использующих клавиатуру для навигации. Если информация важна, включите её в основной текст, чтобы она была доступна всем.

Ссылки-блоки

Как упоминалось, любой элемент может быть сделан ссылкой, даже блочный элемент. Например, чтобы сделать картинку ссылкой, оберните её тегом <a></a>.

<a href="https://ask42.us">
  <img src="logo.png" alt="логотип со ссылкой на страницу">
</a>
Примечание

Подробнее о работе с изображениями в Интернете можно будет прочитать в следующей статье.

Краткий обзор: URL-адреса и пути

Чтобы добиться полного понимания адресов ссылок, важно разобраться в основах URL-адресов и путей к файлам. Этот раздел предоставит нужные сведения.

URL-адрес (Uniform Resource Locator) — это текстовая строка, показывающая местоположение ресурсов в сети. Например, домашняя страница Ask42 находится по ссылке https://ask42.us.

URL-адреса используют пути для нахождения нужных файлов. Пути указывают расположение файла в файловой системе. Рассмотрим пример структуры каталогов (см. каталог creating-hyperlinks.)

Корень структуры называется creating-hyperlinks. Работая на локальном сайте, вы будете иметь один основной каталог, содержащий весь сайт. В корне содержатся два файла — index.html и contacts.html. В настоящем сайте index.html может выступать домашней или стартовой страницей.

В корне находятся еще два каталога — pdfs и projects, каждый из которых содержит один файл: project-brief.pdf и index.html соответственно. Обратите внимание, что вполне нормально иметь два файла с именем index.html, если они находятся в разных каталогах.

  • В том же каталоге: Если вы хотите сделать ссылку в index.html на contacts.html, достаточно указать имя файла. Они в одном каталоге, поэтому URL будет просто contacts.html.

    <p>Хотите связаться с конкретным сотрудником?
       Найдите подробную информацию на нашей
      <a href="contacts.html">странице контактов</a>.
    </p>
  • Спуск в подкаталоги: Чтобы создать ссылку из index.html на projects/index.html, нужно добавить подкаталог projects в URL, который будет projects/index.html.

    <p>Посетите мою
      <a href="projects/index.html">домашнюю страницу проекта</a>.
    </p>
  • Подъем в родительские каталоги: Для ссылки из projects/index.html на pdfs/project-brief.pdf, нужно подняться вверх каталога и затем войти в pdf. Это делается путем добавления .. в начале пути. В данном случае — URL ../pdfs/project-brief.pdf.

    <p>Ссылка на мое
      <a href="../pdfs/project-brief.pdf">краткое описание проекта</a>.
    </p>
Примечание

Можно комбинировать несколько уровней и создать сложные URL-адреса, такие как
../../../complex/path/to/my/file.html.

Фрагменты документа

Возможно создавать ссылки не только на страницы в целом, но и на определенные части HTML-документа, так называемые фрагменты документа. Для этого добавьте элементу атрибут id. Например, это может быть заголовок:

<h2 id="Mailing_address">Почтовый адрес</h2>

Чтобы создать ссылку на этот id, добавьте его в конец URL, предваряемый знаком '#'. Например:

<p>Хотите написать мне письмо? Используйте наш
  <a href="contacts.html#Mailing_address">почтовый адрес</a>.
</p>

Ссылки на фрагменты можно использовать даже для перехода к другой части того же документа:

<p>
  <a href="#Mailing_address">Почтовый адрес компании</a>
  можно найти в нижней части этой страницы.
</p>

Абсолютные и относительные URL-адреса

В Интернете вы столкнётесь с такими понятиями, как абсолютный URL и относительный URL. Давайте разберемся в их особенностях:

абсолютный URL: Показывает полное местоположение в Интернете, включая протокол и имя домена. Если index.html загружен в каталоге projects, расположенного в корне веб-сервера с доменом http://www.example.com, страница будет доступна по URL-адресу http://www.example.com/projects/index.html (или даже по http://www.example.com/projects/, так как веб-серверы обычно загружают index.html по умолчанию, если он не указан).

абсолютный URL неизменно будет указывать на определенное местоположение, независимо от места его применения.

относительный URL: Определяет расположение относительно файла, с которого выполняется связь, что напоминает ситуацию, обсужденную ранее. Например, если нужно сослаться со страницы http://www.example.com/projects/index.html на PDF-файл из той же секции, URL может быть только именем файла — project-brief.pdf — дополнительная информация не нужна. Если PDF находится в подпапке pdfs внутри папки projects, относительной ссылкой будет pdfs/project-brief.pdf (подобный абсолютный URL выглядел бы как http://www.example.com/projects/pdfs/project-brief.pdf).

Относительный URL указывает на различные адреса в зависимости от местоположения файла, где он используется. Например, если переместить файл index.html из каталога projects в основной каталог сервера, то URL pdfs/project-brief.pdf будет вести на http://www.example.com/pdfs/project-brief.pdf, а не на http://www.example.com/projects/pdfs/project-brief.pdf.

Практика создания качественных ссылок

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

Используйте ясные описания к ссылкам

Размещение ссылок на вашей странице – простая задача, но этого недостаточно. Ссылки должны быть доступными для всех пользователей, независимо от их возможностей и используемых инструментов для просмотра. Пример:

  • Пользователи программ для чтения с экрана переходят по ссылкам, читая текст ссылки.
  • Поисковые системы индексируют файлы на основе текста ссылки, поэтому рекомендуется включать ключевые слова, чтобы точно описывать направление ссылки.
  • Пользователи часто бегло просматривают страницы, не читая каждое слово. Текст ссылки заметен, и полезно, когда он отражает, куда ведет.

Пример:

Оптимальный текст ссылки: Создание и настройка гиперссылок в HTML

<p><a href="https://ask42.us/course/html-introduction/chapter/hyperlinks/">
  Создание и настройка гиперссылок в HTML
</a></p>

Неподходящий текст ссылки: Нажми сюда, чтобы изучить Создание и настройка гиперссылок в HTML

<p><a href="https://ask42.us/course/html-introduction/chapter/hyperlinks/">
  Нажми сюда
</a>,
чтобы изучить Создание и настройка гиперссылок в HTML</p>

Рекомендации:

  • Избегайте использования URL-адресов в качестве текста ссылки, так как они могут быть сложными для восприятия, особенно для пользователей программ чтения с экрана.
  • Нет необходимости включать слово "ссылка" в текст ссылки, так как программы чтения с экрана и так его озвучивают, пользователи визуально видят ссылку благодаря ее отличающемуся оформлению.
  • Стремитесь к краткости текста ссылки, особенно для пользователей программ чтения с экрана.
  • Старайтесь избегать одинаковых текстов ссылок, ведущих на разные страницы, это вызывает путаницу у пользователей программ чтения с экрана.

Используйте относительные ссылки там, где это возможно

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

  • Относительные URL записывать проще, и они, как правило, короче абсолютных, что улучшает читаемость кода.
  • Относительные URL эффективнее: при их использовании браузер не делает дополнительных запросов через Domain Name System (DNS) для поиска сервера — он сразу обращается к нужному файлу на том же сервере, экономя ресурсы браузера.

Для ссылок на не-HTML ресурсы добавляйте описание

При создании ссылки на файл для загрузки (например, PDF или Word) или на неожиданный ресурс (видео, аудио, всплывающее окно), указывайте четкое описание действия, чтобы избежать путаницы. Приведем примеры:

  • При слабом интернет-соединении недостающая подсказка перед загрузкой большого файла может раздражать пользователя.
  • При нехватке установленного плеера и редиректе на страницу с Flash-содержимым из-за отсутствия описания может возникнуть непонимание.

Примеры описаний:

<p><a href="http://www.example.com/large-report.pdf">
  Скачать отчет о продажах (PDF, 10MB)
</a></p>

<p><a href="http://www.example.com/video-stream/">
  Посмотреть видео (откроется в новом окне, HD качество)
</a></p>

<p><a href="http://www.example.com/car-game">
  Играть в гонки (необходим Flash)
</a></p>

Использование атрибута download при создании ссылки

Когда вы создаете ссылку на файл для загрузки, а не для открытия в браузере, применяйте атрибут download. Это задает имя файла по умолчанию, которое сохранится. Пример ссылки для загрузки:

<a href="https://example.com/photos.zip"
   download="photos.zip">
  Скачать архив фото
</a>

Ссылки для электронной почты

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

Самая простая и распространенная форма — с использованием mailto:, за которым следует адрес электронной почты. Например:

<a href="mailto:[email protected]">Отправить письмо для nowhere</a>

В результате получится ссылка вида: Отправить письмо для nowhere.

Заполнение адреса электронной почты не всегда необходимо. Если оставить поле пустым (в атрибуте href задать "mailto:"), откроется пустое сообщение, что удобно для кнопок "Поделиться".

Особенности и нюансы

В дополнение к адресу электронной почты, можно указать другую информацию. Любые стандартные поля почты могут быть добавлены, такие как «subject», «cc» и «body» (не истинное поле заголовка, но позволяет добавить данные для нового сообщения). Каждое поле и его значение задаются в виде условия запроса.

Пример с «cc» (кому отправить копию), «bcc» (скрытого получателя), «subject» (темой) и «body» (содержанием сообщения):

<a href="mailto:nowhere@https://[email protected]&[email protected]&subject=Тема%20письма&body=Текст%20письма">
  Отправить письмо с предустановленными cc, bcc, subject и body
</a>
Примечание

Все поля должны быть в URL-кодировке (например, символы и пробелы percent-escaped). Обратите внимание на знак вопроса (?) для отделения адреса от полей, амперсанд (&) для разделения полей mailto: URL. Эти правила применяются к описанию URL запроса.

Примеры использования mailto URLs:

Заключение

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

Вопросы для самопроверки:

  1. Что такое гиперссылка и какое значение она имеет для Интернета?
  2. Какой атрибут можно использовать для добавления справочной информации к ссылке?
  3. Какая разница между абсолютным и относительным URL-адресом?
  4. Как можно создать ссылку на определенную часть HTML-документа?
  5. Как создать ссылку для отправки электронного письма и какие дополнительные поля можно указать?
  6. Какие преимущества имеют относительные URL по сравнению с абсолютными при использовании на одном сайте?
  7. Почему важно следить за содержанием текста ссылки?

Программа курса:

  1. Описание курса
  2. Основы HTML - элементы, атрибуты и теги

    Охватывает базовые основы HTML, чтобы вы начали изучение - мы опишем элементы, атрибуты и все другие важные термины, о которых вы, возможно, уже слышали, а также где и как они располагаются в языке. Мы также покажем, структуру HTML элемента, как устроена типичная страница HTML, и объясним другие важные языковые особенности. По ходу мы будем играть с HTML так, чтобы вам было интересно!

  3. Метаданные и заголовки в HTML

    Заголовок HTML — это часть документа, которая не отображается в браузере при загрузке страницы. Он содержит информацию, такую как: страница <title>, ссылки на CSS (если вы хотите стилизовать свой HTML при помощи CSS), ссылки на пользовательские значки и метаданные (которые представляют собой данные о HTML, например, кто его написал или важные ключевые слова, которые описывают документ).

  4. Основы редактирования текста в HTML

    Основной задачей HTML является придание тексту значения (также известно, как семантика), чтобы браузер знал, как его правильно отображать. В этой статье расматривается то, как использовать HTML, чтобы разбить блок текста на структуру из заголовков и абзацев, добавить акцент/значение слов, создать списки и многое другое.

  5. Создание и настройка гиперссылок в HTML

    Гиперссылки очень важны — ведь именно они делают интернет интернетом. В этой статье описан синтаксис, необходимый для создания ссылок, а также описано их наилучшее применение на практике.

  6. Углубленное форматирование текста в HTML

    Существует множество других элементов HTML для редактирования текста. Описанные здесь элементы менее известны, но о них также полезно знать. Здесь вы узнаете о разметке цитат, списках описания, компьютерном коде и другом сопутствующем тексте, нижнем и верхнем индексах, контактной информации и многом другом.

  7. Структура документа и сайта в HTML

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

  8. Отладка HTML - поиск и исправление ошибок

    Писать на HTML хорошо, но что, если что-то идет не так, и вы не можете найти место ошибки в коде? В этой статье вы познакомитесь с некоторыми инструментами, которые могут Вам помочь.