Как ссылку в html

Если нужно быстро понять, как ссылку в html, достаточно освоить один тег и несколько важных атрибутов. Ссылка делает текст, картинку или кнопку кликабельными и ведёт на другую страницу, файл, адрес внутри страницы или почтовый клиент.

Базовая форма выглядит так: <a href="адрес">текст ссылки</a>. Тег a создаёт ссылку, а href задаёт цель перехода. Между открывающим и закрывающим тегом размещают текст, который увидит пользователь.

Базовый синтаксис ссылки

Самый простой вариант — указать полный адрес страницы:

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

После клика браузер откроет указанный адрес. Если вы делаете ссылку внутри сайта, можно использовать относительный путь:

<a href="about.html">О компании</a>

Такой способ удобен, когда страницы лежат в одном проекте. Чтобы не ошибиться, проверьте, что путь совпадает с реальным именем файла и его расположением.

• Внешняя ссылка — указывает на другой сайт;
• Относительная — ведёт на файл или папку в текущем проекте;
• Якорная — перемещает к нужному месту на странице;
• Почтовая — открывает создание письма.

Ссылка на часть страницы и адреса специальных типов

Если нужно перейти не на другую страницу, а к блоку внутри текущей, используют якорь. Сначала задают id у нужного элемента, затем в href пишут #id. Это полезно для длинных страниц, оглавлений и быстрых переходов.

<a href="#contacts">К контактам</a>

<section id="contacts">...</section>

Есть и другие варианты. Почтовая ссылка начинается с mailto:, а телефонная — с tel:. Они работают не везде одинаково, потому что поведение зависит от устройства и настроек пользователя.

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

<a href="tel:+79990000000">Позвонить</a>

Когда объясняют, как ссылку в html, часто забывают о понятности текста. Лучше писать не «Жми сюда», а коротко и ясно: «Скачать прайс», «Читать подробнее», «Открыть карту». Так пользователю проще понять, куда он попадёт.

Дополнительные атрибуты, которые часто нужны

Иногда ссылка должна открываться в новой вкладке. Для этого добавляют target="_blank". Если открываете сторонний сайт, разумно также указывать rel="noopener noreferrer", чтобы уменьшить риски и не передавать лишние данные между вкладками.

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

Полезно помнить и про вложенное содержимое. Внутрь тега a можно поместить не только текст, но и изображение или иконку. Тогда вся область станет кликабельной. Главное — не вкладывать в ссылку запрещённые элементы и следить, чтобы разметка оставалась корректной.

• Проверьте, что адрес начинается с нужного протокола или корректного пути;
• Убедитесь, что ссылка не содержит лишних пробелов;
• Сравните отображаемый текст и реальную цель перехода;
• Откройте страницу в браузере и нажмите на ссылку вручную.

Если клик не работает, сначала ищите ошибку в пути, затем — в кавычках и закрывающем теге. Для локальных файлов особенно важны регистр букв и точное имя папки.

Теперь вы знаете, как ссылку в html сделать для страницы, якоря, почты и телефона. Этого достаточно, чтобы быстро собрать рабочую навигацию и проверить её прямо в браузере.