- HTML Tag
- Syntax
- Attributes
- The href attribute
- Example of the HTML tag with the href attribute:
- Result
- Example of the HTML tag for creating a linked image:
- The target attribute
- Example of the HTML tag with the target attribute:
- Result
- The rel attribute
- No follow value
- Example of the rel attribute with the «nofollow» value:
- Attributes
- How to style tag?
- Common properties to alter the visual weight/emphasis/size of text in tag:
- Coloring text in tag:
- Text layout styles for tag:
- Other properties worth looking at for tag:
- Атрибуты ссылок
- title
- Атрибут title
- Синтаксис
- Обязательный атрибут
- Значения
- Значение по умолчанию
- Типы тегов
HTML Tag
In the browser, hyperlinks differ in their appearance and color. By default, HTML links appear as underlined blue text. When you hover your mouse over a link, it turns red (active link). Links that are already clicked (visited links) become purple.
You can change the color of links, remove underline or change the color of the links using CSS styles.
The «download», «media», «hreflang», «target», «rel», and «type» attributes will be present only if the «href» attribute is present.
Syntax
Attributes
The href attribute
a href="url">the link texta> a href="#a">the link texta>
Example of the HTML tag with the href attribute:
html> html> head> title>Title of the document title> head> body> a href="https://www.w3docs.com/">W3docs.com a> body> html>
Result
Click on the link, and you will be redirected to the home page of our website.
Example of the HTML tag for creating a linked image:
html> html> head> title>Title of the document title> style> img < height: 90vh; > style> head> body> a href="https://en.wikipedia.org/wiki/France"> img src="https://images.unsplash.com/photo-1549144511-f099e773c147?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="France"> a> body> html>
The target attribute
The target attribute is used to tell the browser where to open the document (by default, links open in the current window).
The target attribute can have the following values:
- _blank– opens the link in a new window.
- _self-opens the link in a current window.
- _parent — opens the document in the parent frame.
- _top — opens the document in full width of the window.
Example of the HTML tag with the target attribute:
html> html> head> title>Title of the document title> head> body> a href="https://www.w3docs.com/" target="_blank">W3docs.com a> body> html>
Result
The rel attribute
This attribute sets the relationship of the current document to the linked one. The attribute values can be as follows:
- alternate — an alternative version of the document.
- author— reference to the author of the document or article.
- bookmark — a permanent link to be used for bookmarks.
- nofollow — links to an unendorsed document (this instructs the search engines that the crawler should not follow that link).
No follow value
If you want to create a nofollow link, use rel=»nofollow». This informs search engines that you don’t support the content at the other end of the link. The nofollow attribute value is generally used on paid links and advertising. Sometimes the unfollow is considered to be a tag or attribute, but in fact, it’s a value of the rel attribute.
Example of the rel attribute with the «nofollow» value:
html> html> head> title>Title of the document title> head> body> p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. p> p>This text is from a href="https://www.lipsum.com/" rel="nofollow" target="_blank">Lorem Ipsum a>. p> body> html>
Attributes
Attribute | Value | Description |
---|---|---|
charset | char_encoding | Defines the character-set of a linked document. Not used in HTML5. |
coords | coordinates | Defines the coordinates of a link. Not used in HTML5. |
download | filename | Defines that the target will be downloaded when a hyperlink is clicked. |
href | URL | Defines the URL of the linked document. |
hreflang | language_code | Defines the language of the linked document. |
media | media_query | Defines what media/device the linked document is optimized for. |
name | section_name | Defines the name of an anchor. Not used in HTML5. |
ping | list_of_URLs | Defines a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the background). Typically used for tracking. |
rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag | Defines the relationship between the target object and the linked document. |
rev | text | Defines a reverse link, the inverse relationship of the «rel» attribute. Not used in HTML5. |
shape | default rect circle poly | Defines the shape of the hyperlink. Not used in HTML5. |
target | _blank _parent _self _top | Defines where to open the linked document. |
type | media_type | Defines the media type in the form of a MIME- type for the linked URL. |
How to style tag?
Common properties to alter the visual weight/emphasis/size of text in tag:
- CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
- CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
- CSS font-size property sets the size of the font.
- CSS font-weight property defines whether the font should be bold or thick.
- CSS text-transform property controls text case and capitalization.
- CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.
Coloring text in tag:
- CSS color property describes the color of the text content and text decorations.
- CSS background-color property sets the background color of an element.
Text layout styles for tag:
- CSS text-indent property specifies the indentation of the first line in a text block.
- CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
- CSS white-space property specifies how white-space inside an element is handled.
- CSS word-break property specifies where the lines should be broken.
Other properties worth looking at for tag:
- CSS text-shadow property adds shadow to text.
- CSS text-align-last property sets the alignment of the last line of the text.
- CSS line-height property specifies the height of a line.
- CSS letter-spacing property defines the spaces between letters/characters in a text.
- CSS word-spacing property sets the spacing between words.
Атрибуты ссылок
По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега . Синтаксис следующий.
В качестве значения используется имя окна или фрейма, заданное атрибутом name . Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен применяются следующие.
- _blank — загружает страницу в новое окно браузера.
- _self — загружает страницу в текущее окно (это значение задается по умолчанию).
- _parent — загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self .
- _top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self .
В примере 8.4 показано, как сделать, чтобы ссылка открывалась в новом окне.
Пример 8.4. Открытие ссылки в новом окне
Открыть в новом окне
Атрибут target корректно использовать только при переходном , при строгом будет сообщение об ошибке, поскольку в этой версии HTML target уже не поддерживается.
Учтите также, что пользователи не любят, когда ссылки открываются в новых окнах, поэтому используйте подобную возможность осмотрительно и при крайней необходимости.
title
Добавляет поясняющий текст к ссылке в виде всплывающей подсказки. Такая подсказка отображается, когда курсор мыши задерживается на ссылке, после чего подсказка через некоторое время пропадает. Синтаксис следующий.
В качестве значения указывается любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки. В примере 8.5 показано, как использовать атрибут title для ссылок.
Пример 8.5. Создание всплывающей подсказки
Рисунки
Результат данного примера показан на рис. 8.8.
Рис. 8.8. Вид всплывающей подсказки в браузере
Цвета и оформления всплывающей подсказки зависят от настроек операционной системы и браузера, и меняться разработчиком не могут.
Атрибут title
Добавляет поясняющий текст к ссылке в виде всплывающей подсказки. Такая подсказка отображается, когда курсор мыши задерживается на ссылке.
Синтаксис
Обязательный атрибут
Значения
Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.
Значение по умолчанию
Рисунки
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы