HTML-атрибуты: таблица глобальных атрибутов

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

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

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

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

Таблица 1. Глобальные атрибуты HTML

Атрибут	Описание, принимаемое значение
accesskey	Генерирует сочетания клавиш для доступа к текущему элементу. Состоит из разделенного пробелами списка символов. Браузер в первую очередь выбирает те клавиши, которые существуют на раскладке клавиатуры. Применяется к следующим элементам: <a>, <area>, <button>, <input>, <label>, <legend>, <textarea>. Принимаемые значения: перечень названий клавиш.
class	Определяет имя класса для элемента (используется для определения класса в таблице стилей). Принимаемые значения: имя класса.
contenteditable	Определяет, может ли пользователь редактировать содержимое (контент). Позволяет преобразовать любое поле HTML в редактируемый элемент. Принимаемые значения: true/false.
dir	Определяет направление текста контента в элементах <bdo> и <bdi>. Принимаемые значения: ltr/rtl/auto.
draggable	Определяет, может ли пользователь перетащить элемент. Принимаемые значения: true/false/auto.
hidden	Указывает на то, что элемент должен быть скрыт. Принимаемые значения: hidden.
id	Определяет уникальный идентификатор элемента. Принимаемые значения: id — идентификатор элемента.
lang	Определяет код языка содержимого (контента) в элементе. Принимаемые значения: код языка.
spellcheck	Указывает, подлежит ли содержимое элемента проверке орфографии и грамматики. Принимаемые значения: true/false.
style	Указывает на код CSS, применяемую для оформления элемента. Принимаемые значения: код CSS.
tabindex	Определяет порядок перехода к элементу при помощи клавиши TAB. Принимаемые значения: порядковый номер.
title	Определяет дополнительную информацию об элементе, задавая всплывающую подсказку для страницы. Принимаемые значения: текст.
translate	Разрешает или запрещает перевод текста внутри элемента. Принимаемые значения: yes/no.

HTML Справочник атрибутов

атрибуты	Принадлежность	Описание
accept	<input>	Указывает типы файлов, которые принимает сервер (только для type=»file»)
accept-charset	<form>	Указывает кодировки символов, которые будут использоваться для отправки формы
accesskey	Глобальные атрибуты	Указывает сочетание клавиш для активации / фокусировки элемента
action	<form>	Указывает, куда отправлять данные формы при отправке формы
align	Не поддерживается в HTML 5.	Задает выравнивание в соответствии с окружающими элементами. Используйте CSS
alt	<area>, <img>, <input>	Задает альтернативный текст, если исходный элемент не отображается
async	<script>	Указывает, что сценарий выполняется асинхронно (только для внешних сценариев)
autocomplete	<form>, <input>	Указывает, будет ли в элементе <form> или <input>, должен иметь автозаполнения enabled
autofocus	<button>, <input>, <select>, <textarea>	Указывает, что элемент должен автоматически получать фокус при загрузке страницы
autoplay	<audio>, <video>	Указывает, что воспроизведение аудио/видео начнется, как только оно будет готово
bgcolor	Не поддерживается в HTML 5.	Задает цвет фона элемента. Используйте CSS
border	Не поддерживается в HTML 5.	Задает ширину границы элемента. Используйте CSS
charset	<meta>, <script>	Указывает кодировку символов
checked	<input>	Указывает, что элемент <input> должен быть предварительно выбран при загрузке страницы (для type=»checkbox» или type=»radio»)
cite	<blockquote>, <del>, <ins>, <q>	Задает URL, который объясняет цитату / удаленный / вставленный текст
class	Глобальные атрибуты	Задает одно или несколько имен классов для элемента (ссылается на класс в таблице стилей)
color	Не поддерживается в HTML 5.	Задает цвет текста элемента. Используйте CSS
cols	<textarea>	Задает видимую ширину текстовой области
colspan	<td>, <th>	Указывает количество столбцов, которое должна охватывать ячейка таблицы
content	<meta>	Дает значение, связанное с http-equiv или атрибутом name
contenteditable	Глобальные атрибуты	Указывает, является ли содержимое элемента редактируемым или нет
contextmenu	Глобальные атрибуты	Задает контекстное меню для элемента. Контекстное меню появляется, когда пользователь щелкает правой кнопкой мыши на элементе
controls	<audio>, <video>	Указывает, что должны отображаться элементы управления аудио/видео (например, кнопка воспроизведения / паузы и т. д)
coords	<area>	Задает координаты области
data	<object>	Задает URL ресурса, используемого объектом
data-*	Глобальные атрибуты	Используется для хранения личных данных пользователя на странице или в приложении
datetime	<del>, <ins>, <time>	Указывает дату и время
default	<track>	Указывает, что трек должен быть включен, если предпочтения пользователя не указывают, что другой трек будет более подходящим
defer	<script>	Указывает, что сценарий выполняется после завершения синтаксического анализа страницы (только для внешних сценариев)
dir	Глобальные атрибуты	Задает направление текста для содержимого элемента
dirname	<input>, <textarea>	Указывает, что направление текста будет отправлено
disabled	<button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea>	Указывает, что указанный элементы элемент/группа должны быть отключены
download	<a>, <area>	Указывает, что целевой объект будет загружен при нажатии пользователем гиперссылки
draggable	Глобальные атрибуты	Указывает, является ли элемент перетаскиваемым или нет
dropzone	Глобальные атрибуты	Указывает, копируются, перемещаются или связываются перетаскиваемые данные
enctype	<form>	Указывает, как данные формы должны быть закодированы при отправке на сервер (только для method=»post»)
for	<label>, <output>	Определяет форму элемента(ов) метки/расчет обязан
form	<button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <select>, <textarea>	Задает имя формы элемент принадлежит
formaction	<button>, <input>	Указывает, куда отправлять данные формы при отправке. Только для type=»submit»
headers	<td>, <th>	Задает одну или несколько ячеек заголовков, с которыми связана ячейка
height	<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>	Задает высоту элемента
hidden	Глобальные атрибуты	Указывает, что элемент еще не релевантен или больше не имеет значения
high	<meter>	Задает диапазон, который считается высоким значением
href	<a>, <area>, <base>, <link>	Указывает URL страницы, на которую переходит ссылка
hreflang	<a>, <area>, <link>	Указывает язык связанного документа
http-equiv	<meta>	Предоставляет заголовок HTTP для информации / значения атрибута содержания
id	Глобальные атрибуты	Задает уникальный идентификатор элемента
ismap	<img>	Задает изображение в качестве серверной карты изображений
kind	<track>	Указывает тип текстовой дорожки
label	<track>, <option>, <optgroup>	Задает заголовок текстовой дорожки
lang	Глобальные атрибуты	Задает язык содержимого элемента
list	<input>	Относится к элементу <datalist>, который содержит предопределенные параметры для элемента <input>
loop	<audio>, <video>	Указывает, что аудио / видео будет начинаться снова, каждый раз, когда он будет завершено
low	<meter>	Определяет диапазон, который считается низким значением
manifest	<html>	Указывает расположение манифеста кэша документа
max	<input>, <meter>, <progress>	Задает максимальное значение
maxlength	<input>, <textarea>	Задает максимальное количество символов, разрешенных в элементе
media	<a>, <area>, <link>, <source>, <style>	Указывает, для какого носителя / устройства оптимизирован связанный документ
method	<form>	Задает метод HTTP, используемый при отправке данных формы
min	<input>, <meter>	Задает минимальное значение
multiple	<input>, <select>	Указывает, что пользователь может ввести несколько значений
muted	<video>, <audio>	Указывает, что аудиовыход видео должен быть отключен
name	<button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea>	Задает имя элемента
novalidate	<form>	Указывает, что форма не должна проверяться при отправке
onabort	<audio>, <embed>, <img>, <object>, <video>	Сценарий для запуска при прерывании
onafterprint	<body>	Сценарий, запускаемый после печати документа
onbeforeprint	<body>	Сценарий, выполняемый перед печатью документа
onbeforeunload	<body>	Скрипт будет выполняться, когда документ будет выгружен
onblur	Все видимые элементы.	Сценарий для запуска, когда элемент теряет фокус
oncanplay	<audio>, <embed>, <object>, <video>	Сценарий для запуска, когда файл готов к запуску воспроизведения (когда он достаточно буферизован, чтобы начать)
oncanplaythrough	<audio>, <video>	Скрипт должен быть запущен, когда файл может быть воспроизведен до конца без паузы для буферизации
onchange	Все видимые элементы.	Скрипт, запускаемый при изменении значения элемента
onclick	Все видимые элементы.	Скрипт, запускаемый при щелчке по элементу
oncontextmenu	Все видимые элементы.	Скрипт, запускаемый при вызове контекстного меню
oncopy	Все видимые элементы.	Скрипт, запускаемый при копировании содержимого элемента
oncuechange	<track>	Сценарий, который будет выполняться при изменении ключа в элементе <track>
oncut	Все видимые элементы.	Скрипт, запускаемый при вырезании содержимого элемента
ondblclick	Все видимые элементы.	Скрипт, запускаемый при двойном щелчке по элементу
ondrag	Все видимые элементы.	Скрипт, запускаемый при перетаскивании элемента
ondragend	Все видимые элементы.	Скрипт, запускаемый в конце операции перетаскивания
ondragenter	Все видимые элементы.	Скрипт, запускаемый при перетаскивании элемента в допустимый целевой объект
ondragleave	Все видимые элементы.	Сценарий для запуска, когда элемент оставляет допустимый целевой объект отбрасывания
ondragover	Все видимые элементы.	Скрипт, запускаемый при перетаскивании элемента по допустимому целевому объекту
ondragstart	Все видимые элементы.	Сценарий для запуска в начале операции перетаскивания
ondrop	Все видимые элементы.	Скрипт, запускаемый при перетаскивании элемента
ondurationchange	<audio>, <video>	Сценарий для запуска при изменении длины носителя
onemptied	<audio>, <video>	Сценарий, который нужно запустить когда что-то плохое случается и архив внезапно недоступен (как непредвиденно разъединения)
onended	<audio>, <video>	Скрипт должен быть запущен, когда в СМИ уже дойдет до конца (полезное мероприятие для сообщения «спасибо за прослушивание»)
onerror	<audio>, <body>, <embed>, <img>, <object>, <script>, <style>, <video>	Сценарий для запуска при возникновении ошибки
onfocus	Все видимые элементы.	Сценарий для запуска, когда элемент получает фокус
onhashchange	<body>	Скрипт, запускаемый при изменении привязки URL
oninput	Все видимые элементы.	Сценарий для запуска, когда элемент получает пользовательский ввод
oninvalid	Все видимые элементы.	Сценарий для запуска при недопустимом элементе
onkeydown	Все видимые элементы.	Скрипт, запускаемый при нажатии пользователем клавиши
onkeypress	Все видимые элементы.	Скрипт, запускаемый при нажатии пользователем клавиши
onkeyup	Все видимые элементы.	Скрипт, запускаемый при нажатии пользователем клавиши
onload	<body>, <iframe>, <img>, <input>, <link>, <script>, <style>	Скрипт, запускаемый после завершения загрузки элемента
onloadeddata	<audio>, <video>	Сценарий для запуска при загрузке данных мультимедиа
onloadedmetadata	<audio>, <video>	Скрипт, запускаемый при загрузке метаданных (например, измерений и длительности)
onloadstart	<audio>, <video>	Скрипт должен быть запущен и файл начинает загружаться до загружаемого
onmousedown	Все видимые элементы.	Скрипт, запускаемый при нажатии кнопки мыши на элементе
onmousemove	Все видимые элементы.	Скрипт должен выполняться до тех пор, пока указатель мыши перемещается по элементу
onmouseout	Все видимые элементы.	Скрипт, запускаемый при перемещении указателя мыши из элемента
onmouseover	Все видимые элементы.	Скрипт, запускаемый при наведении указателя мыши на элемент
onmouseup	Все видимые элементы.	Скрипт, запускаемый при отпускании кнопки мыши над элементом
onmousewheel	Все видимые элементы.	Скрипт, запускаемый при прокрутке колесика мыши по элементу
onoffline	<body>	Скрипт, запускаемый при запуске браузера в автономном режиме
ononline	<body>	Скрипт, запускаемый при запуске браузера в оперативном режиме
onpagehide	<body>	Скрипт, запускаемый при переходе пользователя со страницы
onpageshow	<body>	Сценарий, выполняемый при переходе пользователя на страницу
onpaste	Все видимые элементы.	Сценарий, выполняемый при вставке пользователем некоторого содержимого в элемент
onpause	<audio>, <video>	Сценарий, запускаемый при приостановке носителя пользователем или программным способом
onplay	<audio>, <video>	Скрипт должен быть запущен, когда СМИ готовы начать играть
onplaying	<audio>, <video>	Сценарий для запуска, когда носитель фактически начал играть.
onpopstate	<body>	Скрипт, запускаемый при изменении истории окна.
onprogress	<audio>, <video>	Сценарий для запуска, когда браузер находится в процессе получения данных мультимедиа
onratechange	<audio>, <video>	Сценарий для запуска при каждом изменении скорости воспроизведения (например, когда пользователь переключается в режим замедленной или быстрой перемотки вперед).
onreset	<form>	Сценарий для запуска при нажатии кнопки сброса в форме.
onresize	<body>	Скрипт, запускаемый при изменении размера окна браузера.
onscroll	Все видимые элементы.	Скрипт, запускаемый при прокрутке полосы прокрутки элемента
onsearch	<input>	Сценарий, выполняемый при записи пользователем чего-либо в поле поиска (для <input=»search»>)
onseeked	<audio>, <video>	Сценарий, который будет выполняться, когда атрибут поиска имеет значение false, указывающее, что поиск закончился
onseeking	<audio>, <video>	Сценарий, который будет выполняться, если атрибут поиска имеет значение true, указывающее, что поиск активен
onselect	Все видимые элементы.	Скрипт, запускаемый при выборе элемента
onshow	<menu>	Скрипт, запускаемый при отображении элемента <menu> в виде контекстного меню
onstalled	<audio>, <video>	Скрипт должен быть запущен, когда браузер не может получить данные по какой-либо причине
onstorage	<body>	Сценарий для запуска при обновлении области веб-хранилища
onsubmit	<form>	Сценарий для запуска при отправке формы
onsuspend	<audio>, <video>	Сценарий, который будет выполняться при извлечении данных мультимедиа останавливается перед полной загрузкой по какой-либо причине
ontimeupdate	<audio>, <video>	Скрипт для запуска при изменении игровой позиции (например, когда пользователь быстро переходит к другой точке в СМИ)
ontoggle	<details>	Сценарий, запускаемый при открытии или закрытии пользователем элемента <details>
onunload	<body>	Скрипт, запускаемый при выгрузке страницы (или закрытии окна браузера)
onvolumechange	<audio>, <video>	Сценарий, который будет выполняться каждый раз, когда видео / аудио громкость была изменена
onwaiting	<audio>, <video>	Скрипт должен быть запущен, когда СМИ приостановлена, но возобновится (например, когда СМИ останавливается для буферизации данных)
onwheel	Все видимые элементы.	Скрипт, запускаемый при накатывании колесика мыши вверх или вниз по элементу
open	<details>	Указывает, что сведения должны быть видны (открыты) пользователю
optimum	<meter>	Указывает, какое значение является оптимальным для датчика
pattern	<input>	Задает регулярное выражение, по которому проверяется значение элемента <input>
placeholder	<input>, <textarea>	Задает короткую подсказку, описывающую ожидаемое значение элемента
poster	<video>	Указывает изображение, которое будет отображаться во время загрузки видео или до тех пор, пока пользователь не нажмет кнопку воспроизведения
preload	<audio>, <video>	Указывает, если автор считает, что аудио / видео должно быть загружено при загрузке страницы
readonly	<input>, <textarea>	Указывает, что элемент доступен только для чтения
rel	<a>, <area>, <link>	Задает связь между текущим документом и связанным документом
required	<input>, <select>, <textarea>	Указывает, что элемент должен быть заполнен перед отправкой формы
reversed	<ol>	Указывает, что порядок списка должен быть по убыванию (9,8,7…)
rows	<textarea>	Указывает видимое количество строк в текстовой области
rowspan	<td>, <th>	Задает количество строк, которое должна занимать ячейка таблицы
sandbox	<iframe>	Включает дополнительный набор ограничений для содержимого в <iframe>
scope	<th>	Указывает, является ли ячейка заголовка заголовком столбца, строки или группы столбцов или строк
scoped	<style>	Указывает, что стили применяются только к родительскому элементу этого элемента и дочерним элементам этого элемента
selected	<option>	Указывает, что параметр должен быть предварительно выбран при загрузке страницы
shape	<area>	Определяет форму области
size	<input>, <select>	Задает ширину в символах (для <input>) или указывает количество видимых параметров (для <select>)
sizes	<img>, <link>, <source>	Задает размер связанного ресурса
span	<col>, <colgroup>	Задает количество столбцов для интервала
spellcheck	Глобальные атрибуты	Указывает, следует ли проверять орфографию и грамматику элемента
src	<audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>	Задает URL файла мультимедиа
srcdoc	<iframe>	Задает содержимое HTML страницы для отображения в <iframe>
srclang	<track>	Задает язык текстовых данных дорожки (требуется, если kind=»subtitles»)
srcset	<img>, <source>	Задает URL изображения для использования в различных ситуациях
start	<ol>	Задает начальное значение упорядоченного списка
step	<input>	Задает допустимые интервалы номеров для поля ввода
style	Глобальные атрибуты	Задает встроенный стиль CSS для элемента
tabindex	Глобальные атрибуты	Задает порядок табуляции элемента
target	<a>, <area>, <base>, <form>	Указывает целевой объект для открытия связанного документа или отправки формы
title	Глобальные атрибуты	Задает дополнительные сведения об элементе
translate	Глобальные атрибуты	Указывает, следует ли переводить содержимое элемента
type	<button>, <embed>, <input>, <link>, <menu>, <object>, <script>, <source>, <style>	Указывает тип элемента
usemap	<img>, <object>	Задает изображение в качестве клиентской карты изображений
value	<button>, <input>, <li>, <option>, <meter>, <progress>, <param>	Задает значение элемента
width	<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>	Задает ширину элемента
wrap	<textarea>	Указывает, как текст в текстовой области должен быть обернут при отправке в форме

HTML — Атрибуты / ProgLang

Вы уже знакомы с несколькими html-тегами и их использованием, например теги заголовков <h2>, <h3>, или тег абзаца <p> и другие. До сих пор мы использовали их в простейшей форме, но большинство тегов в HTML могут иметь атрибуты, которые являются дополнительными битами информации.

Атрибут — используется для определения характеристик html-элемента и помещается внутри открытого тега элемента. Все атрибуты состоят из двух частей — это имя и значение:

• Имя — это свойство, которое Вы хотите установить. Например, элемент абзаца <p>, в примере ниже, содержит атрибут align, который Вы можете использовать для указания выравнивания абзаца на странице.
• Значение — это значение, которое Вы хотите установить для свойства. Значение атрибута всегда помещается в кавычки. В приведенном ниже примере показаны три возможных значения атрибута align: left, center и right.

Имена и значения атрибутов в HTML не зависят от регистра. Однако консорциум World Wide Web (W3C) рекомендует в своей рекомендации HTML 4 использовать атрибуты и значения атрибутов в нижнем регистре.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример атрибута align</title>
  </head>
  <body>
    <p align="left">Выровнено по левому краю.</p>
    <p align="center">Выровнено по центру.</p>
    <p align="right">Выровнено по правому краю.</p>
  </body>
</html>

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

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

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

Атрибут id

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

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

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

<p>Этот абзац объясняет, что такое HTML.</p>
<p>Этот абзац объясняет, что такое каскадная таблица стилей (CSS).</p>

Атрибут title

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

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример атрибута title</title>
  </head>
  <body>
    <h3 title="Привет самоучитель по HTML!">Пример заголовка</h3>
  </body>
</html>

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

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

Атрибут class

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

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

class="названиеКласса1 названиеКласса2 названиеКласса3"

Атрибут style

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

<!DOCTYPE html>
<html>
  <head>
    <title>Пример атрибута style</title>
  </head>
  <body>
    <p>Немного текста... </p>
  </body>
</html>

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

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

Атрибуты интернационализации

Существует три атрибута интернационализации в HTML, которые доступны для большинства (хотя и не для всех) элементов XHTML.

Атрибут dir

Атрибут dir — позволяет указать браузеру направление потока текста. Атрибут dir может принимать одно из двух значений, которые Вы можете видеть в следующей таблице:

Значение	Описание
ltr	Слева направо (значение по умолчанию).
rtl	Справа налево (для языков, таких как иврит или арабский, которые читаются справа налево).

Пример

<!DOCTYPE html>
<html dir="rtl">
  <head>
    <title>Пример направления потока текста</title>
  </head>
  <body>
    <p>Отображает направленный текст справа налево.</p>
  </body>
</html>

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

Когда атрибут dir используется в теге <html>, он определяет, как текст будет представлен во всем документе. При использовании в другом теге он управляет направлением текста только для содержимого этого тега.

Атрибут lang

Атрибут lang — позволяет указать основной язык, используемый в документе, но этот атрибут хранится в HTML только для обратной совместимости с более ранними версиями HTML. Этот атрибут был заменен атрибутом xml:lang в новых xhtml-документах.

Значения атрибута lang — это стандартные двухсимвольные языковые коды ISO-639. Проверьте коды ISO-639 для языка HTML, перейдите по ссылке для получения полного списка кодов языков.

Пример

<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Русский язык страницы</title>
  </head>
  <body>
    <p>Эта страница использует русский язык.</p>
  </body>
</html>

Атрибут xml:lang

Атрибут xml:lang — это XHTML замена для атрибута lang. Значение атрибута xml:lang должно быть ISO-639 кодом страны, которые указаны выше.

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

Ниже представлена таблица некоторых других атрибутов, которые можно легко использовать со многими html-тегами.

Атрибут	Опция	Функция
align	right, left, center	Горизонтальное выравнивание тегов.
valign	top, middle, bottom	Вертикально выравнивает тегов внутри html-элемента.
bgcolor	числовые, шестнадцатеричные, RGB значения	Помещает фоновый цвет за элемент.
background	URL	Помещает фоновое изображение за элемент.
id	определяется пользователем	Именование элемента для использования с каскадными таблицами стилей.
class	определяется пользователем	Классифицирует элемент для использования с каскадными таблицами стилей.
width	числовое или процентное значение	Задает ширину таблиц, изображений или ячеек таблицы.	height	числовое или процентное значение	Задает высоту таблиц, изображений или ячеек таблицы.	title	определяется пользователем	«Всплывающий» заголовок элементов.

Мы ещё увидим соответствующие примеры атрибутов при изучении других html-тегов (полный список html-тегов и связанных атрибутов).

Поделитесь:

HTML: Атрибуты элементов

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

Атрибуты состоят из пары: имя_атрибута=»значение». Имена атрибутов не чувствительны к регистру символов и могут быть записаны с любым сочетанием строчных и заглавных букв. Значение атрибута может состоять из текста, цифр и других символов (единственным исключением является символ амперсанда (&), его использование запрещено). Дополнительные ограничения на использование различных символов в значении атрибута зависят от способа записи значения. При указании нескольких атрибутов в одном элементе, они должны быть отделены друг от друга символом пробела. Порядок следования атрибутов не имеет значения.

<!-- при указании нескольких атрибутов для одного тега, они должны быть отделены
 друг от друга символом пробела -->
<p атр1="значение" атр2="значение">содержимое</p>

<!-- сочетание строчных и заглавных букв в имени атрибута -->
<p АтРибУт1="значение">содержимое</p>

Атрибуты могут быть записаны четырьмя различными способами:

Пустой атрибут

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

<input disabled>

Само присутствие в элементе логического атрибута представляет собой значение true (истина), а отсутствие этого атрибута — значение false (ложь). Если таковой атрибут присутствует, его значением может быть либо пустая строка, либо значение должно совпадать с именем атрибута.

<!-- все варианты работают одинаково, просто по-разному записаны -->
<input disabled>
<input disabled="">
<input disabled=disabled>

Ключевые слова и перечисляемые атрибуты

Некоторые атрибуты в качестве значения могут принимать одно ключевое слово из набора допустимых ключевых слов. Такие атрибуты называются перечисляемыми атрибутами. Каждое ключевое слово соответствует определённому состоянию (некоторые ключевые слова соответствуют одному и тому же состоянию, в этом случае они являются синонимами друг для друга).

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

<!-- правильный синтаксис -->
<p contenteditable="true">Hello!</p>

<!-- неправильный синтаксис -->
<p contenteditable>Hello!</p>

Примечание: пустая строка ("") может быть допустимым ключевым словом.

<!-- допустимое значение -->
<p contenteditable="">Hello!</p>

Атрибут со значением без кавычек

Синтаксис с опущенными кавычками вокруг значения атрибута подразумевает, что за именем атрибута, после знака «=», будет следовать значение атрибута, которое не должно содержать символов пробела, двойных кавычек («), апострофов (‘) и других видов кавычек, символов «=», угловых скобок (< и >), помимо этого, значение не должно являться пустой строкой.

<input value=yes>

Атрибут со значением в одиночных кавычках (апострофах)

Значение атрибута, взятое в одиночные кавычки, не должно содержать символы апострофов (‘), но допускается содержание двойных кавычек («).

<input type='checkbox'>

Атрибут со значением в двойных кавычках

Значение атрибута, окруженное двойными кавычками, может содержать любые символы, включая апострофы (‘), кроме двойных кавычек («).

<input name="be evil">

Примечание: один элемент никогда не должен содержать в себе два и более атрибутов, имеющих одинаковое имя.

С этой темой смотрят:

Виды HTML атрибутов: атрибуты событий или HTML события, универсальные HTML атрибуты.

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Язык HTML, если можно так сказать, состоит из двух элементов: HTML тэги и HTML атрибуты. Первые определяют структуру HTML документа, а вторые предназначены для того, чтобы сделать HTML элементы на страницах в браузере уникальными и непохожими друг на другу. В этой публикации мы как раз-таки и будем разбираться, как сделать элементы более уникальными при помощи HTML атрибутов.

Виды HTML атрибутов: атрибуты событий или HTML события, универсальные HTML атрибуты.

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

Для чего нужны HTML атрибуты

Содержание статьи:

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

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

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

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

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

Синтаксис HTML атрибутов

Когда мы говорили про синтаксис HTML и HTML тэги, мы упоминали о том, что есть еще и HTML атрибуты, давайте вспомним их синтаксис:

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

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

В более ранних публикация раздела HTML мы уже использовали HTML атрибуты  давайте приведем пример:

<divstyle=»width: 800px; margin: 0 auto;»>…</div>

<divstyle=»width: 800px; margin: 0 auto;»>…</div>

В данном случае для блока <div>мы задали два HTML атрибута: атрибут id и атрибут style, которым присвоили значения: значение атрибута id поможет нам «найти»  данный HTML элемент DIV, когда мы захотим изменить его отображение при помощи таблицы стилей или изменить его поведение при помощи JavaScript, например, воспользовавшись библиотекой jQuery.

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

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

Виды HTML атрибутов

HTML атрибуты, как и HTML тэги, и HTML элементы делятся на виды. С уверенностью можно выделить три вида HTML атрибутов:

• универсальные HTML атрибуты;
• HTML атрибуты событий;
• уникальные HTML атрибуты.

Универсальные HTML атрибуты имеют все (или практически все) HTML тэги. HTML атрибуты событий нужны для того, чтобы взаимодействовать с HTML элементами при помощи языков программирования, например, при помощи JavaScript или PHP.Уникальные HTML атрибуты свойственны только для определенных HTML элементов или для определенной группы HTML элементов.

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

Универсальные HTMLатрибуты

Универсальные HTML атрибуты есть у каждого HTML элемента на странице. Но это не означает, что если вы не задали универсальный HTML атрибут, то его нет, просто браузер из каких-то своих соображений подставит не заданному атрибуту значение по умолчанию. Давайте приведем список универсальный HTML атрибутов и дадим им краткую характеристику:

1. Универсальный HTML атрибут accesskey. Этот HTML атрибут позволяет взаимодействовать с HTML элементами при помощи заданного сочетания клавиш.
2. Универсальный HTML атрибут class. Этот атрибут позволяет задать класс для HTML элемента, чтобы потом взаимодействовать с элементом при помощи таблицы стилей или языка программирования.
3. Универсальный HTML атрибут contenteditable. Если HTML элементу задан такой атрибут, то пользователь может его редактировать.
4. Универсальный HTML атрибут contextmenu. Данный атрибут позволяет создать контекстное меню для HTML элемента на странице.
5. Универсальный HTML атрибут dir.Этот атрибут полезен для многоязычных сайтов, так как позволяет задать направление текста: слева направо или справа налево .
6. Универсальный HTML атрибут hidden. При помощи данного атрибута можно скрыть HTML элемент и его содержимое на странице.
7. Универсальный HTML атрибут id. Этот атрибут позволяет задать идентификатор для HTML элемента, идентификатор должен быть уникальным и не должен повторяться внутри HTML документа.
8. Универсальный HTML атрибут lang. Этот атрибут используется браузером, чтобы правильно отображать символы некоторых языков.
9. Универсальный HTML атрибут spellcheck. Данный атрибут позволяет сказать браузеру, чтобы тот проверял правописание.
10. Универсальный HTML атрибут style. Атрибут нужен чтобы задать CSS правила в HTML документе для конкретного элемента страницы.
11. Универсальный HTML атрибут tabindex. Не каждый пользуется мышью для работы, поэтому данный атрибут полезен, если вы хотите задать порядок переключения между HTML элементами страницы при помощи клавиши Tab.
12. Универсальный HTML атрибут title. Данный атрибут создает всплывающую подсказку при наведении курсора мыши на HTML элемент, текст подсказки – содержимое данного атрибута.
13. Универсальный HTML атрибут xml:lang. Этот атрибут по своему действию похож на lang, но для документов  xHTML.

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

HTMLатрибуты событий

HTML атрибуты событий обычно используются для того, чтобы вызвать какой-нибудь код на исполнение, когда пользователь совершает определенные действия, хотя это не всегда так. HTML атрибуты событий часто используются вместе с HTML формами, но и не только. Давайте приведем список HTML атрибутов событий или просто HTML событий:

1. HTML событие onblur. Событие потери фокуса на HTML элементе.
2. HTML событие onchange. Событие Изменения значения элемента формы.
3. HTML событие onclick. Событие щелчка левой кнопкой мыши на HTML элементе.
4. HTML событие ondblclick. Событие двойного клика левой кнопкой мыши на HTML элементе.
5. HTML событие onfocus. Событие происходит, когда HTML элемент получает фокус.
6. HTML событие onkeydown. Это событие означает, что клавиша нажата, но не отпущена.
7. HTML событие onkeypress. Это событие означает, что клавиша нажата и отпущена.
8. HTML событие onkeyup. Это событие означает, что клавиша отпущена.
9. HTML событие onload. Событие того, что документ загружен.
10. HTML событие onmousedown. Срабатывает, если нажата левая кнопка мыши.
11. HTM Lсобытие onmousemove. Такое событие сработает, когда будет перемещен курсор мыши.
12. HTML событие onmouseout. Этот атрибут начнет работать, когда курсор покидает элемент.
13. HTML событие onmouseover. Событие, которое означает, что курсор наводится на элемент.
14. HTML событие onmouseup. Событие начнет работать, когда левая кнопка мыши отпущена.
15. HTML событие onreset. Событие того, что форма очищена.
16. HTML событие onselect. Данное событие говорит о том, выделен текст в поле формы.
17. HTML событие onsubmit.Событие того, что форма отправлена.
18. HTML событие onunload Событие закрытия окна.

Это все HTML события или атрибуты событий в HTML.

Уникальные HTMLатрибуты

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

HTML Атрибуты

---

---

Атрибуты содержат дополнительную информацию об элементах HTML.

---

• Все HTML элементы могут иметь атрибуты
• Атрибуты содержат дополнительную информацию об элементе
• Атрибуты указываются в открывающем теге
• Атрибутами обычно бывают парными имя/значение: name="value"

---

Атрибут lang

Язык документа может быть объявлен в теге <html>

Язык объявляется с помощью атрибута lang.

Объявить язык важно для специальных приложений (программ чтения с экрана) и поисковых систем:

Первые две буквы указывают язык en. Если есть диалект, использовать еще две буквы US).

---

Атрибут title

Атрибут title добавляется к элементу <p>. Значение атрибута title отображается в виде всплывающей подсказки при наведении указателя мыши на параграф:

Пример

<p title=»Я подсказка»>
При наведении мыши на параграф, отобразится атрибут title в качестве подсказки.
</p>

Редактор кода »

---

Атрибут href

HTML-ссылки определяются с помощью тега <a>. Адрес ссылки указан в атрибуте href:

Вы узнаете подробнее о ссылках и тегах <a>, позже в этом учебнике.

---

Размер атрибута

HTML изображения, определенны с помощью тега <img>.

Имя файла источника src, размер изображения width и height — это все атрибуты:

Размер изображения указывается в пикселах: width="104" значит 104 пикселей по ширине экрана.

Вы узнаете больше о картинки и теге <img> позже в этом учебнике.

---

Атрибут alt

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

Значение атрибута может быть чтением с экрана. Таким образом, кто-то «видит», а слепой человек может»слышать» альтернативный текст на веб-сайте.

---

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

Стандарт HTML5 не требует строчные буквы в именах атрибутов.

Атрибут title может быть написан с прописными или строчными буквами, title или TITLE.

W3C в HTML рекомендует нижний регистр, а XHTML более строгие типы документов требует строчная буквы.

На SchoolsW3 мы всегда используем строчные буквы атрибутов.

---

Мы предлагаем: кавычки для значений атрибутов

Стандарт HTML5 не требует кавычек вокруг значений атрибутов.

Атрибуты href, могут быть написаны как:

W3C в HTML рекомендует кавычки, а XHTML более строгие типы документов требует кавычки.

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

Использования кавычеч являются наиболее распространенным. Не используя кавычки могут возникать ошибки.
На SchoolsW3 мы всегда использовать кавычки вокруг значений атрибутов.

---

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

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

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

<p title=’John «ShotGun» Nelson’>

Или наоборот:

<p title=»John ‘ShotGun’ Nelson»>

---

Краткое содержание

• Все HTML элементы могут иметь атрибуты
• Атрибут title предоставляет дополнительные информацию «подсказки»
• Атрибут href содержит адрес ссылки
• Атрибуты width и height предоставить информацию о размере изображений
• атрибут alt содержит текст для чтения с экрана
• На SchoolsW3 мы всегда использовать строчные имена атрибутов
• На SchoolsW3 мы всегда используем для значения атрибутов двойные кавычки

---

HTML Упражнения

Проверте себя с помощью упражнений

Упражнение:

Добавить «всплывающую подсказку» к нижеприведенному абзацу с текстом «О SchoolsW3».

<p =»О SchoolsW3″> О SchoolsW3 сайт веб-разработчика.</p>

Отправить ответ »

Начните упражнения

---

Атрибуты HTML

Ниже приведен алфавитный список некоторых атрибутов часто используются в HTML:

Атрибуты	Описание
alt	Указывает альтернативный текст для изображения, когда изображение не может быть отображено
disabled	Указывает, что элемент input должен быть отключен
href	Задает URL-адрес (веб-адрес) по ссылке
id	Задает уникальный идентификатор для элемента
src	Задает URL-адрес (веб-адрес) для изображения
style	Задает встроенный стиль CSS для элемента
title	Определяет дополнительную информацию об элементе (отображается как всплывающая подсказка)

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

---

Теги и атрибуты HTML

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

В пояснениях я буду приводить ссылки на спецификацию, а также на её перевод, о котором упоминал на странице HTML это... Упоминание о переводе А. Пирамидина имеется в официальной спецификации HTML, так что перевод можно считать качественным.

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

В среде HTML цепочка выполнения команд следующая:

1. Источниками команд являются теги – специальные конструкции языка HTML. При помощи них программист сообщает программе, которая будет обрабатывать документ, всю необходимую информацию, требующуюся для правильного отображения документа.
2. Команды выполняются программой – обозревателем. Обозреватели разных разработчиков обрабатывают документы с некоторыми отличиями, но в целом, результат примерно одинаков.
3. Команды обозреватель применяет к тексту и другой информации, содержащейся в обрабатываемом документе.

Теги выглядят следующим образом:

<html> <body> <head> <b> <p> <img> <object> и другие.

Чтобы увидеть (если интересно) внутренности html-страницы, в обозревателе кликните правой клавишей мыши и нажмите на пункт Искодный код или Код страницы (везде по-разному).

Ниже приведён фрагмент кода главной страницы портала mail.ru с 2530 по 2547 строку:

Теги (от английского tag) — ярлык, бирка, этикетка. Действительно, эти команды в угловых скобках можно сравнить с бирками, т.к. они закрепляются за фрагментами гипертекста и служат как бы инструкцией, поясняющей интенет-обозревателю, что с этим фрагментом необходимо сделать. Теги обозначаются латинскими символами, заключёнными в угловые скобки.

Полный перечень тегов можно найти в спецификации HTML. Их там чуть менее ста. Каждый отвечает за свои конкретные функции. Поэтому у некоторых может возникнуть резонный вопрос — неужели этого хватает для получения того многообразия оформления, которое на сегодняшний день присутствует в сети интернет?

Атрибуты тегов

Разумеется, если бы дело ограничивалось только этим набором, то в интернете в плане оформления царило бы скудное однообразие. Дело в том, что большинство тегов имеет настройки, как ваш монитор имеет настройки яркости и контраста. Использовать (регулировать) их можно при помощи атрибутов тегов, а диапазон (или значения) этих настроек указан в спецификации для каждого тега отдельно. Теперь немного о том, как это выглядит:

 
<тег атрибут="значение" атрибут2="значение" >
  


<img alt="комментарий" src="mestopolozhenie_kartinki">
 
alt , src , width и height - атрибуты тега IMG.
 


<img alt="квадрат" src="files/attachment/images/txt.png">

Теперь изменим значения ширины, чтобы получить прямоугольник:

<img alt="прямоугольник"
            src="files/attachment/images/txt.png">

Каждому атрибуту (за редким исключением) необходимо присваивать значение, как в примере выше высота картинки имела значение сто. При этом следует сохранять синтаксис, то есть ставить знак равенства, кавычки и другие символы как того требует спецификация!

Сразу отмечу, что для некоторых тегов существуют обязательные атрибуты. Например, для тега <img> атрибут alt обязателен. В том случае, если изображение не удасться загрузить, необходимо будет передать пользователю информацию, которую предполагалось передать с помощью изображения. Эту информацию и указывает атрибут alt. В следующем примере я изменю путь к изображению, чтобы оно не грузилось и укажу альтернативный текст.

<img alt="тут должна быть картинка" src="some_path/txt.png">

Итак, атрибуты бывают:

1. Обязательные для некоторых тегов.
2. Необязательные.

Снова о тегах

Идём дальше. Надо кое-что добавить и о тегах — в языке HTML их два вида:

1. Строковые (inline). Их ещё называют инлайновые.
2. Блоковые (block).

Если мы заключим гипертекст в тег <p></p>, то на странице он сформируется в отдельный блок (так как это блоковый тег) и образует абзац текста. Абзацы на этой странице сформированы как раз таким образом. Пример ниже:

<p>Все заблуждаются в меру своих возможностей.</p>
 

Все заблуждаются в меру своих возможностей.

Теперь представьте, что текст в абзаце (блоке) надо некоторым образом оформить, не нарушая его целостность. Для этого используют inline-теги, которые производят действие над содержимым, но блока не образуют. Сделаем текст в следующем примере большим (тег <big></big>) и маленьким (тег <small></small>).

<p>Все <big>заблуждаются</big> в меру своих <small>возможностей.</small></p>

Все заблуждаются в меру своих возможностей.

Из всех тегов исключением являются разве что теги <ins></ins> и <del></del>. Эти двое могут работать как со строковыми, так и с блочными элементами. Вот что написано о них в спецификации:

Эти два элемента необычны для HTML тем, что могут обрабатывать элементы уровня блока или инлайн-элементы (но не те и другие вместе). Они могут содержать одно или более слов в параграфе или один или более элемент уровня блока, такой как параграфы, списки или таблицы. Спецификация HTML 4.01 в переводе Пирамидина А.

 По принципу работы теги тоже можно разбить на две категории. Одни производят действия над гипертекстом, другие служат для включения в гипертекст других элементов. Если брать для примера уже рассмотренные теги, то <p></p> производит действие над гипертекстом, формируя из него абзац, а тег <img> включает в гипертекст внешний объект, но на сам гипертекст повлиять не может. Теги, не влияющие непосредственно на гипертекст, называют пустыми (empty). Закрывающий тег у пустышек указывать запрещено!

К пустышкам относятся: <img>, <hr> (строит линию), <br> (переводит строку) и ряд других. Поэтому с закрывающими тегами возможны три варианта:

1. Закрывающий тег (</тег>) обязателен.
2. Закрывающий тег (</тег>) не обязателен.
3. Закрывающий тег (</тег>) запрещён.

Приведу ещё примеры для наглядности. Тег <a></a> необходимо закрывать, т.к. он делает заключённый в себя гипертекст гиперссылкой. Если его не закрыть, то весь документ после открывающего тега <а> будет выполнять роль гиперссылки (пока в тексте не встретится закрывающий тег </a> или открывающий <a>).

 

<p>Указываем <a href="#">ссылку</a> на другой <a href="#">документ</a></p>
 


<p>Указываем <a href="#">ссылку на другой <a href="#">документ</a></p>

Указываем ссылку на другой документ

Указываем ссылку на другой документ

Немного по-другому обстоят дела с тегами, не трбующими обязательной закрывающей части. К их числу можно отнести теги, создающие элементы таблицы: <tr> и <td>. Возьмём для примера таблицу:

<table>
  <tr>
    <td> содержимое первой ячейки </td>
    <td> содержимое второй ячейки </td>
  </tr>
</table>
   

   
<table>
  <tr>
    <td> содержимое первой ячейки
    <td> содержимое второй ячейки
</table>

Каждый новый элемент ячейки таблицы <td> автоматически закрывает предыдущий, даже если не указывать </td>. Ряд таблицы <tr> автоматически закроет тег тела таблицы </table>. А вот закрывать тег таблицы надо обязательно, в противном случае всё содержимое страницы, следующее за таблицей, станет её частью и попадёт под влияние табличных настроек.

Запрещается закрывать теги, не производящие действий над гипертекстом — <hr>, <img>, <br> и другие. Требования для каждого тега указаны в спецификации. Ниже мы рассмотрим — где именно что указано. Повторим. В языке HTML существует два вида тегов:

1. Строковые (inline). Их ещё называют инлайновые.
2. Блоковые (block).

Конечный (/закрывающий) тег может быть:

1. Закрывающий тег (</тег>) обязателен.
2. Закрывающий тег (</тег>) не обязателен.
3. Закрывающий тег (</тег>) запрещён.

атрибуты у тегов могут быть:

1. Обязательные.
2. Необязательные.

Эту информацию по каждому конкретному тегу можно получить в спецификации. Как ею пользоваться написано ниже. И ещё один важный момент касательно использования различных символов в HTML.

При html-верстке иногда приходится использовать символы, которые могут трактоваться двояко. Например, употребление символов ‘<‘ и ‘>’ будет расценено обозревателями как часть тега, то есть как служебный символ, а это не всегда так. Поэтому проблемные символы кодируются. Называются такие закодированные символы мнемониками. Список мнемоник можно посмотреть в спецификации.

Вложенность тегов

Теги могут быть вложенными друг в друга как матрёшки. При этом они делятся на родительские и дочерние элементы. Поясню на примере:

<ins>Элемент подчёркнутого текста является родительским
элементом для элемента <del>зачёркнутого текста</del> с наследованием.</ins>

Дочерние элементы наследуют характеристики родительских. Таким образом зачёркнутый текст будет также и подчёркнутым.

Элемент подчёркнутого текста является родительским элементом для элемента зачёркнутого текста с наследованием.

Главное помнить, что обе части тега (открывающая и закрывающая) должны быть вложены в один и тот же родительский элемент, опять же по аналогии с матрёшкой.

Использование спецификации

Официальной на данный момент (март 2012) является версия HTML 4.01, версия HTML 5.0 находится в активной разработке, но стандартом ещё не является, несмотря на многочисленные публикации в сети на тему HTML 5.

Теперь о том, как пользоваться спецификацией. Допустим, нас интересуют вышеупомянутые таблицы. Открываем краткое содержание и выбираем соответствующий пункт (№11) — Таблицы.

Открываем спецификацию, меню разделов:

Откроется меню элемента TABLE. Можно почитать введение и общую информацию по таблицам (лишней не будет). Далее следует непосредственно само описание тега <TABLE>.

Переходим по ссылке к подробному описанию — синтаксису и списку атрибутов.

Тут можно получить информацию по каждому атрибуту.

1. Требования закрывающего тега (</тег>). В данном случае начальный и конечный теги обязательны.
2. Названия атрибутов данного тега.
3. Список значений каждого атрибута.
4. Статус атрибута (Актуальный/Устаревший/Запрещённый).
5. Тип данных (значений) атрибута.
6. Список общих атрибутов, которые используются с любыми тегами.

Важное замечание. На скриншоте выше атрибут align имеет статус Deprecated (не рекомендован). Такой атрибут не будет работать (и будет ошибкой) в DOCTYPE Strict. Так что использовать deprecated-элементы я крайне не рекомендую. Статус любого элемента можно посмотреть в общем списке.

Уточнения по тегам:

1. Название тега.
2. Статус открывающего тега в документе html:
   
   • O — optional (не обязателен)
3. Статус закрывающего тега в документе html:
   
   • O — optional (не обязателен)
   • F — forbidden (запрещён)
4. Предполагается ли содержимое (гипертекст):
   
   • E — Empty (без содержимого)
5. Статус тега (D, L и F):
   
   • D — deprecated (не рекомендован).
   • L — loose (допускается в переходной спецификации Transitional).
   • F — Frameset (допускается в спецификации Frameset).
6. Комментарий, назначение тега.

Уточнения по атрибутам:

1. Название атрибута.
2. Принадлежность к тегу (группе тегов).
3. Варианты значений атрибута.
4. Обязательный/необязательный для указанного тега (группы тегов).
5. Статус атрибута (D, L и F)
   
   • D — deprecated (не рекомендован).
   • L — loose (допускается в переходной спецификации Transitional).
   • F — forbiden (запрещён).

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

Кроме всего прочего советую ознакомиться со следующими разделами:

Вообще информации по тегам достаточно много и на одной странице всё не уместишь. Но для того, чтобы разобраться самостаятельно при помощи спецификации и её перевода (у кого туго с английским), этого достаточно, я думаю. Для получения общего представления и более лёгкого восприятия — тоже. Далее практика и таблицы стилей.

Если материалы сайта оказались для вас полезными, можете поддержать дальнейшее развитие ресурса, оказав ему (и мне ) моральную и материальную поддержку.