Найти в Дзене
Girsoft
99 подписчиков

Как создать ссылку в HTML: подробный гайд

7
1 мин
Ссылки — это основа интернета. Без них веб-страницы были бы изолированными, а навигация — невозможной. В HTML создать ссылку очень просто. Разберёмся, как это сделать правильно и эффективно. Чтобы создать ссылку, используется тег <a> — от англ. anchor (якорь). Пример: 👉 <a href="https://example.com">Текст ссылки</a> После клика пользователь перейдёт на сайт example.com. Используются для переходов на другие сайты. Включают полный адрес. 👉 <a href="https://google.com">Перейти в Google</a> Применяются для навигации внутри сайта. 👉 <a href="about.html">О нас</a>
👉 <a href="/blog/post-1.html">Статья в блоге</a> Позволяют переходить к нужному разделу на странице. 👉 <h2 id="section1">Раздел 1</h2> 👉 <a href="#section1">К Разделу 1</a> Письмо на почту: 👉 <a href="mailto:example@mail.com">Написать нам</a> Вызов телефона: 👉 <a href="tel:+71234567890">Позвонить</a> target — где откроется ссылка: rel — отношения между страницами: 👉 <a href="https://example.com" rel="nofollow noopener">В
Оглавление

Ссылки — это основа интернета. Без них веб-страницы были бы изолированными, а навигация — невозможной. В HTML создать ссылку очень просто. Разберёмся, как это сделать правильно и эффективно.

📌 Основной синтаксис

Чтобы создать ссылку, используется тег <a> — от англ. anchor (якорь).

Пример:

👉 <a href="https://example.com">Текст ссылки</a>

После клика пользователь перейдёт на сайт example.com.

🔍 Виды HTML-ссылок

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

Используются для переходов на другие сайты. Включают полный адрес.

👉 <a href="https://google.com">Перейти в Google</a>

2. Относительные ссылки

Применяются для навигации внутри сайта.

👉 <a href="about.html">О нас</a>

👉 <a href="/blog/post-1.html">Статья в блоге</a>

3. Якорные ссылки

Позволяют переходить к нужному разделу на странице.

  1. Назначьте якорь элементу:

👉 <h2 id="section1">Раздел 1</h2>

  1. Ссылка на этот якорь:

👉 <a href="#section1">К Разделу 1</a>

4. Ссылки на email и телефон

Письмо на почту:

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

Вызов телефона:

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

⚙️ Важные атрибуты тега <a>

target — где откроется ссылка:

  • _blank — в новой вкладке

    👉 <a href="https://example.com" target="_blank">Открыть в новой вкладке</a>
  • _self — в текущей (по умолчанию)

rel — отношения между страницами:

  • nofollow — не переходить по ссылке для поисковиков
  • noopener — защита при открытии в новой вкладке

👉 <a href="https://example.com" rel="nofollow noopener">Внешняя ссылка</a>

title — всплывающая подсказка:

👉 <a href="page.html" title="Описание ссылки">Текст</a>

🖼 Ссылка-картинка

Чтобы сделать изображение кликабельным:

👉 <a href="gallery.html">
<img src="photo.jpg" alt="Фото">
</a>

✅ Подведём итог

Тег <a> — основа гиперссылок в HTML. Он помогает:

  • Соединять страницы
  • Делать навигацию удобной
  • Повышать интерактивность сайта

💡 Пробуйте разные атрибуты и практикуйтесь — это залог успешного освоения HTML!

Подпишитесь на наш канал Girsoft в Дзене!

📌 Читайте свежие статьи, полезные советы и эксклюзивные материалы на нашем канале:

Не пропустите новые публикации – подпишитесь, чтобы всегда быть в курсе! 🔔

Спасибо за вашу поддержку! ❤️

2