ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

HTML5 Учебник

HTML СТАРТ HTML Введение HTML Редакторы HTML Основные примеры HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитаты HTML Комментарии HTML Цвета HTML CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Классы HTML Идентификаторы HTML Фреймы HTML JavaScript HTML Пути файлов HTML Голова веб-страницы HTML Макеты HTML Адаптивность HTML Компьютерный код HTML Символьные объекты HTML Символы HTML Кодировка HTML URL кодирование HTML XHTML

HTML Формы

HTML Формы HTML Элементы формы HTML Типы ввода HTML Атрибуты ввода

HTML5

HTML5 Введение HTML5 Поддержка HTML5 Новые элементы HTML5 Семантические элементы HTML5 Переход с HTML4 HTML5 Гид по стилю

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Медиа HTML Видео HTML Аудио HTML Плагины HTML YouTube

HTML API

HTML Геолокация HTML Drag/Drop HTML Web хранилище HTML Web работники HTML SSE

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Сертификат HTML Резюме HTML Доступность

HTML Справочники

HTML Список тегов HTML Атрибуты HTML Глобальные атрибуты HTML События HTML Цвета HTML Canvas HTML Аудио/Видео HTML Действующие Doctype HTML Наборы символов HTML URL кодировка HTML Кодировка языка HTTP Сообщения HTTP Методы PX в EM Конвертер Горячие клавиши

HTML5. Уроки для начинающих

HTML Ссылки



Ссылки находятся почти на всех веб-страницах. Ссылки позволяют пользователям переходить от страницы к странице.


HTML Ссылки - Гиперссылки

HTML ссылки - это гиперссылки.

Вы можете нажать на ссылку и перейти к другому документу.

При наведении мыши на ссылку стрелка мыши превратится в маленькую стрелку.

Примечание: Ссылка не обязательно должна быть текстовой. Это может быть изображение или любой другой элемент HTML.


HTML ссылки - Синтаксис

Гиперссылки определяются с помощью HTML тега <a> (от слова anchor - якорь):

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

Пример

<a href="https://www.w3schools.com/html/">HTML уроки для начинающих онлайн</a>
Попробуйте сами »

Атрибут href указывает адрес назначения ссылки (https://www.w3schools.com/html/).

Текст ссылки является видимой частью (HTML уроки для начинающих онлайн).

Нажав на текст ссылки, вас отправит на указанный адрес.

Примечание: Без косой черты (слеша) в конце адресов подпапок вы можете сгенерировать два запроса к серверу. Многие серверы автоматически добавляют косую черту в конец адреса, а затем создают новый запрос.


Локальные ссылки

В приведенном выше примере используется абсолютный URL (полный веб-адрес).

Локальная ссылка (ссылка на тот же веб-сайт) указывается с относительным URL (без https://www....).

Пример

<a href="html_images.html">HTML Изображения</a>
Попробуйте сами »

HTML Цвета ссылок

По умолчанию ссылка будет выглядеть так (во всех браузерах):

  • Непосещенная ссылка - подчеркнута и синим цветом
  • Посещенная ссылка - подчёркнута и фиолетовым цветом
  • Активная ссылка - подчёркнута и красным цветом

Вы можете изменить цвета по умолчанию, используя CSS:

Пример

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>
Попробуйте сами »

Ссылки часто оформляются в виде кнопок с помощью CSS:

Это ссылка

Пример

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>
Попробуйте сами »

Чтобы узнать больше о CSS, перейдите на наш CSS Учебник.


HTML ссылки - Атрибут target

Атрибут target указывает, где открыть связанный документ.

Атрибут target может иметь одно из следующих значений:

  • _blank - Открывает связанный документ в новом окне или вкладке
  • _self - Открывает связанный документ в том же окне/вкладке, в котором он был нажат (по умолчанию)
  • _parent - Открывает связанный документ в родительском фрейме
  • _top - Открывает связанный документ в полном теле окна
  • framename - Открывает связанный документ в названном фрейме

Этот пример откроет связанный документ в новом окне/вкладке браузера:

Пример

<a href="https://www.w3schools.com/" target="_blank">Посетите W3Schools!</a>
Попробуйте сами »

Совет: Если ваша веб-страница заблокирована во фрейме, вы можете использовать target="_top", чтобы выйти из фрейма:

Пример

<a href="https://www.w3schools.com/html/" target="_top">HTML5 Учебник!</a>
Попробуйте сами »

HTML Ссылки - Изображение как ссылка

Часто в качестве ссылок используются изображения:

Пример

<a href="default.html">
  <img src="smiley.gif" alt="HTML уроки для начинающих" style="width:42px;height:42px;border:0;">
</a>
Попробуйте сами »

Примечание: border:0; добавляется, чтобы IE9 (и более ранние версии) не отображал рамку вокруг изображения (когда изображение является ссылкой).


Атрибут Title - Подсказка для ссылок

Атрибут title определяет дополнительную информацию об элементе. Информация чаще всего отображается в виде всплывающей подсказки, когда мышь перемещается над элементом.

Пример

<a href="https://www.w3schools.com/html/" title="Перейти на уроки по HTML начинающих">Уроки по HTML для начинающих</a>
Попробуйте сами »

HTML Ссылки - Создать закладку

HTML-закладки используются, чтобы позволить читателям переходить к определенным частям веб-страницы.

Закладки могут быть полезны, если ваша веб-страница очень длинная.

Чтобы создать закладку, сначала необходимо создать закладку, а затем добавить ссылку на нее.

При нажатии на ссылку страница прокручивается до места с закладкой.

Пример

Сначала создайте закладку с атрибутом id:

<h2 id="C4">Глава 4</h2>

Затем добавьте ссылку на закладку ("Перейти к главе 4") на той же странице:

<a href="#C4">Перейти к главе 4</a>

Или добавьте ссылку на закладку ("Перейти к главе 4") из другой страницы:

Пример

<a href="html_demo.html#C4">Перейти к главе 4</a>
Попробуйте сами »

Внешние пути

На внешние страницы можно ссылаться по полному URL или по пути относительно текущей веб-страницы.

В этом примере используется полный URL-адрес для ссылки на веб-страницу:

Пример

<a href="https://www.w3schools.com/html/default.html">HTML учебник</a>

Попробуйте сами »

Этот пример ссылается на страницу, расположенную в папке html на текущем веб-сайте:

Пример

<a href="/html/default.html">HTML учебник</a>

Попробуйте сами »

Этот пример ссылается на страницу, расположенную в той же папке, что и текущая страница:

Пример

<a href="default.html">HTML учебник</a>

Попробуйте сами »

Вы можете прочитать больше о путях к файлам в главе HTML Пути к файлам.


Резюме раздела

  • Используйте элемент <a> для определения ссылки
  • Используйте атрибут href для определения адреса ссылки
  • Используйте атрибут target чтобы определить, где открыть связанный документ
  • Используйте элемент <img> (внутри <a>) для использования картинки в качестве ссылки
  • Используйте атрибут id (id="значение") для определения закладок на странице
  • Используйте атрибут href (href="#значение") для ссылки на закладку

HTML Упражнения

Проверьте себя с помощью упражнений

Упражнение:

Используйте корректный HTML, чтобы превратить текст ниже в ссылку на "default.html".

>Посетите наш HTML учебник.

Начать упражнение


HTML Теги ссылок

Тег Описание
<a>Определяет гиперссылку

Для получения полного списка всех доступных тегов HTML, посетите наш HTML Справочник тегов.