Универсальные атрибуты | HTML | WebReference
Универсальные атрибуты применяются практически ко всем элементам HTML, поэтому выделены в отдельную группу, чтобы не повторять их для каждого элемента.
accesskey
Позволяет получить доступ к элементу с помощью заданного сочетания клавиш.
class
Определяет имя класса, которое позволяет связать элемент со стилевым оформлением.
contenteditable
Сообщает, что элемент доступен для редактирования пользователем.
Устанавливает контекстное меню для элемента.
data-*
Позволяет создавать свои атрибуты для хранения произвольной информации.
dir
Задаёт направление и отображение текста — слева направо или справа налево.
draggable
Указывает, можно ли перетаскивать элемент используя Drag and Drop API.
dropzone
Определяет, что делать с перетаскиваемыми пользователем данными — скопировать их, перетащить или связать.
Скрывает содержимое элемента от просмотра.
id
Указывает имя стилевого идентификатора.
itemid
Определяет уникальный глобальный идентификатор элемента для микроданных.
itemprop
Используется для добавления свойств словаря микроданных к элементу.
itemref
Связывает свойства элемента с атрибутом itemscope.
itemscope
Задаёт область действия словаря в структуре данных.
itemtype
Указывает адрес словаря, который будет применяться для определения свойств элемента в структуре данных.
lang
Браузер использует значение атрибута для правильного отображения некоторых национальных символов.
spellcheck
Указывает браузеру проверять или нет правописание и грамматику в тексте.
style
Применяется для определения стиля элемента с помощью правил CSS.
tabindex
Устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab.
title
Описывает содержимое элемента в виде всплывающей подсказки.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 02.01.2017
Редакторы: Влад Мержевич
Значения атрибутов HTML — Как создать сайт
Типы значений у атрибутов HTML
Атрибуты HTMLЗначения атрибутов
Схема HTML-тега с атрибутом и значением, выглядит следующим образом:
Схема парного тега:
<имяТега атрибут="значение"> </имяТега>
Схема одиночного тега:
<имяТега атрибут="значение">
В статье Об атрибутах HTML, мы рассмотрели виды атрибутов, существующих в языке HTML. У разных атрибутов имеются определённые типы значений, давайте рассмотрим их:
- Значения атрибутов событий,
- Значения атрибутов форматирования,
- Значения атрибутов селекторов,
- Значения атрибута стиля,
- Значения атрибутов указания пути (адреса, URL),
- Значения атрибутов описания.
Значения атрибутов событий
В качестве значений атрибута события, выступает функция или JavaScript-код, их мы будем рассматривать при изучении языка программирования JavaScript и клиентской веб-технологии DOM.
Примеры, использования значений атрибутов событий:onclick="alert()" — в качестве значения, выступает встроенная функция JavaScript,onclick="myFunction()" — в качестве значения, выступает пользовательская функция JavaScript,onmouseover="document.getElementById('nameID').style.color='#008800';" — в качестве значения, выступает технология DOM.
Значения атрибутов форматирования
Вместо атрибутов форматирования и их значений, сейчас используют CSS-свойства. Однако если вам всё же захочется добавить в HTML-теги атрибуты форматирования, то вы можете это сделать.
Значения атрибутов форматирования, делятся на три вида:
а) Значение размера,
б) Значение цвета,
в) Ключевое слово.
а) В качестве значений размера выступают пиксели px или проценты %, более подробно об этом вы можете прочитать в статье Единицы измерения в HTML
Примеры использования значений размера атрибутов форматирования:height="100px" — высота элемента 100 пикселей,width="50%" — ширина элемента 50 процентов.
б) В качестве значений цвета могут выступать слова на английском языке (например red) или числа в шестнадцатеричном формате (например #ff0000), более подробно об этом вы можете прочитать в статье Цвета в HTML
Примеры использования значений цвета атрибутов форматирования:color="red" — красный цвет шрифта, задан английским словом,bgcolor="#ff0000" — красный цвет фона элемента, задан в шестнадцатеричном формате,bordercolor="green" — зелёный цвет рамки элемента, задан английским словом.
в) В качестве значений ключевого слова выступают слова которые уже встроены в язык HTML, например right, top, _blank и т.д.
Примеры использования значений ключевого слова, в атрибутах:align="right" — выравнивает элемент по правому краю,valign="bottom" — выравнивает элемент по нижнему краю,target="_blank" — открывает страницу в новом окне (не является атрибутом форматирования).
Значения атрибутов селекторов
В качестве значений атрибутов селекторов выступает любое слово которое можно набрать английскими буквами, более подробно об этом вы можете прочитать в статье Селекторы CSS
Примеры использования значений атрибутов селекторов:class="имяКласса" — значение имени селектора класса,id="имяУникальногоИдентификатора" — значение имени селектора уникального идентификатора.
Значение атрибута стиля
В качестве значения атрибута стиля выступает CSS-код, более подробно об этом вы можете прочитать в учебнике по языку CSS, в статье Внедрение атрибута style
Примеры использования значений атрибута style=" ":style="color: green;" — присвоить шрифту зелёный цвет green,style="font-family: Arial;" — присвоить шрифту имя Arial.
Значения атрибутов указания пути
В качестве значений атрибутов указания пути (адреса) выступает адрес сайта, страницы или файла, например:
http://site.ru — абсолютный путь,http://site.ru/stranitsa.html — абсолютный путь,
../stranitsa.html — относительный путь,/img/myPicture.html — относительный путь.
Более подробно об адресах в HTML, а также относительных и абсолютных путях можно прочитать в статье Адреса в HTML
Примеры использования значений атрибутов указания пути:href="http://site.ru" — ссылка на сайт,src="/img/myPicture.jpg" — ссылка на файл изображения.
Значения атрибутов описания
В качестве
Примеры использования значений атрибутов описания:alt="Это фотография моего кота" — описание изображения,title="Нажав на ссылку вы перейдёте на крутой сайт" — описание ссылки с помощью глобального атрибута title.
Читать далее: Шпаргалка по HTML
Дата публикации поста: 5 февраля 2016
Дата обновления поста: 16 октября 2014
Навигация по записям
| Атрибут | Значение |
|---|---|
| accesskey | Содержит перечень клавиш на клавиатуре, которые применяются для доступа к этому элементу. Как правило применяется к таким элементам: <a>, <area>, <button>, <input>, <label>, <legend>, <textarea>. Значение: перечень клавиш |
| class | Используется для задания имени класса, чтобы в последствии через CSS можно было задать стиль к этому классу. Значение: имя класса. |
| contenteditable | Позволяет пользователю редактировать любой элемент, если присвоить этому атрибуту значение true. Если false, то соответственно элемент становится нередактируемым. Значение: true/false. |
| contextmenu | Служит для добавления к элементу контекстного меню, которое задается с помощью тега <menu>. Значение: атрибут id элемента <menu>. |
| dir | Позволяет определить направление текста контента в элементах <bdo> и <bdi>. Значение: ltr/rtl/auto. |
| draggable | Используется для назначения элементу свойства перетаскивания (drag’n’drop), если установить в true, то элемент можно перетаскивать. Значение: true/false/auto. |
| dropzone | Служит для определении области, куда можно как бы бросить перетаскиваемые элементы. copy — перемещаемый элемент будет скопирован в область. move — перемещаемый элемент будет перемещен в область. link — при перемещении перемещаемого элемента будет создана ссылка на первичные данные элемента. |
| hidden | Применяется для скрытия элемента, таким образом элемент может быть полностью скрыт. Значение: hidden. |
| id | Задает уникальный идентификатор элемента. Этот идентификатор должен быть уникальным у каждого элемента. Он нужен для задания стилей или для привязки JavaScript сценариев к элементу. Значение: id — идентификатор элемента. |
| lang | Задает код языка содержимого элемента. Значение: код языка. |
| spellcheck | Может указываться требуется или нет проверка элемента на наличие грамматических и синтаксических ошибок. Если установлено значение true, то проверка включена. Значение: true/false. |
| style | Используется для задания внутреннего стиля к элементу. Например <h2 style=»color: red;»>Zagolovok</h2> Значение: код CSS. |
| tabindex | Позволяет задать порядковый номер элемента когда пользователь перемещается по элементам, например формы с помощью клавиши Tab. Значение: номер. |
| title | Используется для задания подсказки описания элемента, когда пользователь подводит мышь на элемент. Значение: текст. подсказки |
| translate | Для задания разрешения или запрета на перевод текста внутри элемента. Значение: yes/no. |
Глобальные атрибуты | htmlbook.ru
Наряду с атрибутами, характерными для конкретных тегов, в HTML5 существует и ряд атрибутов, который можно добавлять к любым тегам, поэтому входящие в эту группу атрибуты называются глобальными или универсальными. Ниже они перечислены с кратким описанием. По ссылке доступно подробное описание атрибута.
accesskey
Атрибут accesskey позволяет активировать ссылку с помощью некоторого сочетания клавиш с заданной в коде ссылки буквой или цифрой. Браузеры при этом используют различные комбинации клавиш. Например, для accesskey=»s» работают следующие сочетания.
- Internet Explorer: Alt + S
- Chrome: Alt + S
- Opera: Shift + Esc, S
- Safari: Alt + S
- Firefox: Shift + Alt + S
class
Задаёт стилевой класс, который позволяет связать определенный тег со стилевым оформлением. В значении допускается указывать сразу несколько классов, разделяя их между собой пробелом.
contenteditable
Сообщает, что элемент доступен для редактирования пользователем — допускается удалять текст, и вводить новый. Также работают стандартные команды вроде отмены, вставки текста из буфера и др.
Устанавливает контекстное меню для элемента. В качестве значения указывается идентификатор меню созданного с помощью тега <menu>.
dir
Задает направление и отображение текста — слева направо или справа налево. Браузеры обычно самостоятельно различают направление текста, если он задан в кодировке Юникод, но с помощью атрибута dir можно указать, в каком направлении отображать текст. Для арабских и еврейских символов приоритетным является направление, заложенное в Юникод, поэтому на них атрибут dir действовать не будет.
draggable
Позволяет перетаскивать элемент для дальнейшего манипулирования с ним.
dropzone
Указывает, что делать с перетаскиваемым элементом.
Скрывает содержимое элемента от просмотра. Такой элемент не отображается на странице, но доступен через скрипты.
id
Задаёт идентификатор — уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.
itemid, itemprop, itemref, itemscope, itemtype
Группа атрибутов, предназначенная для работы с микроданными.
lang
Текст документа может быть набран как на одном языке, так и содержать вставки на других языках, которые могут различаться по своим правилам оформления текста. Например, для русского, немецкого и английского языка характерны разные кавычки, в которые берется цитата. Чтобы указать язык, на котором написан текст внутри текущего элемента и применяется атрибут lang. Браузер использует его значение для правильного отображения некоторых символов.
spellcheck
Указывает браузеру проверять или нет правописание и грамматику в тексте. Хотя атрибут можно устанавливать практически для всех элементов, результат будет заметен только для полей форм (<input>, <textarea>), а также редактируемых элементов (у них установлен атрибут contenteditable).
style
Применяется для определения стиля элемента с помощью правил CSS.
tabindex
Атрибут tabindex устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab. Переход происходит от меньшего значения к большему, например от 1 к 2, затем к 3 и так далее. При этом строгая последовательность не важна, допускается пропускать какие-то числа и начинать с любой цифры. Если значения tabindex у элементов совпадают, тогда учитывается их порядок появления в коде.
title
Создаёт всплывающую текстовую подсказку, которая появляется при наведении курсора на элемент. Вид такой подсказки зависит от браузера, настроек операционной системы и не может быть изменен с помощью HTML-кода или стилей.