Что такое атрибуты тегов html и как ими пользоваться?

Нестандартные атрибуты

У каждого элемента есть некоторый набор стандартных свойств, например для это будут , , а для это будут , , и так далее.

Точный набор свойств описан в стандарте, обычно мы более-менее представляем, если пользуемся HTML, какие свойства могут быть, а какие – нет.

Для нестандартных атрибутов DOM-свойство не создаётся.

Например:

Свойство является стандартным, только если оно описано в стандарте именно для этого элемента.

То есть, если назначить элементу атрибут , то свойство от этого не появится. Как, впрочем, и если назначить ссылке атрибут :

Нестандартные атрибуты иногда используют для CSS.

В примере ниже для показа «состояния заказа» используется атрибут :

Почему именно атрибут? Разве нельзя было сделать классы , , ?

Конечно можно, но манипулировать атрибутом из JavaScript гораздо проще.

Например, если нужно отменить заказ, неважно в каком он состоянии сейчас – это сделает код:

Для классов – нужно знать, какой класс у заказа сейчас. И тогда мы можем снять старый класс, и поставить новый:

…То есть, требуется больше исходной информации и надо написать больше букв. Это менее удобно.

Проще говоря, значение атрибута – произвольная строка, значение класса – это «есть» или «нет», поэтому естественно, что атрибуты «мощнее» и бывают удобнее классов как в JS так и в CSS.

Атрибут lang

Давайте теперь поговорим о таком атрибуте как lang, основная его функция это определить язык содержимого внутри элемента.
Например, атрибут lang, применённый к тегу <html> указывает язык содержимого веб-страницы (для всего текста на странице).

Старайтесь всегда объявлять язык страницы — это важно для приложений, читающих с экрана, для поисковых систем, для осущствления правильной расстановки переносов, выбора необходимого набора кавычек браузером (вид может зависеть от языка), проверки орфографии и пунктуации и так далее. Атрибут имеет следующий синтаксис:

Атрибут имеет следующий синтаксис:

lang = "Код языка"

Код языка, подразумевает собой сокращенное наименование, состоящее из двух букв которые определяют язык содержимого. Если у языка есть диалект, то через дефис добавляют еще две буквы (например, США lang =»en-us»).

Пример использования атрибута в мультиязычном документе:

<!DOCTYPE html> 
<html lang =  "ru"> <!-- указывает язык содержимого веб-страницы -->
	<head>
		<title>Пример использования атрибута lang</title>
	</head>
	<body>
		<p lang =  "es"> ¿Por qué necesita una traducción? </p> <!-- Этот параграф интерпретируется как испанский -->
		<p>И дальше по тексту интерпретация языка продолжается на русском <p> 
	</body>
</html> 

В этом примере основной язык документа является русский («ru»), а один абзац объявлен на испанском языке («es»).

Полный перечень кодов вы можете найти в разделе «Коды языков».

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

Глобальные атрибуты будут часто встречаться в примерах этого учебника, предлагаю Вам бегло повторить те атрибуты, которые мы уже рассмотрели и ознакомиться с теми глобальными атрибутами, которые будут рассмотрены в ближайших статьях:

Атрибут Значение
dir Определяет направление текста содержимого элемента.
id Определяет уникальный идентификатор для элемента. Атрибут должен использоваться только один раз в конкретном HTML документе.
lang Определяет язык содержимого в элементе.
style Задает встроенный CSS стиль для элемента.
title Указывает дополнительную текстовую подсказку о содержимом при наведении курсора на элемент.

Основные атрибуты HTML

Существует четыре основных атрибута в HTML, которые могут использоваться для большинства html-элементов (хотя и не для всех):

  • id
  • title
  • class
  • style

Атрибут id

Атрибут id html-тега может быть использован для однозначной идентификации любого элемента внутри html-страницы. Существуют две основные причины, по которым Вы можете использовать атрибут id для элемента:

  • Если элемент содержит атрибут id как уникальный идентификатор, то можно идентифицировать только этот элемент и его содержимое.
  • Если на веб-странице (или в таблице стилей) есть два элемента с одним и тем же именем, Вы можете использовать атрибут id для различения элементов, имеющих одно и то же имя.

Таблицу стилей мы обсудим в отдельном самоучителе. Пока же давайте использовать атрибут id для различения двух элементов абзаца, как показано ниже.

Атрибут title

Атрибут title — дает название элемента для элемента. Синтаксис для атрибута title аналогичен атрибуту id.

Поведение этого атрибута будет зависеть от элемента, который его несет, хотя он часто отображается как подсказка, когда курсор наводится на элемент или когда элемент загружается.

Пример

Получим следующий результат:

Теперь попробуйте навести курсор на «Пример заголовка», и Вы увидите, что title, который Вы использовали в вашем коде, выйдет как подсказка курсора.

Атрибут class

Атрибут class — используется для связывания элемента со списком стилей и задает класс элементу. Вы узнаете больше об использовании атрибута class, когда изучите CSS (каскадные таблицы стилей). Так что пока можете это пропустить.

Значением атрибута может быть также список имен классов, разделенных пробелами. Например:

Атрибут style

Атрибут style — позволяет указывать правила каскадной таблицы стилей (CSS) внутри элемента.

Получим следующий результат:

На данный момент мы не изучаем CSS, так что давайте продолжим, не беспокоясь о CSS. Здесь Вам нужно понять, какие существуют html-атрибуты, и как их можно использовать при форматировании содержимого.

Популярные статьи

Что такое атрибуты тегов html и как ими пользоваться?

  • 26.1K
  • 10 мин.

Что лучше: SEO-продвижение или контекстная реклама?
Не знаете, что лучше: SEO-продвижение или контекстная реклама? Все зависит от желаемого результата и ваших целей. Давайте разбираться, чтобы не потратить лишних денег и сделать правильные инвестиции.

  • 22 сентября 2018
  • Продвижение

Что такое атрибуты тегов html и как ими пользоваться?

  • 24.1K
  • 20 мин.

Законы РФ для владельцев сайтов: штрафовать, нельзя помиловать
Российское законодательство предъявляет свои требования к сайтам, о которых большинство владельцев даже не подозревают. Но как говорится, незнание законов не освобождает от ответственности. Поэтому подробно разберем основные законы РФ, касающиеся сайтов; ответственность за нарушение этих законов, а также способы защиты от блокировки бизнеса и уплаты штрафов. К прочтению всем владельцам сайтов обязательно!

  • 16 апреля 2018
  • Продвижение

Что такое атрибуты тегов html и как ими пользоваться?

  • 6.2K
  • 8 мин.

Идеальное представление, или как Яндекс.Вебмастер радеет за красивый сниппет
Если вы хоть раз искали в поиске определенную организацию, то наверняка обращали внимание, как выглядят некоторые сайты в выдаче. Глаз цепляется за подробные снипетты, где указаны контакты, отзывы и даже местоположение на сайте

Хотите такой же? В статье мы разберем раздел «Представление в поиске» в Вебмастере и поможем сделать красивый снипет.

  • 6 мая 2020
  • Продвижение

Форматирование

Тег Описание Chrome Firefox Opera Safari IExplorer Edge
<acronym> Не поддерживается в HTML5. Определяет акроним. Используйте вместо данного элемента <abbr>. Да Да Да Да Да Да
<abbr> Определяет аббревиатуру или акроним. Маркировка сокращений является полезной информацией для браузеров, систем перевода и поисковиков. Да Да Да Да Да Да
<address> Определяет контактную информацию (автор / владелец) документа или статьи. Да Да Да Да Да Да
<b> Определяет жирное начертание текста. Да Да Да Да Да Да
<bdi> Изолирует фрагмент текста, который отформатирован в другом направлении, то есть позволяет браузерам корректно обрабатывать двунаправленный текст. Этот элемент полезно использовать при отображении текста с разной направленностью. Да Да Да Да Нет Нет
<bdo> Используется для переопределения текущего направления текста (устанавливает направление вывода текста и преимущественно предназначен для использования с языками, где чтение происходит справа налево, например — арабский). Да Да Да Да Да Да
<big> Не поддерживается в HTML5.Шрифт, который отображается большего размера. Используйте CSS вместо данного элемента. Да Да Да Да Да Да
<blockquote> Определяет блочную цитату (длинная цитата внутри документа). Текст внутри этого тега отображается как выровненный блок с отступами слева и справа Да Да Да Да Да Да
<center> Не поддерживается в HTML5.Определяет текст, который выровнен по центру. Используйте CSS вместо данного элемента. Да Да Да Да Да Да
<cite> Предназначен для выделения названия произведений (по умолчанию — курсивом). Да Да Да Да Да Да
<code> Предназначен для выделения части компьютерного кода (по умолчанию представлен моноширинным шрифтом). Да Да Да Да Да Да
<del> Перечёркнутый (удалённый) текст Да Да Да Да Да Да
<dfn> Используется, когда в документе упоминается новый термин или слово (первое и поясняемое употребление). По умолчанию, оно выделяется курсивом. Да Да Да Да Да Да
<em> Экспрессивно-эмоциональное выделение текста Да Да Да Да Да Да
<font> Не поддерживается в HTML5.Определяет цвет, размер и шрифт для текста. Используйте CSS вместо данного элемента. Да Да Да Да Да Да
<i> Курсивное начертание текста Да Да Да Да Да Да
<ins> Подчёркнутый текст, вставленный в документ. Да Да Да Да Да Да
<kbd> Вводимые пользователем нажатия клавиш или текст, набираемый на клавиатуре. Да Да Да Да Да Да
<mark> Выделенный/подсвеченный текст. 6.0 4.0 11.1 5.0 9.0 12.0
<meter> Предназначен для отображения скалярной величины в заданном диапазоне, или же для графического представления дробного числа. Для использования данного тега должно быть известно максимальное значение. 8.0 6.0 11.0 6.0 Нет 13.0
<pre> Определяет предварительно отформатированный текст, т.е. текст, который был помещён внутрь тега отобразится со шрифтом фиксированной ширины, и сохранит как пробелы, так и разрывы строк Да Да Да Да Да Да
<progress> Предоставляет обратную связь, сообщая о состоянии текущего процесса, отображает какая часть задачи выполнена. 8.0 16.0 11.0 6.0 10.0 12.0
<q> Используется для выделения коротких цитат (строчная цитата). Да Да Да Да Да Да
<rp> Определяет, что отображать браузеру, который не поддерживает тег <ruby> 5.0 38.0 15.0 5.0 5.5 12.0
<rt> Помещает полезный текст фуриганы в составе элемента <ruby> 5.0 38.0 15.0 5.0 5.5 12.0
<ruby> Используются для добавления фуриган (фонетические подсказки в японском языке, их также называют — руби или ёмигана). 5.0 38.0 15.0 5.0 5.5 12.0
<s> Определяет текст, который больше не является правильным или актуальным. Да Да Да Да Да Да
<samp> Результат вывода компьютерной программы или скрипта. Да Да Да Да Да Да
<small> Шрифт, который отображается меньшим размером(мелкий/юридический шрифт). Да Да Да Да Да Да
<strike> Не поддерживается в HTML5. Отображает перечеркнутый текст. Используйте вместо данного элемента тег <del> или тег <s> Да Да Да Да Да Да
<strong> Текст, которому придают особое значение (важный текст). Да Да Да Да Да Да
<sub> Текст с нижним индексом. Да Да Да Да Да Да
<sup> Текст с верхним индексом. Да Да Да Да Да Да
<time> Тег временной разметки (семантическая разметка). 6.0 4.0 11.1 5.0 9.0 12.0
<tt> Не поддерживается в HTML5. Отображает шрифт моноширинным текстом. Используйте CSS вместо данного элемента. Да Да Да Да Да Да
<u> Содержит в себе текст, который должен стилистически отличаться от обычного текста, например слова с орфографическими ошибками или текст на другом языке. Да Да Да Да Да Да
<var> Математические/переменные величины. Да Да Да Да Да 12.0
<wbr> Предоставляет возможность указать браузеру, что при необходимости в этом месте можно сделать перенос строки (например, слишком длинное слово или URL). 1.0 3.0 11.7 4.0 Нет Да

Атрибуты

= Новинка в HTML5.

Атрибут Значение Описание
charset char_encoding Не поддерживается в HTML5.Задает набор символов связанного документа
coords coordinates Не поддерживается в HTML5.Задает координаты ссылки
download filename Указывает, что целевой объект будет загружен, когда пользователь щелкнет гиперссылку
href URL Указывает URL-адрес страницы, на которую переходит ссылка
hreflang language_code Указывает язык связанного документа
media media_query Указывает, какие носители/устройства оптимизированы для связанного документа
name section_name Не поддерживается в HTML5. Использовать глобальный
id attribute instead.Задает имя привязки
ping list_of_URLs Указывает список URL-адресов, разделенных пробелами, к которым, после ссылки, запросы POST с телом ping будут отправляться браузером (в фоновом режиме). Обычно используется для отслеживания.
rel alternate
author
bookmarkexternal
help
license
next
nofollow
noreferrernoopener
prev
search
tag
Указывает связь между текущим документом и связанным документом
rev text Не поддерживается в HTML5.Указывает связь между связанным документом и текущим документом
shape default
rect
circle
poly
Не поддерживается в HTML5.Задает форму ссылки
target _blank
_parent
_self
_topframename
Указывает, где открыть связанный документ
type media_type Указывает тип носителя связанного документа

Элементы и атрибуты HTML5

Последнее обновление: 08.04.2016

Прежде чем переходить непосредственно к созданию своих веб-страниц на HTML5, рассмотрим основные строительные блоки, кирпичики, из которых состоит веб-страница.

Документ HTML5, как и любой документ HTML, состоит из элементов, а элементы состоят из тегов. Как правило, элементы имеют открывающий и закрывающий тег,
которые заключаются в угловые скобки. Например:

<div>Текст элемента div</div>

Здесь определен элемент , который имеет открывающий тег и закрывающий тег .
Между этими тегами находится содержимое элемента div. В данном случае в качестве содержимого выступает простой текст «Текст элемента div».

Элементы также могут состоять из одного тега, например, элемент , функция которого — перенос строки.

<div>Текст <br /> элемента div</div>

Такие элементы еще называют пустыми элементами (void elements). Хотя я использовал закрывающий слеш, но его наличие согласно спецификации необязательно,
и равнозначно использованию тега без слеша: <br>

Каждый элемент внутри открывающего тега может иметь атрибуты. Например:

<div style="color:red;">Кнопка</div>
<input type="button" value="Нажать">

Здесь определено два элемента: div и input. Элемент имеет атрибут style. После знака равно в кавычках
пишется значение атрибута: . В данном случае значение «color:red;» указывает, что цвет текста будет красным.

Второй элемент — элемент input, состоящий из одного тега, имеет два атрибута: (указывает на тип элемента — кнопка) и (определяет
текст кнопки)

Существуют глобальные или общие для всех элементов атрибуты, как например, style, а есть специфические, применяемые к определенным элементам, как
например, type.

Кроме обычных атрибутов существуют еще булевые или логические атрибуты (boolean attributes). Подобные атрибуты могут не иметь значения. Например,
у кнопки можно задать атрибут :

<input type="button" value="Нажать" disabled>

Атрибут disabled указывает, что данный элемент отключен.

Глобальные атрибуты

В HTML5 есть набор глобальных атрибутов, которые применимы к любому элементу HTML5:

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

  • class: задает класс CSS, который будет применяться к элементу

  • contenteditable: определяет, можно ли редактировать содержимое элемента

  • contextmenu: определяет контекстное меню для элемента, которое отображается при нажатии на элемент правой кнопкой мыши

  • dir: устанавливает направление текста в элементе

  • draggable: определяет, можно ли перетаскивать элемент

  • dropzone: определяет, можно ли копировать переносимые данные при переносе на элемент

  • hidden: скрывает элемент

  • id: уникальный идентификатор элемента. На веб-странице элементы не должны иметь повторяющихся идентификаторов

  • lang: определяет язык элемента

  • spellcheck: указывает, будет ли для данного элемента использоваться проверка правописания

  • style: задает стиль элемента

  • tabindex: определяет порядок, в котором по элементам можно переключаться с помощью клавиши TAB

  • title: устанавливает дополнительное описание для элемента

  • translate: определяет, должно ли переводиться содержимое элемента

Но, как правило, из всего этого списка наиболее часто используются три: class, id и style.

Пользовательские атрибуты

В отличие от предыдущей версии языка разметки в HTML5 были добавлены пользовательские атрибуты (custom attributes). Теперь разработчик или создатель
веб-страницы сам может определить любой атрибут, предваряя его префиксом data-. Например:

<input type="button" value="Нажать" data-color="red" >

Здесь определен атрибут , который имеет значение «red». Хотя для этого элемента, ни в целом в html не существует подобного атрибута.
Мы его определяем сами и устанавливаем у него любое значение.

Одинарные или двойные кавычки

Нередко можно встретить случаи, когда в html при определении значений атрибутов применяются как одинарные, так и двойные кавычки. Например:

<input type='button' value='Нажать'>

И одинарные, и двойные кавычки в данном случае допустимы, хотя чаще применяются именно двойные кавычки. Однако иногда само значение атрибута может
содержать двойные кавычки, и в этом случае все значение лучше поместить в одинарные:

<input type="button" value='Кнопка "Привет мир"'>

НазадВперед

Создание форм и кнопок

<form></form> — создание форм на странице. С помощью HTML описывается только внешний вид, для выполнения функций требуется запуск соответствующих скриптов на сервере.
 

<button></button> — создаёт интерактивную кнопку. Внутри контейнера нужно поместить текст или изображение.
<select multiple name=»NAME» size=?></select> — формирует меню с поддержкой скроллинга.
<select name=»NAME»></select> — создаёт ниспадающее меню.

<option></option> — описывает каждый отдельный пункт меню.
<input> — формирует поля для добавления пользовательских данных.
<output> — выводит результаты вычислений, сделанных с помощью скрипта.

<label> — оформляет пометку для поля, созданного тегом <input>.

<textarea></textarea> — создаёт большие поля для ввода текста.

Когда полезен доступ к атрибутам?

Когда браузер читает HTML и создаёт DOM-модель, то он создаёт свойства для всех стандартных атрибутов.

Например, свойства тега описаны в спецификации DOM: .

Например, у него есть свойство . Кроме того, он имеет и другие свойства, общие для всех элементов, которые описаны в спецификации в .

Все стандартные свойства DOM синхронизируются с атрибутами, однако не всегда такая синхронизация происходит 1-в-1, поэтому иногда нам нужно значение именно из HTML, то есть атрибут.

Рассмотрим несколько примеров.

Синхронизация не гарантирует одинакового значения в атрибуте и свойстве.

Для примера, посмотрим, что произойдёт с атрибутом при изменении свойства:

Это происходит потому, что атрибут может быть любым, а свойство , , должно быть полной ссылкой.

Стало быть, если мы хотим именно то, что в HTML, то нужно обращаться через атрибут.

Есть и другие подобные атрибуты

Кстати, есть и другие атрибуты, которые не копируются в точности

Например, DOM-свойство имеет логическое значение , а HTML-атрибут – любое строковое, важно лишь его наличие

Работа с через атрибут и свойство:

Изменение некоторых свойств обновляет атрибут. Но это скорее исключение, чем правило.

Чаще синхронизация – односторонняя: свойство зависит от атрибута, но не наоборот.

Например, при изменении свойства атрибут не меняется:

То есть, изменение DOM-свойства на атрибут не влияет, он остаётся таким же.

А вот изменение атрибута обновляет свойство:

Эту особенность можно красиво использовать.

Получается, что атрибут хранит оригинальное (исходное) значение даже после того, как пользователь заполнил поле и свойство изменилось.

Например, можно взять изначальное значение из атрибута и сравнить со свойством, чтобы узнать, изменилось ли значение. А при необходимости и перезаписать свойство атрибутом, отменив изменения.

Базовые теги

<!—…—> — тег для добавления комментариев в документ. Помещённые внутри него теги не интерпретируются браузером.

<!DOCTYPE> — показывает браузеру тип документа, сообщает его версию и язык.
<html></html> — корневой тег, который сообщает браузеру, что это HTML-документ. Все остальные элементы помещаются внутри него.

<head></head>— контейнер, в который помещаются метаданные документа, не видимые пользователям, но считываемые поисковыми роботами: например, <title> или <style>.
<meta> — тег для оформления метаданных документа, используемых браузером для обработки страницы, а поисковиками — для индексации.

<body></body> — тег, обрамляющий видимую пользователям часть документа. Всё, что вы укажите внутри этого контейнера, отобразится на странице. Тег <body> имеет несколько атрибутов, позволяющих управлять цветами.

<body bgcolor=?> — цвет фона документа в формате RGB.

<body text=?> — цвет текста.

<body link=?> — цвет гиперссылок.

<body vlink=?> — цвет гиперссылок, по которым уже переходили.

<body alink=?> — цвет гиперссылок при нажатии.

<title></title>— метатег, который задаёт название страницы, отображаемое на вкладке браузера.
<header></header> — определяет содержимое блока с вводной информацией сайта или группой ссылок.

Итого

  • Атрибуты – это то, что написано в HTML.
  • Свойство – это то, что находится внутри DOM-объекта.

Таблица сравнений для атрибутов и свойств:

Свойства Атрибуты
Любое значение Строка
Названия регистрозависимы Не чувствительны к регистру
Не видны в Видны в

Синхронизация между атрибутами и свойствами:

  • Стандартные свойства и атрибуты синхронизируются: установка атрибута автоматически ставит свойство DOM. Некоторые свойства синхронизируются в обе стороны.
  • Бывает так, что свойство не совсем соответствует атрибуту. Например, «логические» свойства вроде , всегда имеют значение , а в атрибут можно записать произвольную строку.Выше мы видели другие примеры на эту тему, например .

Нестандартные атрибуты:

  • Нестандартный атрибут (если забыть глюки старых IE) никогда не попадёт в свойство, так что для кросс-браузерного доступа к нему нужно обязательно использовать .
  • Атрибуты, название которых начинается с , можно прочитать через . Эта возможность не поддерживается IE10-.

Для того, чтобы избежать проблем со старыми IE, а также для более короткого и понятного кода старайтесь везде использовать свойства, а атрибуты – только там, где это действительно нужно.

А действительно нужны атрибуты очень редко – лишь в следующих трёх случаях:

  1. Когда нужно кросс-браузерно получить нестандартный HTML-атрибут.
  2. Когда нужно получить «оригинальное значение» стандартного HTML-атрибута, например, .
  3. Когда нужно получить список всех атрибутов, включая пользовательские. Для этого используется коллекция .

Если вы хотите использовать собственные атрибуты в HTML, то помните, что атрибуты с именем, начинающимся на валидны в HTML5 и современные браузеры поддерживают доступ к ним через свойство .

Итого

  • Атрибуты – это то, что написано в HTML.
  • Свойства – это то, что находится в DOM-объектах.

Небольшое сравнение:

Свойства Атрибуты
Тип Любое значение, стандартные свойства имеют типы, описанные в спецификации Строка
Имя Имя регистрозависимо Имя регистронезависимо

Методы для работы с атрибутами:

  • – проверить на наличие.
  • – получить значение.
  • – установить значение.
  • – удалить атрибут.
  • – это коллекция всех атрибутов.

В большинстве ситуаций предпочтительнее использовать DOM-свойства. Нужно использовать атрибуты только тогда, когда DOM-свойства не подходят, когда нужны именно атрибуты, например:

  • Нужен нестандартный атрибут. Но если он начинается с , тогда нужно использовать .
  • Мы хотим получить именно то значение, которое написано в HTML. Значение DOM-свойства может быть другим, например, свойство – всегда полный URL, а нам может понадобиться получить «оригинальное» значение.