Атрибуты HTML-тегов. Глобальные атрибуты HTML Атрибуты форм HTML5

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

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

Как писать атрибуты?

Атрибуты - зарезервированные слова (как и теги, только без угловых скобок), значения же их могут быть разными. Так же, как и теги, атрибуты со значениями рекомендуется писать маленькими буквами, хотя браузерам, в общем-то, безразлично - это просто правило хорошего тона: по-русски ведь ТОЖЕ НЕ ПРИНЯТО ПИСАТЬ ПРИ ВКЛЮЧЕННОМ CAPS LOCK. А чем HTML хуже?

Значения с атрибутами записываются в таком формате:

Атрибут=”значение” lang=”en”

Писать атрибуты всегда нужно внутри открывающего тега, после зарезервированного слова.

Абзац

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

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

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

accesskey позволяет задать сочетание клавиш для доступа к определённому объекту страницы. Например, вы можете сделать так, чтобы с помощью комбинации клавиш Alt+1 пользователь переходил по определённой ссылке. Таким образом разработать систему клавишной навигации.

В качестве значения атрибута могут выступать цифры 0-9 или буквы латинского алфавита:

Ссылка будет открываться по нажатию сочетания клавиш с единицей

class позволяет связать тег с заранее заданным с помощью CSS оформлением. Использование атрибута позволяет существенно уменьшить код, ведь вместо того, чтобы повторять ввод одного и того же блока CSS, можно просто ввести имя соответствующего ему класса.
С помощью contenteditable можно разрешить пользователю редактировать любой элемент HTML-страницы: удалять, вставлять, изменять текст. Этот же атрибут даёт возможность редактирование и запретить. Значения имеет всего два: true - правку разрешить, false - запретить.
При помощи атрибута contextmenu вы можете наделить любой элемент документа уникальными пунктами контекстного меню на своё усмотрение. Само меню создаётся в теге , а атрибуту contextmenu присваивается его идентификатор.
dir определяет направление текста: слева направо (ltr) или справа налево (rtl) .
draggable позволяет запретить (false) или разрешить (true) пользователю перетаскивать наделённый этим атрибутом элемент страницы.
dropzone указывает браузеру, что делать с перетаскиваемым элементом: копировать (значение copy ), перемещать (move ) или создать на него ссылку (link) .
hidden - атрибут, позволяющий скрыть содержимое элемента, чтобы оно не отображалось в браузере. Если атрибуту задано значение false, объект отображается, true - скрывается.
id задаёт идентификатор элемента - своего рода имя, которое нужно для простой смены стиля объекта, а также для того, чтобы к нему могли обращаться скрипты. Значением атрибута и будет его имя. Начинаться оно должно обязательно с латинской буквы, и может содержать цифры, буквы всё того же латинского алфавита (большие и маленькие), а также символы дефиса (-) и подчёркивания (_) . Русских букв содержать не может.
lang помогает браузеру понять, на каком языке написан контент, и задать ему соответствующий стиль (например, в языках могут использоваться разные кавычки). Значениями выступают коды языков (русский - ru , английский - en и т. п.).
spellcheck включает (true) или отключает (false) проверку правописания. Особенно полезно использовать атрибут в тегах полей форм, куда текст будет вводить пользователь.
style позволяет задать оформление элемента с помощью CSS-кода.
tabindex даёт возможность определить, сколько раз пользователю придётся нажать клавишу Tab, чтобы фокус получил объект с этим атрибутом. Количество нажатий определяет значение атрибута - целое положительное число.
title - всплывающая подсказка, которая появится, если подвести мышку к элементу и на некоторое время оставить её неподвижной. Строка в значении и будет подсказкой.

translate разрешает (yes) или запрещает (no) перевод содержимого тега.
align задаёт выравнивание элемента. Например, с его помощью можно выровнять текст по левому краю (значение left ), по правому краю (right ), по центру (center) или по ширине (justify) . Для изображений (тег ) также доступно выравнивание по верхней границе самого высокого элемента строки (top ), по нижней границе (bottom) , а значение middle делает так, что средняя линия картинки совпадает с базовой линией строки.

Стоит иметь в виду, что использовать атрибут align не рекомендуется, а выравнивать текст лучше с помощью CSS.

Пример использования атрибутов

В качестве примера рассмотрим строку HTML-кода:

Этот текст можно редактировать

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

Разберём каждый элемент строки.

- открывающий тег контейнера, хранящего абзац.

- закрывающий тег.

Между символами > и < расположен текст Этот текст можно редактировать. Это - надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.

contenteditable =”true ” - это и есть атрибут и его значение. Помните, как в школе: x=3. Так и здесь: contenteditable =”true ”. Атрибут contenteditable задаёт, сможет ли пользователь редактировать содержимое элемента, значение true , написанное в кавычках через знак равно, редактирование разрешает:

Атрибут=”значение” contenteditable=”true”

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

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

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

Текст элемента div

Здесь определен элемент div , который имеет открывающий тег

и закрывающий тег

. Между этими тегами находится содержимое элемента div. В данном случае в качестве содержимого выступает простой текст "Текст элемента div".

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

Текст
элемента div

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

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

Кнопка

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

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

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

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

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

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

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

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

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

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

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

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

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

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

accesskey

Атрибут accesskey используется браузерами в качестве руководства для создания сочетания клавиш, активирующее элемент или переводящее на него фокус.

Примечание: до HTML5 атрибут accesskey можно было использовать только со следующими тегами: , ,