Добро пожаловать на восьмой урок нашего курса по основам HTML5! Сегодня мы разберём один из самых важных и часто используемых элементов веб-страниц — гиперссылки. Именно благодаря им интернет стал «паутиной» взаимосвязанных документов. В этом уроке вы узнаете, что такое тег <a>, как он работает, как создавать ссылки на другие страницы, файлы или разделы внутри сайта. Мы рассмотрим синтаксис, основные атрибуты и практические примеры. Давайте начнём!
Что такое гиперссылка и тег <a>?
Гиперссылка — это интерактивный элемент веб-страницы, который позволяет пользователю перейти на другой ресурс: веб-страницу, файл, изображение, email или даже на определённое место на текущей странице.
В HTML за создание гиперссылок отвечает парный тег <a> (от англ. anchor — якорь). Он обозначает «якорь» — точку, с которой начинается переход.
Синтаксис:
<a href="адрес_ресурса">Текст ссылки</a>
- <a> — открывающий тег;
- href — обязательный атрибут, указывающий куда ведёт ссылка;
- Текст между тегами — то, что видит и кликает пользователь;
- </a> — закрывающий тег.
Основные виды ссылок
1. Ссылка на внешний сайт
<a href="https://google.com">Перейти в Google</a>
2. Ссылка на страницу внутри сайта
<a href="about.html">О нас</a>
<a href="/contacts.html">Контакты</a>
Совет: путь с / в начале (/contacts.html) — абсолютный относительно корня сайта.
3. Ссылка на файл (PDF, изображение, архив)
<a href="documents/report.pdf">Скачать отчёт (PDF)</a>
<a href="images/photo.jpg">Открыть фото</a>
4. Ссылка на email
<a href="mailto:info@example.com">Написать нам</a>
При клике откроется почтовая программа с готовым письмом.
5. Ссылка на номер телефона
<a href="tel:+79991234567">Позвонить: +7 (999) 123-45-67</a>
Работает на мобильных устройствах.
Атрибут target — где открыть ссылку
По умолчанию ссылка открывается в текущей вкладке. С помощью атрибута target можно изменить поведение:
<a href="https://yandex.ru" target="_blank">Открыть Яндекс в новой вкладке</a>
- _blank — открыть в новой вкладке;
- _self — в текущей вкладке (по умолчанию);
- _parent, _top — используются в фреймах (редко).
Рекомендация: при использовании target="_blank" добавляйте rel="noopener" для безопасности:
<a href="https://example.com" target="_blank" rel="noopener">Внешняя ссылка</a>
Ссылка-якорь: переход к разделу на странице
С помощью тега <a> можно создавать переходы к определённым частям страницы. Для этого:
1. Указываем якорь с помощью атрибута id у нужного элемента:
<h2 id="section-about">О нас</h2>
2. Создаём ссылку на этот якорь:
<a href="#section-about">Перейти к разделу "О нас"</a>
Работает и на одной странице, и при переходе с другой: page.html#section-about
Полный пример страницы с ссылками
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Мой сайт</title>
</head>
<body>
<h1>Добро пожаловать!</h1>
<p>Перейдите в раздел:
<a href="#contacts">Контакты</a> или
<a href="blog.html">Блог</a>
</p>
<p>Скачайте <a href="files/guide.pdf">руководство (PDF)</a></p>
<p>Свяжитесь с нами:
<a href="mailto:support@site.ru">support@site.ru</a>
</p>
<h2 id="contacts">Контакты</h2>
<p>Телефон: <a href="tel:+79991234567">+7 (999) 123-45-67</a></p>
</body>
</html>
Полезные советы
- Текст ссылки должен быть понятным: избегайте «жми сюда», пишите «скачать инструкцию», «перейти в каталог».
- Подчёркивание по умолчанию: браузеры подчёркивают ссылки — это помогает пользователю понять, что это кликабельно.
- Стилизация через CSS: вы можете менять цвет, убирать подчёркивание и добавлять эффекты при наведении.
a {
color: #0066cc;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Посмотрите как будут выглядеть гиперссылки в браузере
Тег <a> — это фундаментальная часть HTML, без которой немыслим современный интернет. Гиперссылки связывают страницы, сайты и ресурсы в единую сеть, делая навигацию удобной и интуитивной. Вы научились создавать ссылки на внешние и внутренние ресурсы, использовать якоря, открывать в новых вкладках и даже запускать email или звонки. Применяйте эти знания в своих проектах, и ваши сайты станут не только информативными, но и удобными для пользователей. Продолжайте практиковаться — и ваш HTML станет по-настоящему профессиональным!
0 Комментарий(я)
Зарегистрируйтесь чтобы оставить комментарий