Гиперссылки имеют ключевое значение — именно они превращают Интернет в тот, каким мы его знаем. В этой статье представлен синтаксис, необходимый для создания ссылок, и обсуждаются лучшие практики их использования.
| Предварительные требования: | Базовое понимание 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@{ request.get_host() }}[email protected]&[email protected]&subject=Тема%20письма&body=Текст%20письма"> Отправить письмо с предустановленными cc, bcc, subject и body </a>
Все поля должны быть в URL-кодировке (например, символы и пробелы percent-escaped). Обратите внимание на знак вопроса (?) для отделения адреса от полей, амперсанд (&) для разделения полей mailto: URL. Эти правила применяются к описанию URL запроса.
Примеры использования mailto URLs:
- mailto:
- mailto:[email protected]
- mailto:[email protected],[email protected]
- mailto:[email protected][email protected]
Заключение
Представленные сведения достаточны для начинающих при создании ссылок. В дальнейшем, когда вы будете изучать стили, это знание потребуется снова. Следующие темы будут посвящены семантике текста и более сложным возможностям для создания контента. В следующей главе мы рассмотрим продвинутое форматирование текста.