Для расширения возможностей HTML тегов, используются атрибуты, с помощью которых мы можем дополнительно сообщить браузеру дополнительную информацию о том, как отображать тот или иной HTML элемент.
HTML атрибут состоит из имени и значения, между которыми ставится знак равно (=). В HTML коде это выглядит так: <tag имя атрибута=”значение”>Текст </tag>.
Синтаксис
<tag имя атрибута=”значение”>Текст</tag>Рассмотрим на примере.
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<a href="https://ru.w3docs.com">Нажмите на ссылку, и вы будете перенаправлены на домашнюю страницу нашего сайта.</a>
</body>
</html>Результат
В нашем примере мы использовали тег <a> с атрибутом href. В кавычках мы написали адрес страницы, куда должен быть перенаправлен пользователь после нажатия на ссылку.
В браузере код будет отображаться так:
Нажмите на ссылку, и вы будете перенаправлены на домашнюю страницу нашего сайта.
В одном HTML элементе могут содержаться два и более атрибутов. Отделяются атрибуты друг от друга пробелом. Последовательность атрибутов не имеет значения.
Синтаксис
<tag атрибут1=”значение” атрибут2=”значение”>Текст</tag>Список HTML атрибутов
Ниже мы приводим HTML атрибуты, которые используются чаще всего.
| Атрибут | Описание | Пример |
|---|---|---|
| alt | Устанавливает альтернативный текст для изображения (он показывается в случае невозможности загрузки изображения) | alt=”HTML Attributes” |
| height | Устанавливает высоту элемента | height=”250” |
| href | Устанавливает адрес ссылки | href=”https://www.w3docs.com/” |
| hreflang | Устанавливает язык связанного документа | hreflang="en" |
| id | Устанавливает уникальный id для HTML элемента | id="example" |
| lang | Устанавливает язык документа (используется в теге <html>) | <html lang="en-US"> |
| rel | Показывает, как между собой связаны исходный документ, и документ, на который ссылаются | rel="nofollow" |
| shape | Устанавливает форму элемента | shape="circle" |
| span | Определяет строчные элементы документа | span="2" |
| src | Указывает источник | src=”image.jpg” |
| start | Устанавливает номер, с которого начинается нумерованный список(используется в теге <ol>) | <ol start="30"> |
| style | Устанавливает CSS стиль для HTML элемента (размер, фонт, цвет и т.д.) | style="color:red;text-align:right" |
| target | Определяет, где открывать ссылку | target=”_blank” |
| wrap | Определяет, как осуществлять перенос текста | wrap=”hard” |
| width | Определяет ширину элемента | width=”120” |
Ознакомьтесь также с Глобальными атрибутами, которые могут использоваться с любым элементом HTML.
Практикуйте свои знания
