Теги и атрибуты html5 описание. Используем собственные атрибуты в HTML5. Группировка элементов формы
Атрибуты обеспечивают дополнительную информацию об элементе, при этом они всегда определяются в начальном теге независимо от того парный это тег, либо одиночный.
В HTML существует ряд атрибутов, которые универсальны и могут применяться практически к любым тегам, поэтому входящие в эту группу атрибуты называются глобальными атрибутами .
Глобальные атрибуты будут часто встречаться в примерах этого учебника, предлагаю Вам бегло повторить те атрибуты, которые мы уже рассмотрели и ознакомиться с теми глобальными атрибутами, которые будут рассмотрены в ближайших статьях:
Вопросы и задачи по темеПеред тем как перейти к изучению следующей темы пройдите практическое задание:
Подсказка: не забудьте определить язык содержимого страницы и элементов, где это требуется. После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы его выполнили правильно.
Собственные атрибуты считаются одним из наиболее важных дополнений к HTML5, которое может играть главную роль в семантической веб-разработке. В нашем сегодняшнем руководстве мы представим вам практические примеры создания и использования собственных атрибутов данных в HTML5, включая все необходимые javascript-функции.
До появления HTML5 было возможно добавлять собственные атрибуты к элементам HTML и осуществлять к ним доступ посредством javascript, но если вы когда-либо пробовали это реализовать, то наверняка знаете о том, что в этом случае нам придется забыть о валидации кода. HTML5 предлагает нам возможность создавать и использовать собственные атрибуты элементов внутри валидных страниц.
Создание документа HTML5
Если у вас нет готового шаблона, над которым можно было бы поработать, то просто скопируйте предложенный код в HTML-файл:
/*functions here*/
Мы разместим наши элементы с использованием собственных атрибутов в теле документа, а функции javascript помогут нам осуществить к ним доступ, и расположены эти функции будут в головной секции документа.
Создание элемента
Давайте добавим элемент с простеньким контентом, и добавим собственный атрибут вместе с ID для того, чтобы иметь возможность идентифицировать этот элемент в javascript, использованном в демо:
Cotton Shirt
Как видно, собственный атрибут имеет форму «data-*» с именем (или именами) на ваше усмотрение после части «data-». Это единственный валидный способ применения собственных атрибутов в HTML5, так что не забудьте всегда начинать названия элементов с этого указателя, если вам хочется, чтобы страницы были валидными.
Конечно же, детали вашего собственного проекта будут диктовать, окажутся ли собственные атрибуты удобными для вас или нет, а также эти детали помогут вам выдумывать соответствующие имена элементов. Данный пример может быть использован для веб-сайта-магазина с розничной торговлей. Собственные атрибуты позволят вам обрабатывать элементы определенными способами в рамках кода javascript на странице. Например, когда вы используете функции анимационного отображения. Это действительно единственный рекомендуемый способ использования собственных атрибутов, если, конечно, в данной ситуации не существует уже заранее предназначенного стандартного HTML-атрибута.
Добавляем тестовую кнопку
Ваши собственные javascript-функции будут обрабатывать события на ваших страницах, но для наглядного примера добавьте представленную кнопку на страницу:
Кнопка проводит ID элемента в качестве параметра таким образом, чтобы javascript-функция могла обратиться к нему, и осуществить доступ к собственному атрибуту.
Получение атрибута
Самый распространенный способ осуществления доступа к атрибутам в javascript заключается в использовании getAttributes, что мы и сделаем в первую очередь. Добавьте следующую функцию в раздел со скриптами, расположенный в головной секции вашей страницы:
Function getElementAttribute(elemID) {
var theElement = document.getElementById(elemID);
var theAttribute = theElement.getAttribute("data-product-category");
alert(theAttribute);
}
Ради наглядности, мы приводим атрибут в готовность, но ваши собственные скрипты могут выполнять то, что необходимо вам.
Получение набора данных (dataset)
Как альтернативу DOM-методу «getAttributes», вы можете использовать наборы данных (dataset) элемента. Этот подход может быть более эффективным, особенно в тех случаях, когда ваш код повторяется в нескольких атрибутах. Тем не менее, браузерная поддержка данного метода пока еще очень плохая, что также важно учитывать. Данный код выполняет тот же самый процесс:
//var theAttribute = theElement.getAttribute("data-product-category");
var theAttribute = theElement.dataset.productCategory;
С помощью наборов данных вы можете избежать использования аффикса «data-» в начале имени атрибутов при обращении к ним javascript-функций, которые вам по прежнему придется включать в HTML. Учтите что, если имя вашего собственного атрибута имеет в себе дефис (который есть в имени нашего атрибута), то у нас здесь получается горбатый регистр, если доступ осуществляется посредством набора данных «data-product-category» становится «productCategory»).
Другие методы и функции
Мы рассказали вам о том, как создавать атрибуты, но ваши скрипты также могут создавать их или удалять. Следующий код демонстрирует нам процесс настройки атрибутов посредством стандартного javascript-метода и набора данных в качестве альтернативы:
//DOM method
theElement.setAttribute("data-product-category", "sale");
//dataset version
theElement.dataset.productCategory = "sale";
Для того чтобы убрать атрибут, вы также можете использовать либо набор данных, либо DOM-метод:
//DOM method
theElement.removeAttribute("data-product-category");
//dataset version
theElement.dataset.productCategory = null;
Вывод
Внедрение собственных атрибутов в HTML5 – это, с технической точки зрения, не такой уж и сложный процесс, но при этом сама сложность возникает в том, каким образом было бы правильнее их применить в собственных проектах. В конце концов, запомните тот факт, что еще слишком рано полностью переходить на использование наборов данных, и если вы все-таки решите их использовать, то постарайтесь предоставить откат для браузеров, которые не поддерживают данную технологию.
Последнее обновление: 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 - язык гипертекстовой разметки. В его основе лежат так называемые теги. Теги - это некие элементы обвертки, задающие формат и свойства элементов веб-страницы. На одной странице мы собрали для вас актуальный справочник тегов HTML.
Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.
Список тегов HTMLНиже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.
