HTML <a> href Attribute

Тег HTML <a>

Definition and Usage

href The attribute specifies the URL of the page to which the link points.

href The value of the attribute can be any valid document's relative or absolute URL, including fragment identifiers and JavaScript code segments. If the user selects the content within the <a> tag, the browser will attempt to retrieve and display href The attribute specifies a list of documents represented by the URL, or a list of JavaScript expressions, methods, and functions to be executed.

If href If the attribute does not exist, the <a> tag will not be a hyperlink.

Совет:You can link to the top of the current page using href="#top" or href="#"!

Creating Text Links

A simple <a> tag that references another document can be in the following form:

<a href="http://www.codew3c.com/index.html">CodeW3C.com Online Tutorial</a>

Браузер отображает фразу «CodeW3C.com Онлайн обучение» с особыми эффектами (обычно подчёркнутый синий текст), чтобы пользователи знали, что это гиперссылка, ведущая к другому документу. Вот так:

CodeW3C.com онлайн-уроки

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

Совет:Можно использовать CSS псевдоклассыДобавить сложные и разнообразные стили к текстовым гиперссылкам.

Создание изображений ссылок

Более сложные якоря могут также включать изображения. Следующий логотип является изображением ссылки, щелчок по которой вернёт на главную страницу W3school:

<a href="http://www.codew3c.com/index.html">
<img src="/i/codew3c_logo_white.gif" />
</a>

Следующий код добавляет возврат на главную страницу CodeW3C.com в логотип:

CodeW3C.com онлайн-уроки

Большинство графических браузеров помещают特殊的 рамку вокруг изображения, которое является частью якоря. Через <img> тег можно определить рамку изображения, установив Свойство borderУстановив значение 0, можно удалить рамку у гиперссылки. Также можно использовать Свойства рамки CSSИзменить глобально стиль рамки элемента.

Пример

Пример 1

Свойство href определяет цель ссылки:

<a href="https://www.codew3c.com">Посетить CodeW3C.com</a>

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

Пример 2

Как использовать изображение в качестве ссылки:

<a href="https://www.codew3c.com">
<img border="0" alt="W3School" src="/i/logo/w3logo.png" width="400" height="225">
</a>

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

Пример 3

Как связать с адресом электронной почты:

<a href="mailto:someone@example.com">Отправить электронное письмо</a>

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

Пример 4

Как связать с телефонным номером:

<a href="tel:+8613888888888">+86 138 8888 8888</a>

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

Пример 5

Как связать с другой частью той же страницы:

<a href="#section2">Перейти во вторую главу</a>

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

Пример 6

Как связать с JavaScript:

<a href="javascript:alert('Hello World!');">Выполнить JavaScript</a>

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

Синтаксис

<a href="URL">

Значение атрибута

Значение Описание
URL

URL ссылки.

Возможные значения:

  • Абсолютный URL - указывает на другой сайт (например, href="http://www.example.com/index.html")
  • Относительный URL - указывает на файл в сайте (например, href="index.html")
  • Ссылка на элемент на странице с указанным id (например, href="#section2")
  • Другие протоколы (например, https://, ftp://, mailto:, file: и т.д.)
  • Скрипт (например, href="javascript:alert('Hello');")

Поддержка браузеров

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка

Тег HTML <a>