HTML-атрибут

Атрибуты HTML — это специальные слова, используемые внутри открывающего тега для управления поведением элемента. Атрибуты HTML являются модификаторами типа элемента HTML . Атрибут либо изменяет функциональность типа элемента по умолчанию, либо предоставляет функциональность определенным типам элементов, которые не могут правильно функционировать без них. В синтаксисе HTML атрибут добавляется к начальному тегу HTML .

Распознано несколько основных типов атрибутов, в том числе: (1) обязательные атрибуты , необходимые определенному типу элемента для правильного функционирования этого типа элемента; (2) необязательные атрибуты , используемые для изменения функциональности типа элемента по умолчанию; (3) стандартные атрибуты , поддерживаемые многими типами элементов; и (4) атрибуты событий , используемые для того, чтобы типы элементов указывали сценарии, которые будут запускаться при определенных обстоятельствах.

Некоторые типы атрибутов функционируют по-разному при использовании для изменения разных типов элементов. Например, имя атрибута используется несколькими типами элементов, но в каждом из них имеет несколько разные функции. ^[1]

Описание

Атрибуты HTML обычно отображаются в виде пар имя-значение , разделенных знаком =, и записываются в стартовом теге элемента после имени элемента:

<element Attribute= "value" > содержимое элемента </element>

Где elementимя типа элемента HTML и attributeимя атрибута, которому присвоено указанное значение value. Значение может быть заключено в одинарные или двойные кавычки, хотя значения, состоящие из определенных символов, можно не заключать в кавычки в HTML (но не в XHTML). ^[2]^[3] Оставление значений атрибутов без кавычек считается небезопасным. ^[4]

Хотя большинство атрибутов предоставляются в виде парных имен и значений, некоторые из них влияют на элемент просто своим присутствием в начальном теге элемента ^[5] (например, ismapатрибут imgэлемента ^[6] ).

Элемент сокращения , abbrможно использовать для демонстрации различных атрибутов:

< abbr  id = "anId"  class = "aClass"  style = "color:blue;"  title = «Язык разметки гипертекста» > HTML </ abbr >

Этот пример отображается как HTML синим цветом, но не является ссылкой, и в большинстве браузеров при наведении курсора на сокращение должен отображаться текст заголовка «Язык гипертекстовой разметки» на плавающем желтом фоне ( подсказка ).

< div  style = "text-align: center;" > Центрированный текст </ div >

В этом другом примере ваш текст будет выглядеть так:

Центрированный текст

Большинство элементов также принимают атрибуты, связанные с языком, langи dir.

Общие атрибуты

Обычно элементы HTML могут принимать любой из нескольких наиболее распространенных стандартных атрибутов (см. полный список):

Атрибут idпредоставляет уникальный идентификатор элемента для всего документа. ^[7]^[8]^[9] Его можно использовать в качестве селектора CSS для предоставления презентационных свойств, браузеров для фокусировки внимания на конкретном элементе или сценариев для изменения содержимого или представления элемента. URL-адрес, добавленный к URL-адресу страницы, напрямую нацелен на конкретный элемент документа, обычно на подраздел страницы. Например, идентификатор «Атрибуты» http://en.wikipedia.org/wiki/HTML_class/HTML#Attributes(для ссылки на раздел «Атрибуты» на странице «HTML»).
Атрибут classобеспечивает способ классификации похожих элементов. Можно добавить несколько имен классов, разделив их пробелами. ^[10]^[11] Семантически, например, классы используются в микроформатах . Кроме того, авторы таблиц стилей могут создавать селекторы , соответствующие элементам по классам, для целей стилизации. Например, документ HTML может использовать это обозначение, class="notation"чтобы указать, что все элементы со значением этого класса подчинены основному тексту документа. Такие элементы могут быть собраны вместе в виде сносок на странице, а не размещаться в том месте, которое соответствует их положению в исходном коде HTML. Автор таблицы стилей также может определить правило с помощью селектора .notationи определить свойство font-size: small;.
Атрибут styleобеспечивает способ применения правил стиля, специфичных для элемента. Можно добавить несколько объявлений стилей , разделив их точкой с запятой и необязательным пробелом, при этом каждое объявление включает имя свойства CSS и значение, разделенное двоеточием и необязательным пробелом (пример: style="color: red; text-align: center;"). ^[12]^[13]^[14] Атрибут styleможно использовать для любого элемента HTML (он будет проверяться для любого элемента HTML; однако это не обязательно полезно). Считается лучшей практикой добавлять информацию о стиле в таблицу стилей , что часто достигается с помощью селекторов, соответствующих классу или идентификатору элемента. Однако иногда предпочтение отдается встроенным стилям, когда таблицы стилей считаются слишком громоздкими для простой и конкретной или специальной спецификации стиля.
Атрибут titleиспользуется для присоединения к элементу подтекстового объяснения. В большинстве браузеров этот атрибут отображается в виде всплывающей подсказки .

Разновидности

Атрибуты HTML обычно классифицируются как обязательные атрибуты , необязательные атрибуты , стандартные атрибуты и атрибуты событий :

Обычно обязательные и необязательные атрибуты изменяют определенные элементы HTML.
Хотя стандартные атрибуты можно применять к большинству элементов HTML. ^[15]
Атрибуты событий, добавленные в HTML версии 4, позволяют элементу указывать сценарии , которые будут запускаться при определенных обстоятельствах. ^[16]

Обязательные и необязательные

Используется двумя элементами

<a> и <область> :
- coords — координаты <области> или <ссылки> внутри нее.
- shape — форма <области> или <ссылки> внутри нее. Значения: по умолчанию, прямоугольник, круг, поли.
<a> и <ссылка> :
- hreflang — код языка связанного документа. ( <а> , <ссылка > )
- rel — Характер связанного документа (относительно отображаемой в данный момент страницы). Свободный текст для <a> , но <link> использует набор терминов (альтернативный, приложение, закладка, глава, содержание, авторские права, глоссарий, справка, домашняя страница, индекс, следующий, предыдущий, раздел, начало, таблица стилей, подраздел).
- rev — Характер отображаемой в данный момент страницы (относительно связанного документа). Зависит от <a> и <link> , как и для rel.
<апплет> и <объект> :
- archive — URL-адреса архива ( <applet> , <object> )
- codebase — базовый URL ( <applet> , <object> )
<базовый шрифт> и <шрифт> :
- color — цвет текста (устарело) ( <basefont> , <font> )
- face — семейство шрифтов (устарело) ( <basefont> , <font> )
<col> и <colgroup> :
- span — количество охватываемых столбцов ( <col> , <colgroup> )
<del> и <ins> :
- datetime — дата и время удаления или вставки текста .
<форма> и <вход> :
- Accept — типы файлов, принимаемые при загрузке <form> или <input>
<frame> и <iframe> :
- Frameborder — значение (0 или 1) указывает, отображать ли границу вокруг <frame> или <iframe> .
- MarginHeight — верхнее и нижнее поля в пикселях вокруг <frame> или <iframe> .
- прокрутка — значение (да, нет, авто) указывает, отображать ли полосы прокрутки вокруг <frame> или <iframe> .
- marginwidth — левое и правое поля в пикселях вокруг <frame> или <iframe> .
<frameset> и <textarea> :
- cols — количество видимых столбцов в <frameset> или <textarea> (некоторые варианты)
- rows — количество видимых строк в <frameset> или <textarea> (некоторые варианты)
<img> и <объект> :
- usemap — указывает имя элемента карты, который будет использоваться с <img> -или- URL-адрес карты изображения, которая будет использоваться с <object> .
<input> и <textarea> :
- readonly — указывает текст, доступный только для чтения, для <input> и <textarea> .
<ссылка> и <стиль> :
- media — указывает устройство отображения для <link> и <style> . Значения: все, слуховой, шрифт Брайля, портативный, печать, проекция, экран, телетайп, ТВ.
<optgroup> и <option> :
- label — текст описания для <optgroup> или <option> .
<td> и <th> :
- abbr — сокращенная версия ячейки или заголовка таблицы .
- ось — имя категории для ячейки или заголовка таблицы .
- colspan — количество столбцов, охватываемых ячейкой или заголовком таблицы .
- nowrap — (устарело) предотвращает перенос ячейки таблицы или заголовка .
- rowspan — количество строк, охватываемых ячейкой или заголовком таблицы .
- область действия — не влияет на обычное отображение в браузере, но помечает ячейку или заголовок таблицы как логический заголовок для других ячеек. Значения: столбец, группа столбцов, строка, группа строк.

Используется несколькими элементами

align — <applet> , <col> , <colgroup> , <object> , <tbody> , <td> , <tfoot> , <th> , <thead>

выравнивание также устарело в <caption> , <div> , <h1> до <h6> , <hr> , <iframe> , <img> , <input> , <legend> , <p> , <table>

alt — <апплет> , <область >, <img> , < вход>
bgcolor — <body> , <table> , <td> , <th> , <bgcolor>
граница — <img> , <объект> , <таблица>
char — <char> , <colgroup> , <tbody> , <td> , <tfoot> , <th> , <thead> , <tr>
charoff — <col> , <colgroup> , <tbody> , <td> , <tfoot> , <th> , <thead> , <tr>
кодировка — <a> , <ссылка> , <скрипт>
cite — <blockquote> , <del> , <ins> , <q>
компактный — <dir> , <menu> , <ol> , <ul>
отключено — <button> , <input> , <optgroup> , <option> , <select> , <textarea>
высота — <applet> , <iframe> , <img> , <object> . Также устарело в <td> , <th>
href — <a> , <область> , <база> , <ссылка>
hspace — <апплет> , <объект> . Также устарело в <img>
longdesc — <frame> , <iframe> , <img>
имя — <a> , <applet> , <button> , <form> , <frame> , <iframe> , <input> , <map> , <meta> , <object> , <param> , <select> , <текстовая область>
размер — <basefont> , <font> , <hr> , <input> , <select>
src — <frame> , <iframe> , <img> , <input> , <script>
цель — <a> , <область> , <база> , <форма> , <ссылка>
тип — <button> , <input> , <li> , <link> , <object> , <ol> , <param> , <script> , <style> , <ul>
valign — <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>
value — <button>, <input>, <li>, <option>, <param>
vspace — <applet>, <img>, <object>
width — <applet>, <col>, <colgroup>, <hr>, <iframe>, <img>, <object>, <pre>, <table>, <td>, <th>

Standard attributes

Standard attributes are also known as global attributes, and function with a large number of elements.^[17] They include the basic standard attributes: these include accesskey, class, contenteditable, contextmenu, data, dir, hidden, id, lang, style, tabindex, title. There are also some experimental ones. Both xml:lang and xml:base have been deprecated. The multiple aria-* attributes improve accessibility.^[17] The event handler attributes are listed later on.

Technically all standard attributes must be accepted by all elements, though they will not function with some elements.^[18] The table below lists some common standard attributes, and some elements they can function with.

Event attributes

The standard attributes include the event handler attributes. They are all prefixed on-:^[17]

onabort
onautocomplete
onautocompleteerror
onblur
oncancel
oncanplay
oncanplaythrough
onchange
onclick
onclose
oncontextmenu
oncuechange
ondblclick
ondrag
ondragend
ondragenter
ondragexit
ondragleave
ondragover
ondragstart
ondrop
ondurationchange
onemptied
onended
onerror
onfocus
oninput
oninvalid
onkeydown
onkeypress
onkeyup
onload
onloadeddata
onloadedmetadata
onloadstart
onmousedown
onmouseenter
onmouseleave
onmousemove
onmouseout
onmouseover
onmouseup
onmousewheel
onpause
onplay
onplaying
onprogress
onratechange
onreset
onresize
onscroll
onseeked
onseeking
onselect
onshow
onsort
onstalled
onsubmit
onsuspend
ontimeupdate
ontoggle
onvolumechange
onwaiting

Event attributes, added in HTML version 4, allow an element to specify scripts to be run under specific circumstances. The table below lists some common event handler attributes, and some elements they can function with.

References

^ "Index of the HTML 4 Attributes". W3C. Retrieved 13 February 2015.
^ "On SGML and HTML". World Wide Web Consortium. Retrieved November 16, 2008.
^ "XHTML 1.0 – Differences with HTML 4". World Wide Web Consortium. Retrieved November 16, 2008.
^ Korpela, Jukka (July 6, 1998). "Why attribute values should always be quoted in HTML". Cs.tut.fi. Retrieved November 16, 2008.
^ "Tags used in HTML". World Wide Web Consortium. November 3, 1992. Retrieved November 16, 2008.
^ "Objects, Images, and Applets in HTML documents". World Wide Web Consortium. December 24, 1999. Retrieved November 16, 2008.
^ However, multiple identifiers may apply to the same element; in particular an element may be inside another element, each having an identifier.
^ "HTML id". W3Schools. Archived from the original on Apr 27, 2020. Retrieved 2020-04-27.
^ "HTML Global id Attribute". W3Schools. Retrieved 2020-04-27.
^ "HTML Classes". W3Schools. Retrieved 2020-04-27.
^ "HTML Global class Attribute". W3Schools. Retrieved 2020-04-27.
^ "HTML Styles". W3Schools. Retrieved 2023-05-12.
^ "HTML Global style Attribute". W3Schools. Retrieved 2023-05-12.
^ "CSS Syntax". W3Schools. Retrieved 2023-05-12.
^ "HTML Global Attributes". W3Schools.
^ "HTML Event Attributes". W3Schools.
^ a b c "Global attributes – HTML (HyperText Markup Language)". MDN Web Docs. Retrieved 2015-02-12.
^ "HTML reference – HTML (HyperText Markup Language)". MDN Web Docs. Retrieved 13 February 2015.