Атрибуты HTML хранят дополнительную информацию в HTML-теге. Они просто добавляются в код. Помимо универсальных атрибутов, атрибутов событий и атрибутов данных существует еще несколько отдельных атрибутов.
Для чего используются атрибуты HTML?
Атрибуты HTML используются для хранения дополнительной информации об элементах в теге HTML. Они состоят из имени и значения. Атрибуты HTML располагаются в открывающем теге и не чувствительны к регистру. Хотя их значения не обязательно должны быть записаны через инвертированную запятую, этот стиль все же рекомендуется во избежание ошибок. Приведенные ниже примеры иллюстрируют включение HTML-атрибутов в код:
<element attribute name="attribute value"/>Тег <a> и атрибут href необходимы для включения ссылки на веб-сайте. Это выглядит следующим образом:
<!DOCTYPE html>
<html>
<head>
<title>sample title</title>.
</head>
<body>
<a href="https://www.example.com">this link will take you to the example site.</a>
</body>
</html>Прочитайте нашу подробную статью об a href, чтобы узнать больше о внутренней и внешней перелинковке с помощью HTML и его атрибутов.
Какие атрибуты HTML существуют?
Существует несколько различных атрибутов HTML, хотя некоторые из них больше не используются после появления HTML5. Атрибуты HTML делятся на пять различных групп:
- Классические универсальные атрибуты могут использоваться почти во всех элементах и сохраняют свою постоянную роль. Однако для некоторых элементов они не имеют никакого эффекта.
- Специфические атрибуты влияют на отдельные элементы и определяют их параметры.
- Атрибуты, применяемые с момента внедрения HTML5, могут частично создавать новые параметры или заменять старые атрибуты HTML.
- Атрибуты событий вызывают определенное событие для элемента, когда пользователи выполняют определенное действие.
- Атрибуты данных могут содержать информацию, не распознаваемую пользователями.
Классические универсальные атрибуты
Классические универсальные атрибуты допускаются в большинстве HTML-тегов. Приведенные ниже примеры являются наиболее распространенными:
|
Атрибуты HTML |
Описание |
Пример |
|
id |
Идентифицирует элемент HTML. |
id=»пример» |
|
class |
Присваивает элемент одному или нескольким классам. |
class=»cars» |
|
стиль |
Определяет стиль элемента HTML и может определять цвет, шрифт, размер шрифта и т.д. |
style=»color: blue; font-size: 2em» |
|
title |
Содержит дополнительную информацию о содержимом элемента; она отображается в отдельном окне при наведении курсора мыши на элемент. |
title=»exampletext» |
|
lang |
Определяет язык документа. |
<html lang=»en»> |
|
dir |
Определяет направление движения текста слева направо или наоборот. |
<html dir=»ltr»> example</html> |
Специфические атрибуты HTML
Существует несколько специфических атрибутов HTML для определения отдельных элементов. Ниже приведены примеры наиболее распространенных из них:
|
Атрибуты HTML |
Описание |
Пример |
|
старый |
Показывает альтернативный текст, если изображение не может быть загружено или отображено. |
<img src=»https://www.ionos.com/digitalguideredcar.jpg» alt=»Красный спортивный автомобиль на светофоре.»> |
|
height |
Устанавливает высоту элемента в px. |
<img alt=»красный автомобиль» height=»220″> |
|
width |
Устанавливает ширину элемента в px. |
<img alt=»красный автомобиль» width=»220″> |
|
href |
Определяет URL для ссылки. |
<a href=»https://www.examplesite.com» title=»Узнать больше»> |
|
hreflang |
Задает язык документа, на который ведет ссылка. |
<a href=»https://www.examplesite.com» lang=»en» hreflang=»en»>Информация на английском</a> |
|
target |
Определяет, где должна быть открыта ссылка. |
<a href=»https://www. examplesite.com» target=»_blank»> |
|
rel |
Определяет связь между целевым и связанным документами. |
<a rel=»nofollow» href=»https://www. examplesite.com/»>образец сайта</a> |
|
src |
Определяет происхождение элемента. |
<img src=»https://www.ionos.com/digitalguideredcar.jpg» alt=»красная машина> |
|
автовоспроизведение |
Обеспечивает автоматическое воспроизведение определенного медиаконтента; однако большинство браузеров могут переопределить эту настройку. |
<автовоспроизведение видео> |
|
плакат |
Устанавливает изображение предварительного просмотра при вставке видео в HTML. |
<video controls poster=»preview.png»> |
Новые атрибуты с HTML5
Существует несколько атрибутов HTML, которые были добавлены после появления HTML5 и HTML 5.1. К ним относятся следующие:
|
Атрибуты HTML |
Описание |
Пример |
|
contenteditable |
Определяет, можно ли редактировать содержимое элемента; возможные значения — true и false. |
<p contenteditable=»false»> |
|
hidden |
Универсальный атрибут, который может скрыть элемент. |
<p hidden> Этот текст скрыт </p> |
|
dropzone |
Определяет, будет ли элемент скопирован, связан или перемещен во время перетаскивания. |
<p dropzone=»move»> |
|
draggable |
Универсальный атрибут, определяющий, можно ли перетаскивать содержимое элемента. |
<p draggable=»false»> |
|
загрузка |
Определяет способ загрузки внешнего медиа; допустимые значения: auto, eager и lazy. |
<img src=»https://www.ionos.com/digitalguideredcar.jpg» alt=»красная машина» loading=»lazy» |
|
проверка орфографии |
Указывает, можно ли включить проверку орфографии; допустимые значения — true и false. |
<p contenteditable=»true» spellcheck=»false»> |
Атрибуты события
Существует множество различных атрибутов HTML, которые вызывают событие в браузере. Поэтому приведенные ниже атрибуты HTML — это лишь небольшая подборка различных событий, которые могут быть вызваны с помощью JavaScript в HTML.
|
Атрибуты HTML |
Описание |
Пример |
|
onclick |
Запускает событие в JavaScript при щелчке мыши. |
<button onclick=»samplefunction ( )»>нажмите здесь</button> |
|
onscroll |
Срабатывает при прокрутке элемента. |
<div onscroll=»examplefunction ( )»> |
|
onkeydown |
Срабатывает при нажатии кнопки. |
<input type=»text» onkeydown=example function ( )»> |
|
onsearch |
Запускает JavaScript, как только в форме поиска вводится поиск. |
<input type=»search» onsearch=»examplefunction ( )»> |
|
onerror |
Выполняет JavaScript в случае ошибки. |
<img src=»https://www.ionos.com/digitalguideredcar.jpg» onerror=»examplefunction ( )»> |
|
oncopy |
Срабатывает при копировании текста. |
<input type=»text» oncopy=»examplefunction ( ) » value=»copy this text»> |
|
onselect |
Запускает JavaScript, как только вы выделите текст в элементе ввода. |
<input type=»text onselect=»examplefunction ( ) » value=»exampletext»> |
Атрибуты данных
Помимо перечисленных выше атрибутов HTML, существуют некоторые атрибуты, которые могут быть оценены только с помощью сценария или использованы с CSS. Это позволяет включить информацию, которая не представлена визуально. Эти атрибуты HTML всегда начинаются с data-. Их можно задать с помощью setAttribute и прочитать с помощью getAttribute. Поисковые системы также не оценивают эти атрибуты HTML. Для атрибутов data допускаются только строчные буквы, цифры, дефисы, точки и двоеточия.
<article
id="example elements"
data-columns="5"
data-index-number="1385"
data-parent="html5">
</article>Заключение: Атрибуты HTML важны практически для каждого сайта
Если вы решите изучать HTML, вы заметите, что атрибуты HTML являются важной ступенькой на пути к оптимальному и полнофункциональному веб-сайту. Атрибуты HTML — это лучший и самый безопасный способ использовать функции, которые отклоняются от повседневного использования. Сохраненная информация гарантирует, что все аспекты вашего нового сайта будут работать в связке друг с другом. Особенно легко использовать их с помощью одного из HTML-редакторов.
Идеальный веб-сайт — именно такой, как вам нравится. С помощью конструктора сайтов от IONOS у вас есть доступ ко всем инструментам, необходимым для создания вашего онлайн-присутствия с самого начала. Кроме того, наши специалисты могут создать ваш сайт в соответствии с вашими индивидуальными пожеланиями. Выберите модель, соответствующую вашим требованиям!