Прежде чем переходить непосредственно к созданию своих веб-страниц на HTML5, рассмотрим основные строительные блоки, кирпичики, из которых состоит веб-страница.
Документ HTML5, как и любой документ HTML, состоит из элементов, а элементы состоят из тегов. Как правило, элементы имеют открывающий и закрывающий тег, которые заключаются в угловые скобки. Например:
<div>Текст элемента div</div>
Здесь определен элемент div, который имеет открывающий тег <div> и закрывающий тег </div>.
Между этими тегами находится содержимое элемента div. В данном случае в качестве содержимого выступает простой текст "Текст элемента div".
Элементы также могут состоять из одного тега, например, элемент <br />, функция которого - перенос строки.
<div>Текст <br /> элемента div</div>
Такие элементы еще называют пустыми элементами (void elements). Хотя я использовал закрывающий слеш, но его наличие согласно спецификации необязательно, и равнозначно использованию тега без слеша: <br>
Каждый элемент внутри открывающего тега может иметь атрибуты. Например:
<div style="color:red;">Кнопка</div> <input type="button" value="Нажать">
Здесь определено два элемента: div и input. Элемент div имеет атрибут style. После знака равно в кавычках
пишется значение атрибута: style="color:red;". В данном случае значение "color:red;" указывает, что цвет текста будет красным.
Второй элемент - элемент input, состоящий из одного тега, имеет два атрибута: type (указывает на тип элемента - кнопка) и value (определяет
текст кнопки)
Существуют глобальные или общие для всех элементов атрибуты, как например, style, а есть специфические, применяемые к определенным элементам, как например, type.
Кроме обычных атрибутов существуют еще булевые или логические атрибуты (boolean attributes). Подобные атрибуты могут не иметь значения. Например,
у кнопки можно задать атрибут disabled:
<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" >
Здесь определен атрибут data-color, который имеет значение "red". Хотя для этого элемента, ни в целом в html не существует подобного атрибута.
Мы его определяем сами и устанавливаем у него любое значение.
Нередко можно встретить случаи, когда в html при определении значений атрибутов применяются как одинарные, так и двойные кавычки. Например:
<input type='button' value='Нажать'>
И одинарные, и двойные кавычки в данном случае допустимы, хотя чаще применяются именно двойные кавычки. Однако иногда само значение атрибута может содержать двойные кавычки, и в этом случае все значение лучше поместить в одинарные:
<input type="button" value='Кнопка "Привет мир"'>