Прошло несколько лет с тех пор как был анонсирован первый черновик стандарта разметки web-страниц HTML5. И за это время создалось не так много сайтов на HTML5, хотя все современные браузеры уже поддерживают данный стандарт. По состоянию на декабрь 2011 года стандарт все еще находится в состоянии разработки.
В HTML5 добавляет много новых синтаксических особенностей – <video>, <audio>, <header> и <canvas>. Эти элементы разработаны для того, чтобы сделать проще внедрение и управление графическими и мультимедийными объектами в вебе без необходимости обращаться к собственным плагинам и API. Другие новые элементы, такие как <section>, <article>, <header> и <nav> разработаны для того, чтобы обогащать семантическое содержимое документа (страницы).
Новые теги HTML5
- 1. Теги разделов (article, aside, footer, header, hgroup, nav, section)
- 2. Теги группировки контента (figure, figcaption)
- 3. Теги для семантического выделения текста (bdo, mark, time, ruby, rt, rp, wbr)
- 4. Теги для вставки контента (audio, video, canvas, embed, source)
- 5. Теги для элементов форм (datalist, keygen, output, progress, meter)
- 6. Интерактивные элементы (details, summary, command, menu)
| Тег | Краткое описание |
|---|---|
| <article> | Определяет статью |
| <aside> | Определяет контент в стороне от основного контента страницы |
| <audio> | Определяет аудио контент |
| <canvas> | Определяет графику |
| <command> | Определяет командную кнопку |
| <datagrid> | Определяет данные в упорядоченный список |
| <datalist> | Определяет выпадающий список |
| <datatemplate> | Определяет шаблон данных |
| <details> | Определяет детали элемента |
| <dialog> | Определяет диалог (разговор) |
| <eventsource> | Определяет цель события, отправляемого по серверу |
| <figure> | Определяет группу медиа-контента, и их подписи |
| <footer> | Определяет нижний колонтитул для раздела или страницы |
| <header> | Определяет область заголовка раздела или страницы |
| <mark> | Определяет выделенный текст |
| <meter> | Определяет измерения в течение заранее определенного диапазона |
| <nav> | Определяет навигационные ссылки |
| <nest> | Определяет вложенную точку в шаблоне данных |
| <output> | Определяет некоторые виды результата |
| <progress> | Определяет ход выполнения задачи любого рода |
| <rule> | Определяет правила для обновления шаблонов |
| <section> | Определяет раздел (секцию) |
| <source> | Определяет медиа-ресурсы |
| <time> | Определяет дату/время |
| <video> | Определяет видео |
Неподдерживаемые теги:
| Тег | Краткое описание |
|---|---|
| <acronym> | Не поддерживается. Определяет акроним |
| <applet> | Не поддерживается. Определяет апплет |
| <basefont> | Не поддерживается. Используетя вместо CSS для задания шрифта |
| <big> | Не поддерживается. Определяет большой текст |
| <center> | Не поддерживается. Определяет текст по центру |
| <dir> | Не поддерживается. Определяет список директорий |
| <frame> | Не поддерживается. Определяет фрейм |
| <frameset> | Не поддерживается. Определяет набор фреймов |
| <isindex> | Не поддерживается. Определяет поисковый индекс в документе |
| <noframes> | Не поддерживается. Определяет секцию, не поддерживающую фрейм |
| <s> | Не поддерживается. Определяет зачеркнутый текст |
| <strike> | Не поддерживается. Определяет зачеркнутый текст |
| <tt> | Не поддерживается. Определяет телетайп текст |
| <u> | Не поддерживается. Определяет подчеркнутый текст |
| <xmp> | Не поддерживается. Определяет выровненный текст |
Список атрибутов HTML5
| Атрибут | Значение | Краткое описание |
|---|---|---|
| contenteditable | true false |
Определяет, может ли пользователь редактировать содержимое (контент) |
| contextmenu | menu_id | Определяет контекстное меню элемента |
| draggable | true false auto |
Определяет, может ли пользователь перетащить элемент |
| irrelevant | true false |
Определяет, что элемент не имеет значения. Элемент, имеющий значение не отображается |
| ref | URL / id | Определяет ссылку на другой документ / часть документа (используется только тогда, когда значение атрибута установлено) |
| registrationmark | reg_mark | Определяет зарегистрированный знак элемента |
| template | URL / id | Определяет ссылку на другой документ / часть документа, которые должны быть применены к элементу |
Структура разметки страницы в HTML5
При использовании обычной структуры страницы сайта можно выделить несколько типичных блоков, описываемых тегом div с соответствущим классом (<div class="header">, <div class="nav">, <div class="aside">, <div class="section">, <div class="footer"> и пр.).
При использовании верстки страницы с применением HTML5, эти блоки описываются структурными тегами <header>, <nav>, <aside>, <section>, <footer> и пр., что очень упрощает жизнь разработчикам. Данные теги являются структурными эквивалентами и они делают разметку более наглядной и простой в понимании. Также, по умолчанию, они являются инлайновыми, поэтому их надо cделать блочными с помощью display:block.
Данные теги важно применять правильно. Чтобы не запутаться когда и какой применять, в сети существует замечательный ресурс http://html5doctor.com/, а также можно воспользоваться следующим алгоритом:
Все современные браузеры (Опера, Сафари, Хром, Мозила, ИЕ9+) уже имеют поддержку HTML5. Для браузеров IE8 и меньше следует подключать javascript html5shiv, который "научит" их понимать новые теги. Код для его подключения ниже:
<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
В верстке макетов при создании сайтов мы перешли на использование нового стандарта HTML5. Если вы хотите заказать сайт или отдельно верстку сайта, можете оставить заявку, написав по любому из адресов, указанных на странице контактов или через форму обратной связи. Будем рады сотрудничеству!
В абзаце:
“Все современные браузеры (Опера, Сафари, Хром, Мозила, ИЕ9) уже имеют поддержку HTML5. Для браузеров IE8 и меньше следует подклачать javascript html5shiv, который “научит” их понимать новые теги. Код для его подключение ниже:”
я бы исправил описку (скорей всего) “подклачать” на (скорей всего) “подключать”.
С уважением Владимир.
спасибо! )
Сенкс. Интересно, и вообще полезный у Вас блог
Спасибо за статью.. Жаль что нет поддержки таблиц. я так привык к им. С дивами работать не могу(
ну как, могу в смысле разружать контентаяксом и т.д. а вот позиционировать не могу(
делаю обычно так. Весь дизайн в таблицах (таблицей разделяю хидер, меню, маин и футер.) а внутри какой то ячейки, допустим в меин ячейку, помещаю див и в него аяксом гружу контент.
Без таблиц не получается, убегают от меня дивы(( те что при проектировании были подрят, при заполнении данных, один из дивов расположенный допустим слева от меню убегает под меню.. Без таблиц никак(