HTML 5. Что нового?

HTML5 (англ. HyperText Markup Language, 5 version) — язык, предназначенный для структурирования и представления содержимого сети Интернет, а также основная технология, которая используется во всемирной паутине. Это пятая версия HTML-стандарта (стандарт был создан в 1990 г. и его последней версией являлся HTML4, стандартизированный в 1997 г.), который находится в процессе разработки в состоянии на ноябрь 2011 г. Основной целью 5-й версии является улучшение языка, поддержание работы с новейшими мультимедийными приложениями, и при этом сохранение читабельности кода для человека и ясности исполнения для компьютеров и устройств (веб-браузеров, синтаксических анализаторов и т.д.). HTML5 включает в себя как HTML 4, так и XHTML 1, а также DOM2HTML (особенно JavaScript).

HTML5

 

Введение в HTML 5

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

Об атрибутах HTML 5

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

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

Некоторые свойства остаются неизменными

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

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

class — определяет имя стиля в таблице стилей CSS, который будет использоваться.

dir – показывает направление (либо слева направо ltr или справа налево rtl).

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

lang – задает язык, используемый для элемента. Языки указаны с учетом конкретных кодов. Вы можете найти список кодов ISO на веб-сайте w3cSchools.com.

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

tabIndex – задает индекс табуляции для элемента. Это позволяет разработчику настраивать табуляцию для конкретной страницы.

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

Новшества

Глобальные атрибуты HTML 4 обладают простотой в своем наименовании и функционировании. В HTML 5 не так просто определить функцию атрибута по его названию. Это связано с тем, что «глобальный» атрибут был приуменьшен другим, более глобальным, что делает некоторые атрибуты запутаннее.

· contenteditable — атрибут, функции которого предполагает его наименование. Он определяет, может ли пользователь редактировать содержимое элемента. Опции этого атрибута в основном TRUE или FALSE, если только элемент не имеет родителя, который позволяет наследовать третий вариант значения. Этот атрибут является одним из тех исключений, о которых упоминалось выше, поскольку он не имеет смысла, например с элементом изображения. Его целесообразнее использовать с параметрами, которые позволят пользователю редактировать содержание в пределах определенной части страницы. Данный атрибут был реализован в большинстве современных браузеров. Вот хороший пример contenteditable: http://html5demos.com/contenteditable.

· contextmenu — используется для определения меню, которое соответствует данному элементу. Значение должно быть именем ID допустимым элементом <menu> на странице. Главная цель – предоставить выбор меню, которое выполняет определенные задачи для конкретного элемента. Например, изображение может иметь меню с вариантами «увеличить» и «уменьшить».

· data – это один из моих любимых новых «глобальных» атрибутов. Во-первых, он по-настоящему глобальный и применяется ко всем элементам. В основном это атрибут пользовательского атрибута. Он позволяет разработчику добавлять по собственному усмотрению столько пользовательских атрибутов, сколько ему захочется, к любому элементу, добавив data- перед пользовательским атрибутом так: data-myattribute = «something». Очень полезно.

· draggable — позволит Вам определить элемент, как перетаскиваемый из одного места страницы в другое. Варианты — истина, ложь и авто. Конечно, это не значит что мы просто устанавливаем атрибут элемента draggable=«true». Придется обрабатывать события перетаскивания, а также писать некоторые джава-скрипты, чтобы функциональность перетаскивания работала как следует. Вот пример того, как работает перетаскивание: http://ljouanneau.com/lab/html5/demodragdrop.html (Используйте Firefox)

· hidden — это еще один поистине глобальный набор атрибут в нашем списке. Hidden скрывает элемент из стиля определение атрибута. Параметр любого элемента hidden = «hidden» сохраняет элемент скрытым (он не будет отображаться).

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

· itemprop — используется в рамках item (см. выше) для дальнейшего определения элементов внутри атрибута item. Например, и item может иметь заголовок и span элемент:

<section item>

<h2 itemprop=”articletitle”> HTML 5 Global Attributes </h2>

<p> written by <span itemprop=”author”> Author </span>.</p>

</section>

· spellcheck – этот атрибут позволяет определить должен ли элемент быть проверенным на наличие орфографических и грамматических ошибок или нет. Варианты — истина и ложь. Если пропустить spellcheck вообще, это будет равносильно ложному значению. Использование spellcheck не предполагает, что браузер будет удерживать пользователя до тех пор, пока не проверит правильность правописания и грамматики. Скорее всего, браузер предложит подсказки и выделит опечатками те места, где применимы ошибки. Реализация этого атрибута по-прежнему ограничена и немного странная, но идея, тем не менее, хорошая.

Заключение

Новые дополнения к глобальной системе атрибутов в HTML 5 только верхушка айсберга. Некоторые атрибуты, вероятно, будут приспособлены быстро, например data и draggable, в то время как для других (item и itemprop) сложно будет найти широкое применение.

Тем не менее, не стоит слишком серьезно это воспринимать. Реализация новых стандартов HTML 5 является медленным и непоследовательным процессом. Хотя некоторые браузеры, такие как Firefox и Safari добиваются постоянного прогресса в осуществлении HTML 5, другие, например Internet Explorer отстают от подобных новшеств.

Источник:  http://www.htmlgoodies.com/html5/tutorials/Whats-New-with-HTML-5-Global-Attributes-3875431.htm#fbid=k-f2z4NL_kU

Рекомендую ознакомиться: