САЙТ НАХОДИТСЯ В РАЗРАБОТКЕ

HTML Учебник

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 Head HTML Макеты HTML Адаптивность HTML Компьютерный код HTML Семантика HTML Объект HTML Символы HTML Emojis HTML Кодировка HTML URL кодирование HTML XHTML HTML Гид по стилю

HTML Формы

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

HTML 5

HTML5 Введение HTML5 Поддержка HTML5 Новые элементы HTML5 Переход

HTML Графика

HTML Canvas HTML SVG

HTML Media

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 Canvas HTML Аудио/Видео HTML Набор символов HTML DOCTYPE HTML URL Кодирование HTML Коды языков HTML Коды стран HTTP Сообщений HTTP Метод PX в EM Конвертер Горячие клавиши
Баннер ТОП

HTML Ссылки


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


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

HTML ссылки являются гиперссылками.

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

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

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


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

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

<a href="url">link text</a>

Пример

<a href="http://www.progtutorial.com/html/">Visit our HTML tutorial</a>
Попробуйте сами »

href атрибут указывает адрес получателя (http://www.progtutorial.com/html/) ссылки.

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

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

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


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

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

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

Пример

<a href="html_images.asp">HTML Images</a>
Попробуйте сами »

В контенте

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

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

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

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

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

Пример

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

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

Пример

<a href="http://www.progtutorial.com/html/" target="_top">HTML5 tutorial!</a>
Попробуйте сами »

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

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

Пример

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Попробуйте сами »

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


Кнопка как ссылка

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

JavaScript позволяет вам определять, что происходит при определенных событиях, таких как нажатие кнопки:

Пример

<button onclick="document.location = 'default.html'">HTML Tutorial</button>
Попробуйте сами »

Совет: узнайте больше о JavaScript в нашем JavaScript Учебник.


В контенте

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

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

Пример

<a href="http://www.progtutorial.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>
Попробуйте сами »

Внешние пути

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

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

Пример

<a href="http://www.progtutorial.com/html/default.html">HTML tutorial</a>

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

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

Пример

<a href="/html/default.html">HTML tutorial</a>

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

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

Пример

<a href="default.html">HTML tutorial</a>

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

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


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

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

HTML Упражнения

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

Упражнение:

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

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

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


HTML Теги ссылок

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

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