Загрузка...

Ссылки в HTML

Кодирование URL объяснило, как специальные символы путешествуют внутри адреса. Этот урок строит повседневный HTML-инструмент, который использует эти адреса: элемент anchor a с атрибутом href. Ссылки — это то, как посетители перемещаются между вашими страницами и во внешний веб. Ясные назначения и ясный кликабельный текст важны не меньше корректной разметки.

Что такое ссылка

Гиперссылка — это элемент управления, который при активации ведёт куда-то. В HTML вы оборачиваете кликабельное содержимое — обычно текст, иногда изображение — в <a>...</a> и задаёте href как назначение. Без href у вас нет обычной навигационной ссылки. Браузер по умолчанию стилизует ссылки (часто подчёркиванием и цветом), но главное — назначение и формулировка текста.

Прямой ответ

Пишите <a href="URL">кликабельный текст</a>. href может быть полным веб-адресом вроде https://www.example.com (абсолютный) или путём к другому файлу на вашем сайте вроде about.html (относительный). Посетители кликают содержимое между тегами. Предпочитайте формулировки, которые описывают назначение — «О этом сайте» — а не пустые фразы вроде «нажмите здесь».

Абсолютные ссылки

Абсолютные URL включают схему (https:// или http://) и обычно хост. Используйте их для внешних сайтов или когда вам действительно нужен полный адрес, не зависящий от текущей папки.

Абсолютная ссылка

html
HTML Code 
<p>
<a href="https://www.example.com">Visit Example</a>
</p>

Чтение абсолютного примера

  • href хранит полное назначение, начинающееся с https://
  • Слова Visit Example — то, что пользователь видит и активирует
  • Опечатки в хосте или схеме ломают переход, даже если HTML-теги корректны
  • Абсолютные ссылки всё равно выигрывают от честного, описательного текста

Относительные ссылки на вашем сайте

Относительные URL указывают на файлы относительно расположения текущей страницы. Это повседневный способ связать index.html с about.html без повторения имени домена. Навыки File Paths применимы: неверные папки дают тихие сбои 404.

Относительная ссылка на другую страницу

html
HTML Code 
<p>
<a href="about.html">About this site</a>
</p>

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

  • Держите связанные страницы в понятной структуре папок
  • Предпочитайте имена файлов через дефис без пробелов
  • Проверяйте оба направления: главная → about и about → главная
  • Помните: перемещение HTML-файла без обновления относительных ссылок ломает навигацию

Текст ссылки — это контент, а не украшение

Пользователи экранных читалок часто прыгают по списку ссылок, не слыша окружающий абзац. «Нажмите здесь» и «читать далее», повторённые десять раз, становятся бессмысленными. Назовите назначение. Можно оставаться дружелюбным — просто будьте конкретны.

Описательный текст ссылки

html
HTML Code 
<!-- Prefer -->
<p><a href="pricing.html">View pricing plans</a></p>

<!-- Avoid as the only cue -->
<p><a href="pricing.html">Click here</a></p>

Абсолютные и относительные — выбирайте под задачу

  • Внешний сайт, которым вы не управляете → абсолютный https://…
  • Другая страница в вашем проекте → относительный путь, когда возможно
  • Ссылки на тот же сайт, записанные как абсолютные, тоже работают, но относительные остаются переносимыми при смене домена или открытии файлов локально
    Позже уроки разберут title у ссылок, закладки (#) и email-ссылки; сначала освойте a + href.

Битые ссылки и 404

Если href указывает на отсутствующий файл или опечатанный хост, браузер переходит на страницу ошибки (часто HTTP 404). HTML вокруг ссылки при этом может выглядеть идеально. Всегда проверяйте пути так же, как пути к favicon и таблицам стилей: орфография, папки и то, сохранён ли целевой файл.

Практика в редакторе

  1. Создайте index.html и about.html в одной папке.
  2. На главной добавьте относительную ссылку на about.html с описательным текстом.
  3. На странице about добавьте относительную ссылку обратно на index.html.
  4. Добавьте одну абсолютную ссылку на внешний сайт, которому доверяете.
  5. Пройдите по каждой ссылке в браузере; затем нарочно сломайте относительный путь, посмотрите сбой и исправьте его.
  6. Перепишите любой текст «нажмите здесь» в название назначения.

Типичные ошибки

  • Забыть href, так что текст не является настоящей гиперссылкой
  • Использовать «нажмите здесь» или «ссылка» для каждого назначения
  • Битые относительные пути после перемещения файлов между папками
  • Опечатки в https:// или домене для внешних URL
  • Пробелы в именах файлов — и потом удивление, почему относительные ссылки не работают
  • Неосторожное вложение интерактивного содержимого (для начинающих держите ссылки простыми: текст внутри a)

Итог

  • Ссылки используют элемент a с назначением href
  • Абсолютные URL включают схему вроде https://
  • Относительные URL указывают на другие файлы вашего сайта
  • Пишите ясный, описательный текст ссылки для всех — включая вспомогательные технологии
  • Битые пути ломаются в момент навигации, даже когда теги выглядят корректно

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
6
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Html Урок