HTML для начинающих, часть 7

Ссылки в HTML: Внешние и внутренние, и основные атрибуты тега <a>

Привет, друзья! Сегодня мы погрузимся в мир ссылок в HTML. Если вы когда-нибудь задумывались, как сделать так, чтобы пользователи вашего сайта могли легко перемещаться между разными страницами или даже отправляться в далекие уголки интернета, этот материал для вас. Давайте разбираться вместе!

Что такое ссылка в HTML?

Ссылка в HTML создается с помощью тега <a>, который расшифровывается как “anchor” (якорь). Он служит для создания ссылок на другие страницы, документы, или даже на определенные части той же страницы. По сути, <a> — это мост между разными частями веба.

<a href="https://example.com">Перейти на сайт</a>

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

Внешние ссылки

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

Пример внешней ссылки:

<a href="https://www.wikipedia.org" target="_blank" rel="noopener noreferrer">Посетить Википедию</a>

Здесь href указывает на внешний URL, а target="_blank" заставляет ссылку открываться в новой вкладке. Атрибут rel="noopener noreferrer" повышает безопасность при использовании target="_blank" и предотвращает потенциальные угрозы со стороны внешних сайтов.

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

Внутренние ссылки связывают страницы внутри вашего собственного веб-сайта. Это как направлять гостей в разные комнаты вашего дома. Например, вы можете создать ссылку на страницу “О нас” или “Контакты” на вашем сайте.

Пример внутренней ссылки:

<a href="#about">Перейти к разделу "О нас"</a>

Здесь href с символом # указывает на идентификатор (ID) на той же странице. Можно также связывать разные страницы вашего сайта, указывая относительный путь.

Другой пример внутренней ссылки:

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

Основные атрибуты тега <a>

Теперь давайте рассмотрим основные атрибуты, которые можно использовать с тегом <a>, чтобы сделать ссылки более функциональными и полезными.

1. href (обязательный атрибут)href (от “hypertext reference”) указывает адрес, на который ведет ссылка. Без этого атрибута тег <a> превращается просто в текст, который не является ссылкой.

   <a href="https://www.example.com">Ссылка</a>
   

2. targetАтрибут target определяет, где будет открыта ссылка. Наиболее часто используемые значения:
   • _self — открывает ссылку в той же вкладке (значение по умолчанию).
   • _blank — открывает ссылку в новой вкладке или окне.
   • _parent — открывает ссылку в родительском фрейме.
   • _top — открывает ссылку во всём окне.

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

   <a href="https://www.example.com" target="_blank">Открыть в новой вкладке</a>

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

   <a href="https://www.example.com" title="Перейти на Example.com">Ссылка с подсказкой</a>

4. relАтрибут rel определяет отношение между текущей страницей и ссылкой. Он важен для SEO и безопасности. Например, rel="noopener noreferrer" часто используется вместе с target="_blank".

   <a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Безопасная ссылка</a>

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

   <a href="files/document.pdf" download>Скачать документ</a>

6. hreflangАтрибут hreflang указывает язык целевой страницы. Это полезно для поисковых систем, чтобы понять, на каком языке написана целевая страница.

   <a href="https://www.example.com" hreflang="en">Посетить англоязычную версию</a>

Внутренние и внешние ссылки: когда использовать?

Вы, вероятно, задаетесь вопросом: “Когда использовать внутренние, а когда внешние ссылки?” Хороший вопрос!

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

Итог

Ссылки — это основа навигации в интернете, и умение правильно их использовать — важный навык веб-разработчика. Внешние ссылки помогают связывать ваш сайт с остальным миром, а внутренние — структурируют его и делают удобным для пользователей. Основные атрибуты тега <a> позволяют настроить поведение ссылок и улучшить пользовательский опыт.

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

Ссылка на предыдущую статью данного мини курса:  Медиа в HTML
Ссылка на следующую статью данного мини курса: Таблицы