Атрибуты HTML хранят дополнительную информацию в теге HTML. Для этого их просто добавляют в код. В дополнение к универсальным атрибутам, атрибутам событий и данных существует множество индивидуальных атрибутов.
Для чего используются атрибуты HTML?
Атрибуты HTML используются для хранения дополнительной информации об элементах в теге HTML. Они состоят из имени и значения. Атрибуты HTML находятся в открывающем теге и нечувствительны к регистру, то есть нечувствительны к верхнему и нижнему регистру. Это правда, что их значения больше не обязательно писать в кавычках; тем не менее это обозначение рекомендуется во избежание ошибок. Вот как HTML-атрибуты включаются в код:
Например, если ссылка должна быть встроена в веб-сайт, это работает с использованием тега <a> и атрибута href. Вместе это выглядит так:
<!DOCTYPE html> <html> <head> <title>Beispieltitel</title> </head> <body> <a href="https://www.beispiel.de">Hier gelangen Sie zur Beispielseite.</a> </body> </html>
Какие атрибуты HTML существуют?
Существует множество различных атрибутов HTML, хотя с момента появления HTML5 некоторые параметры больше не используются. Атрибуты HTML можно условно разделить на пять различных групп:
- Классические универсальные атрибуты, которые можно использовать практически в любом элементе, сохраняя при этом постоянную роль. Однако для некоторых элементов они не действуют.
- Специальные атрибуты, влияющие на отдельные элементы и определяющие их параметры.
- Атрибуты, действующие с момента появления HTML5 ; иногда они создают новые возможности или заменяют старые атрибуты HTML.
- Атрибуты событий, которые запускают определенное событие для элемента, как только пользователи выполняют определенное действие.
- Атрибуты данных, которые могут содержать информацию, но не распознаются пользователями.
Классические универсальные атрибуты
Классические универсальные атрибуты разрешены в большинстве тегов HTML. Это самые известные:
| HTML-атрибуты | Описание | Пример |
| i.e | Служит для уникальной идентификации элемента HTML. | идентификатор = «пример» |
| class | Используется для присвоения элемента одному или нескольким классам. | класс = «автомобили» |
| style | Определяет стиль элемента HTML и может, например. B. цвет, шрифт или размер шрифта. | style=»цвет: синий; размер шрифта: 2em» |
| title | Содержит дополнительную информацию о содержимом элемента; это будет, например. Б. отображается в отдельном окне при наведении курсора мыши на элемент. | заголовок=»пример текста» |
| long | Определяет базовый язык документа. | <html язык=»ru»> |
| to you | Определяет направление текста слева направо или наоборот. | <html dir=»ltr»>пример</html> |
Конкретные атрибуты HTML
Существует множество специальных HTML-атрибутов для определения отдельных элементов. Это самые распространенные:
| HTML-атрибуты | Описание | Пример |
| old | Отображает альтернативный текст, когда изображение не загружается или не отображается. | <img src=»https://www.ionos.de/digitalguiderotesauto.jpg» alt=»Красный спортивный автомобиль на светофоре.»> |
| height | Устанавливает высоту элемента в пикселях. | <img alt=»красная машина» height=»220″> |
| width | Устанавливает ширину элемента в пикселях. | <img alt=»красная машина» width=»220″> |
| href | Определяет URL для ссылки. | <a href=»https://www.beispielseite.de» title=»Подробнее»> |
| hreflang | Указывает язык связанного документа. | <a href=»https://www.beispielseite.de» lang=»de» hreflang=»en»>Информация на английском языке</a> |
| target | Указывает, где открыть ссылку. | <a href=»https://www.beispielseite.de» target=»_blank»> |
| rel | Определяет связь между целевым и связанными документами. | <a rel=»nofollow» href=»https://www.beispielseite.de/»>пример страницы</a> |
| src | Определяет происхождение элемента. | <img src=»https://www.ionos.de/digitalguiderotesauto.jpg» alt=»красная машина> |
| autoplay | Заставляет определенный медиаконтент воспроизводиться автоматически; однако большинство браузеров могут переопределить этот параметр. | <автовоспроизведение видео> |
| poster | Устанавливает миниатюру при встраивании видео в HTML. | <управление видео poster=»preview.png»> |
Новые атрибуты с HTML5
С момента появления HTML5 и HTML 5.1 некоторые атрибуты HTML стали новыми. К ним относятся в т.ч. следующее:
| HTML-атрибуты | Описание | Пример |
| contenteditable | Определяет, можно ли редактировать содержимое элемента; возможные значения истинны и ложны. | <p contenteditable=»false»> |
| hidden | Универсальный атрибут, который может скрыть элемент. | <скрытый> Этот текст будет скрыт </p> |
| drop zone | Определяет, копируется ли элемент (copy), связывается (link) или перемещается (move) во время перетаскивания. | <pdropzone=»переместить»> |
| draggable | Универсальный атрибут, определяющий, разрешено ли перетаскивание содержимого элемента. | <p перетаскивание = «ложь»> |
| loading | Определяет, как загружается внешний носитель; допустимые значения: авто, нетерпеливый и ленивый. | <img src=»https://www.ionos.de/digitalguiderotesauto.jpg» alt=»красная машина» loading=»ленивый» |
| spellcheck | Указывает, включать ли проверку орфографии; допустимые значения true и false. | <p contenteditable=»true» проверка орфографии=»false»> |
Атрибуты события
Существует множество различных атрибутов HTML, которые запускают события в браузере. Таким образом, следующие HTML-атрибуты представляют собой лишь небольшой набор различных событий, которые можно интегрировать в HTML с помощью JavaScript.
| HTML-атрибуты | Описание | Пример |
| onclick | Вызывает событие в JavaScript по щелчку мыши. | <button onclick=»Пример функции ( ) «>Нажмите здесь</button> |
| onscroll | Отправляется при прокрутке элемента. | <div onscroll=»Пример функции ( ) «> |
| onkeydown | Срабатывает при нажатии клавиши. | <input type=»text» onkeydown=пример функции ( ) «> |
| Onsearch | Запускает JavaScript, как только поиск вводится в маску поиска. | <input type=»search» onsearch=»Пример функции ( ) «> |
| onerror | Может выполнить JavaScript в случае ошибки. | <img src=»https://www.ionos.de/digitalguiderotesauto.jpg» onerror=»Пример функции ( ) «> |
| oncopy | Запускается при копировании текста. | <input type=»text» oncopy=»Пример функции ( ) » value=»Копировать этот текст»> |
| onselect | Запускает JavaScript, как только вы выбрали текст в элементе ввода. | <input type=»text onselect=»Пример функции ( ) » value=»Пример текста»> |
Атрибуты данных
В дополнение к перечисленным выше HTML-атрибутам существуют отдельные атрибуты, которые можно оценить только с помощью скрипта или использовать с CSS. Таким образом может быть предоставлена информация, которая не должна быть представлена визуально. Эти атрибуты HTML всегда начинаются с data-. Вы можете установить их с помощью setAttribute и прочитать с помощью getAttribute. Даже поисковые системы не оценивают эти атрибуты HTML. Для атрибутов данных разрешены только строчные буквы, цифры, дефисы, точки и двоеточия.
<article id="Beispielelemente" data-colums="5" data-index-number="1385" data-parent="html5"> </article>
Вывод: HTML-атрибуты важны практически для каждого веб-сайта.
Если вы изучаете HTML, вы быстро заметите, что HTML-атрибуты являются важным строительным блоком на пути к оптимальному и полнофункциональному веб-сайту. Особенно, когда вам нужны функции, которые отклоняются от повседневного использования, атрибуты HTML — лучший и самый безопасный способ. Сохраненная информация гарантирует, что все аспекты вашего нового веб-сайта работают рука об руку. Его особенно легко использовать с одним из многочисленных HTML-редакторов.
