Атрибуты тегов
Атрибуты тегов
HTML-атрибуты это специальные слова, которые управляют поведением HTML-элемента. Они добавляют дополнительную функциональность, либо меняют поведение элемента по умолчанию. Атрибуты элемента выражаются внутри начального тега элемента.
Атрибут имеет имя и значение. Имена атрибутов должны состоять из одного или нескольких символов, кроме управляющих, таких как пробел, ", ', >, / и =. Имена и значения атрибутов не чувствительны к регистру, но, тем не менее, рекомендуется набирать их в нижнем регистре.
Некоторые атрибуты не требуют значение, потому что у них есть только одна опция. Они называются логическими атрибутами.
Атрибуты могут быть указаны четырьмя различными способами:
- имя атрибута, например, disabled
- значение атрибута без кавычек, например, autocapitalize=sentences
- значение атрибута в одинарных кавычках, например, type='checkbox'
- значение атрибута в двойных кавычках, например, class="external icon-link"
Приведем пример:
Например тег <img> позволяет добавить картинку в разметку. Его мы и используем, но не всё так просто. Сам по себе <img> не имеет смысла.
Чтобы этот тег был действительно нам полезен, необходимо написать внутри него адрес, ведущий к картинке. Делается это с помощью атрибута src:
<img src="coursme.png">Значение атрибута указывается с помощью знака равно и заключается в кавычки. У тега может быть несколько атрибутов. В этом случае они пишутся через пробел:
<тег атрибут1="значение1" атрибут2="значение2">Например, картинке при желании можно задать размеры:
<img src="coursme.png" width="200" height="100">Глобальные атрибуты
Глобальные атрибуты, приведенные в таблице ниже, могут быть использованы для любого HTML-элемента, хотя некоторые из них могут не оказывать на элементы никакого влияния.
| Атрибут | Описание, принимаемое значение |
|---|---|
| accesskey | Значение атрибута используется браузером в качестве руководства для создания сочетания клавиш, которое активирует или фокусирует элемент. Состоит из разделенного пробелами списка символов. Браузер в первую очередь выбирает те клавиши, которые существуют на раскладке клавиатуры.
Синтаксис: accesskey="A"accesskey="N @ 1" |
| autocapitalize | Дает подсказку браузеру, каким образом вводимый текст будет автоматически писаться с заглавной буквы при вводе/редактировании пользователем. Атрибут не влияет на поведение при наборе текста на физической клавиатуре, только на поведение других механизмов ввода, таких как виртуальные клавиатуры на мобильных устройствах и голосовой ввод. Атрибут autocapitalize никогда не приводит к автоматическому включению заглавных букв для элемента <input> типа url, email или password.
Разрешенные значения:off или none — все буквы по умолчанию в нижнем регистре. on или sentences — первая буква каждого предложения по умолчанию заглавная; все остальные буквы по умолчанию в нижнем регистре. words — первая буква каждого слова по умолчанию заглавная; все остальные буквы по умолчанию в нижнем регистре. characters — все буквы по умолчанию должны быть в верхнем регистре. Синтаксис: autocapitalize="sentences" |
| autofocus | Логический атрибут, указывающий, что элемент должен быть сфокусирован при загрузке страницы или при отображении <dialog>, частью которого он является. Не более одного элемента в документе или диалоговом окне может иметь атрибут autofocus. Если применить к нескольким элементам, то фокус получит первый из них.
Синтаксис: autofocus |
| class | Представляет собой разделенный пробелом список классов элемента с учетом регистра. Классы позволяют CSS и Javascript выбирать и получать доступ к элементам с помощью селекторов классов или функций, таких как метод DOM document.getElementsByClassName.
Синтаксис: class="toc" class="external icon-link" |
| contenteditable | Указывает, может ли элемент быть доступным для редактирования пользователем. Цвет курсора в области редактирования можно изменить с помощью CSS-свойства caret-color.
Разрешенные значения:true или пустая строка — элемент доступен для редактирования. false — элемент недоступен для редактирования. Синтаксис: contenteditable="false" |
| data-* | Создает пользовательские атрибуты данных, которые позволяют сценариям обмениваться информацией между HTML и его представлением DOM. Доступ к ним дает свойство HTMLElement.dataset.
Символ * может быть заменен любым именем в соответствии с правилом создания имен XML со следующими ограничениями:имя не должно начинаться с xml (без учета регистра).имя не должно содержать двоеточие :.имя не должно содержать заглавных букв. Синтаксис: <img class="spaceship cruiserX3" src="shipX3.png"data-ship-id="324" data-weapons="laserI laserII" data-shields="72%"data-x="414354" data-y="85160" data-z="31940"onclick="spaceships[this.dataset.shipId].blasted()"> |
| dir | Указывает направление текста элемента. Является обязательным для элемента <bdo>.
Разрешенные значения:ltr — слева направо и должно использоваться для языков, которые пишутся слева направо (например, английский). rtl — справа налево и должно использоваться для языков, которые пишут справа налево (например, арабский). auto — позволяет браузеру использовать базовый алгоритм, который анализирует символы внутри элемента, пока не найдет символ с сильной направленностью, а затем применяет эту направленность ко всему элементу. Синтаксис: dir="auto" |
| draggable | Указывает, можно ли перетаскивать элемент либо с помощью собственного поведения браузера, либо с помощью HTML Drag and Drop API.
Разрешенные значения:true — элемент можно перетаскивать. false — элемент нельзя перетащить. auto — значение по умолчанию, означает, что поведение перетаскивания является поведением браузера по умолчанию: перетаскивать можно только выделенный текст, изображения и ссылки. Синтаксис: draggable="true" |
| enterkeyhint | Указывает, какой текст или значок должен отображаться на клавише ввода виртуальной клавиатуры.
Разрешенные значения:enter — символ новой строки. done — текст, означающий, что больше нечего вводить, и редактор метода ввода (IME) будет закрыт. go — текст, означающий, что пользователь должен перейти к цели введенного им текста. next — текст, означающий, что пользователь должен перейти к следующему полю, которое будет принимать текст. previous — текст, означающий, что пользователь должен перейти в предыдущее поле, которое будет принимать текст. search — текст, означающий, что пользователь должен перейти к результатам поиска введенного им текста. send — текст, означающий, что пользователь должен отправить введенный текст. Синтаксис: enterkeyhint="go" |
Атрибуты выделены бирюзовым цветом- это атрибуты, добавленные в спецификацию HTML5.
Больше атрибутов вы можете найти по ссылке Справочная информация по HTML атрибутам - HTML | MDN (mozilla.org)
Заключение
Понимание HTML-атрибутов и их правильное использование позволяют расширить функциональность и стилизацию элементов на веб-странице. Знание глобальных атрибутов также обеспечивает более гибкое управление содержимым и внешним видом элементов.