«Единственный способ творить великие дела – это любить то, что ты делаешь»
HTML


Тег <a> предназначен для создания ссылок. Ссылка позволяет осуществить переход с одного сайта на другой, с одной страницы на другую в пределах текущего сайта или перемещаться между разделами/элементами текущей страницы.

Закрывающий тег

Обязателен


Атрибут Href

Атрибут href тега a - задает адрес, по которому будет осуществлен переход по ссылке.

Значение/я атрибута:
Абсолютный или относительный адрес (подробнее здесь...)
Значение по умолчанию:
Не имеет
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Тег a Атрибут href </title>
</head>
<body>

<p> <a href = "https://www.webpupil.ru/"> Это абсолютная ссылка на сайт Webpupil.ru </a> </p>
<p> <a href = "index.php"> Это относительная ссылка на файл index.php </a> </p>

</body>
</html>
Результат

Атрибут Name

Атрибут name тега a - задает имя якоря/метки внутри документа.

Сначала необходимо определить место в документе, где необходимо поставить метку. С помощью атрибута name называем метку как нам удобно. А затем с помощью атрибута href ссылаемся на помеченную область, указав имя метки после символа #.

В XHTML и HTML5 вместо name для определения якоря требуется указывать атрибут id.

Значение/я атрибута:
Любой текст
Значение по умолчанию:
Не имеет
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Тег a Атрибут name </title>
</head>
<body>

<p> <a href="#metka1"> Глава 1 </a> </p>
<p> <a href="#metka2"> Глава 2 </a> </p>

<h4> <a name="metka1"> Глава 1 </a> </h4>
Нельзя сказать, чтобы «Мартинес», на котором я плыл, был ненадежным судном; этот новый пароход совершал уже свой четвертый или пятый рейс на переправе между Саусалито и Сан Франциско. Опасность таилась в густом тумане, окутавшем бухту, но я, ничего не смысля в мореходстве, и не догадывался об этом.
<h4 id="metka2"> Глава 2 </h4>
Хорошо помню, как спокойно и весело расположился я на носу парохода, на верхней палубе, под самой рулевой рубкой, и таинственность нависшей над морем туманной пелены мало помалу завладела моим воображением. Дул свежий бриз, и некоторое время я был один среди сырой мглы – впрочем, и не совсем один, так как я смутно ощущал присутствие рулевого и еще кого то, по видимому, капитана, в застекленной рубке у меня над головой.

</body>
</html>
Результат

Глава 1

Глава 2

Глава 1

Нельзя сказать, чтобы «Мартинес», на котором я плыл, был ненадежным судном; этот новый пароход совершал уже свой четвертый или пятый рейс на переправе между Саусалито и Сан Франциско. Опасность таилась в густом тумане, окутавшем бухту, но я, ничего не смысля в мореходстве, и не догадывался об этом.

Глава 2

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

Таким образом, с помощью атрибутов name и href тега <a> , можно перемещаться между разделами и частями страницы.

Атрибут Target

Атрибут target тега a - указывает в каком окне открывать страницу при переходе по ссылке.

Значение/я атрибута:
- blank - страница открывается в новом окне
- self – страница открывается в текущем окне
Если не требуется загружать страницу в новом окне, атрибут target можно не включать.
Значение по умолчанию:
self

Атрибут Title

Атрибут title тега a - добавляет всплывающую подсказку при наведении на ссылку курсора.

Значение/я атрибута:
Любой текст
Значение по умолчанию:
Не имеет
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Тег a - Атрибуты target и title </title>
</head>
<body>

<p> Страница при переходе <a href="index.php" target="_self"> по ссылке </a> откроется в текущем окне. </p>
<p> Страница при переходе <a href="index.php" target="_blank"> по ссылке </a> откроется в новом окне. </p>
<p> <a href="index.php" title="Всплывающая подсказка"> Наведите курсор на ссылку! </a> </p>

</body>
</html>
Результат

Страница при переходе по ссылке откроется в текущем окне.

Страница при переходе по ссылке откроется в новом окне.

Наведите курсор на ссылку!



Все теги HTML

HTML по шагам