Ссылки

Тег <a> (anchor) создаёт ссылки — основу навигации веба. Атрибут href задаёт адрес назначения. Ссылки могут вести на другие страницы, разделы той же страницы (якоря), файлы для скачивания, email-адреса и телефонные номера.

Тег <a> и атрибут href:

<a href="URL">Текст ссылки</a>

href (Hypertext REFerence) — адрес, куда ведёт ссылка.

Типы ссылок:

• Внешние — на другие сайты:

<a href="https://google.com">Google</a>

• Внутренние — на другие страницы сайта:

<a href="about.html">О нас</a> <a href="/contacts">Контакты</a>

• Якорные — на разделы той же страницы:

<a href="#section">К разделу</a> <!-- ... --> <div id="section">Раздел</div>

• Mail и tel:

<a href="mailto:info@example.com">Написать</a> <a href="tel:+79991234567">Позвонить</a>

• Скачивание файлов:

<a href="file.pdf" download>Скачать PDF</a>

Атрибут target:

• _blank — открыть в новой вкладке
• _self — открыть в той же вкладке (по умолчанию)

Атрибут rel:

• noreferrer — не передавать информацию о переходе
• noopener — безопасность при target="_blank"

Ссылки — как двери между комнатами. Каждая дверь (тег <a>) ведёт в другую комнату (URL). Якорные ссылки — как лифт внутри здания: поднимает на другой этаж той же страницы.

**Самый простой:**

<a href="https://google.com">Перейти в Google</a>
<a href="about.html">О нас</a>
<a href="#contacts">Контакты</a>

Внешняя, внутренняя и якорная ссылка — три основных типа.

**Простой:**

<!-- Внешняя ссылка (безопасная) -->
<a href="https://github.com" target="_blank" rel="noopener noreferrer">
  GitHub
</a>

<!-- Якорная ссылка -->
<nav>
  <a href="#about">Обо мне</a>
  <a href="#skills">Навыки</a>
</nav>

<!-- Email -->
<a href="mailto:hello@example.com">Написать письмо</a>

Безопасная внешняя ссылка, навигация по якорям и email-ссылка.

**Реальный пример:**

<!DOCTYPE html>
<html lang="ru">
<head><title>Портфолио</title></head>
<body>
  <nav>
    <a href="#about">Обо мне</a>
    <a href="#projects">Проекты</a>
    <a href="/resume.html">Резюме</a>
  </nav>

  <section id="about">
    <h2>Обо мне</h2>
    <p>Напишите мне: <a href="mailto:ivan@example.com">ivan@example.com</a></p>
  </section>

  <section id="projects">
    <h2>Проекты</h2>
    <p>
      <a href="https://github.com/ivan/project" target="_blank" rel="noopener noreferrer">
        Смотреть на GitHub →
      </a>
    </p>
  </section>
</body>
</html>

Реальный пример: портфолио с навигацией, якорными ссылками и внешней ссылкой.

**Неправильно:** Использовать target="_blank" без rel="noopener noreferrer"

**Почему:** Страница, открытая через target="_blank", может получить доступ к window.opener — это уязвимость.

**Правильно:** Всегда добавляйте rel="noopener noreferrer" к ссылкам с target="_blank".

**Неправильно:** Писать «нажмите здесь» в качестве текста ссылки

**Почему:** «Нажмите_here» ничего не говорит о содержимом. Скринридеры читают только текст ссылки.

**Правильно:** Текст ссылки должен описывать назначение: «Читать далее», «Смотреть проект», «Документация».

**Неправильно:** Забывать # перед якорем

**Почему:** Без # ссылка будет искать файл с таким именем, а не раздел на странице.

**Правильно:** Якорные ссылки всегда начинаются с #: href="#section".

• href задаёт адрес ссылки
• Внешние ссылки: полный URL (https://...)
• Якорные ссылки: #id элемента
• target="_blank" + rel="noopener noreferrer" для новых вкладок
• Текст ссылки должен описывать назначение

Назад: Вы знаете форматирование текста (H6) — ссылки добавляют навигацию между страницами.

Вперёд: В следующем уроке (H8) вы изучите изображения: <img>, alt-текст и форматы картинок.