HTML атрибуты

Для расширения возможностей 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.




Related articles