html.okpython.net
Основы создания сайтов
HTML :: Тег <a>
В HTML тег <a> (от англ. anchor – якорь) используется для создания гиперссылок в документе. Все, что находится внутри элемента «a» является гиперссылкой (включая изображения и другие объекты). Чтобы указать адрес объекта, на который будет совершен переход по ссылке, используется атрибут href. В качестве значения он принимает абсолютный или относительный адрес документа (подробнее о построении абсолютных и относительных адресов можно посмотреть здесь).
Синтаксис
<a href="Целевой адрес">...</a>
Закрывающий тег: обязателен.
Атрибуты
- href – задает путь, по которому будет совершен переход. В качестве адреса ссылки могут использоваться как абсолютные, так и относительные адреса (подробнее здесь). При этом следует помнить, что целевой документ может быть любого типа, поэтому и результат перехода по ссылке также может быть разным. Например, если по указанному адресу окажется файл с расширением zip, то браузер попытается загрузить его на локальный диск.
- download – предлагает вместо перехода по ссылке скачать файл, путь к которому указан в качестве значения атрибута href.
-
target – сообщает имя целевого окна или фрейма. В качестве значений может принимать:
- _self – документ будет открываться в текущем окне или фрейме (используется по умолчанию);
- _blank – документ будет открываться в новом окне или фрейме;
- _parent – документ будет открываться в родительском фрейме, а в случае отсутствия такового, в текущем окне;
- _top – документ будет открываться в главном (текущем) окне, в котором находится данный фрейм, содержащий ссылку, а в случае отсутствия фреймов в окне, данное значение сработает, как _self;
- name – имя фрейма, в котором будет открываться документ; если указать несуществующее имя окна или фрейма, то браузер откроет документ в новом окне.
- hreflang – сообщает язык документа страницы, на которую ведет ссылка. Ознакомиться с полным списком кодов языков можно на нашей странице здесь.
- rel – сообщает тип отношения между текущим документом и документом, на который ведет ссылка. Данный атрибут плохо поддерживается большинством браузеров, однако значение rel="nofollow" очень популярно у вебмастеров, т.к. оно запрещает роботам переходить по ссылке и передавать ТИЦ (тематический индекс цитирования) и PageRank (определяет «важность» страницы). Следует помнить, что инструкция имеет для роботов всего лишь рекомендательный характер.
- type – сообщает mime-тип целевого документа. Ознакомиться с полным списком mime-типов можно на сайте Мозилы здесь или на Википедии здесь.
- Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.
Ссылки
Официальный сайт W3C: https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/a
Примеры
HTML
htmlCodes
<!DOCTYPE html> <html> <head> <base href="https://site.name/"> <meta charset="utf-8"> <title>Пример №1</title> </head> <body> <p> <!-- Документ откроется в новом окне браузера --> Посмотреть спецификацию HTML 5 на английском языке можно <a href="https://html.spec.whatwg.org/" target="_blank" hreflang="en">здесь</a>. </p> <p> <!-- Здесь при клике по ссылке будет загружен указанный файл --> Загрузить учебный минисайт, построенный на относительной адресации, можно <a href="path/relative_path.7z" download>здесь</a>. </p> <p> <!-- Здесь указали mime-тип целевого файла --> Пересмотреть ролик с Саймоном можно <a href="path/video/simon.mp4" type="video/mp4">здесь</a>. </p> <p> <!-- Запрещаем передавать ТиЦ и PR целевой странице --> Посетите наш <a href="https://okpython.net/" rel="nofollow">сайт</a> https://okpython.net. </p> <p> <!-- Документ откроется в текущем окне браузера --> <a href="index.html">Вернуться</a> на главную страницу сайта. </p> </body> </html>
Пример №1