Прошло уже более трех лет с момента, когда был анонсирован первый черновик спецификации стандарта разметки веб-страниц — HTML5, но до сих пор немного ресурсов на HTML5 и, наверное, лишь сотая доля верстальщиков используют HTML5 на практике, при верстке страниц сайта, хотя все современные браузеры поддерживают данный стандарт.
Немного лирики, via wiki. HTML5 — это пятая версия основного языка разметки веб-страниц, разработка которой началась еще в 2007 году. В настоящее время спецификация HTML5 находится в стадии разработки, закончить которую планируют в 2014 году. Все современные браузеры уже поддерживают основные элементы HTML5, за что им честь и хвала.
Прежде чем переходить к примерам верстки сайта на HTML 5, рассмотрим: теги, атрибуты и структуру HTML 5.
Полный список тегов HTML5
Для наглядности в таблице ниже представлен полный справочник тегов HTML, новые теги HTML 5 выделены.
Таблица 1. Справочник тегов HTML5
Тег
Краткое описание
Определяет комментарий
Определяет тип документа
Определяет гиперссылки
Определяет аббревиатуру
Не поддерживается. Определяет акроним
Определяет элемент с адресом
Не поддерживается. Определяет апплет
Определяет область внутри изображения карты
Определяет статью
Определяет контент в стороне от основного контента страницы
Определяет аудио контент
Определяет жирный текст
Определяет базовый URL для всех относительных ссылок на странице
Не поддерживается. Используетя вместо CSS для задания шрифта
Определяет направление отображения текста
Не поддерживается. Определяет большой текст
Определяет длинную цитату
Определяет элемент тела документа
Вставка одного разрыва строки
Определяет кнопку
Определяет графики
Определяет заголовок (подпись) таблицы
Не поддерживается. Определяет текст по центру
Определяет цитату или сноску на материал
Определяет, что текст является программным кодом
Определяет атрибуты для столбцов таблицы
Определяет групп столбцов таблицы
Определяет командную кнопку
Определяет данные в упорядоченный список
Определяет выпадающий список
Определяет шаблон данных
Определяет описание определения
Определяет удаленный текст
Определяет детали элемента
Определяет диалог (разговор)
Не поддерживается. Определяет список директорий
Определяет секцию (блок) в документе
Определяет определение термина
Определяет список определений
Определяет определение термина в списке
Определяет выделенный текст
Определяет внешний интерактивный контент или плагин
Определяет цель события, отправляемого по серверу
Определяет сгруппированный набор полей формы
Определяет группу медиа-контента, и их подписи
Устаревший. Определяет шрифт текста, размер и цвет
Определяет нижний колонтитул для раздела или страницы
Определяет форму
Не поддерживается. Определяет фрейм
Не поддерживается. Определяет набор фреймов
по
Определяет заголовок с 1 по 6 заголовок
Определяет информацию о документе
Определяет область заголовка раздела или страницы
Определяет горизонтальную линию
Определяет html документ
Определяет курсив
Определяет встроенный фрейм
Определяет изображение
Определяет поле ввода
Определяет вставленный (обновленный) текст
Не поддерживается. Определяет поисковый индекс в документе
Определяет текст, набранный на клавиатуре
Определяет метку для элемента формы
Определяет заголовок группы элементов формы
Определяет элемент списка
Определяет ссылку на ресурс
Определяет выделенный текст
Определяет изображение карты
Определяет список меню
Определяет мета-информацию
Определяет измерения в течение заранее определенного диапазона
Определяет навигационные ссылки
Определяет вложенную точку в шаблоне данных
Не поддерживается. Определяет секцию, не поддерживающую фрейм
Определяет секцию, не поддерживающую сценарий (скрипт)
Определяет внедренный объект
Определяет упорядоченный список
Определяет группу вариантов в раскрывающемся списке
Определяет вариант в раскрывающемся списке
Определяет некоторые виды результата
Определяет параграф (абзац)
Определяет параметр для объекта
Определяет выровненный (форматированный) текст
Определяет ход выполнения задачи любого рода
Определяет краткую цитату
Определяет правила для обновления шаблонов
Не поддерживается. Определяет зачеркнутый текст
Определяет образец программного кода
Определяет сценарий (скрипт)
Определяет раздел (секцию)
Определяет список для выбора
Определяет мелкий текст
Определяет медиа-ресурсы
Определяет раздел в документе
Не поддерживается. Определяет зачеркнутый текст
Определяет выделенный жирный текст
Определяет определение стиля
Определяет индексным текст
Определяет надстрочным текст
Определяет таблицу
Определяет тело таблицы
Определяет ячейку таблицы
Определяет область ввода текста
Определяет колонтитул таблицы
Определяет заголовок ячейки таблицы
Определяет заголовок таблицы
Определяет дату/время
Определяет название документа
Определяет строку таблицы
Не поддерживается. Определяет телетайп текст
Не поддерживается. Определяет подчеркнутый текст
Определяет неупорядоченный список
Определяет переменную
Определяет видео
Не поддерживается. Определяет выровненный текст
Из Таблицы 1 видим, что новых тегов достаточно много, некоторые из них уже ориентированы на динамический контент, что дает большое преимущество HTML 5 перед HTML 4. Все эти теги подробно рассмотрим в новых статьях.
Список атрибутов HTML5
В таблице ниже приведен список основных атрибутов HTML 5. Новые атрибуты и их значения выделены.
Таблица 2. Справочник атрибутов HTML5
Атрибут
Значение
Краткое описание
accesskey
character
Не поддерживается. Определяет сочетание клавиш для доступа к элементу
class
classname
Определяет имя класса для элемента (используется для определения класса в таблице стилей)
contenteditable
true
false
Определяет, может ли пользователь редактировать содержимое (контент)
contextmenu
menu_id
Определяет контекстное меню элемента
dir
ltr
rtl
Определяет направление текста контента в элементе
draggable
true
false
auto
Определяет, может ли пользователь перетащить элемент
id
id
Определяет уникальный идентификатор элемента
irrelevant
true
false
Определяет, что элемент не имеет значения. Элемент, имеющий значение не отображается
lang
language_code
Определяет код языка содержимого (контента) в элементе
ref
URL / id
Определяет ссылку на другой документ / часть документа (используется только тогда, когда значение атрибута установлено)
registrationmark
reg_mark
Определяет зарегистрированный знак элемента
style
style_definition
Определяет встроенный стиль элемента
tabindex
number
Определяет порядок перехода элемента
template
URL / id
Определяет ссылку на другой документ / часть документа, которые должны быть применены к элементу
title
text
Определяет дополнительную информацию об элементе
Структура HTML5
Различия между структорами в HTML4 и HTML5 показаны на рисунках:
Структура разметки HTML4
Структура разметки HTML5
Разница очевидна, HTML5 имеет семантический чистый код, структура HTML5 более легкая, гибкая и функциональная. Функциональные особенности структуры HTML5 рассмотрим в новых статьях.
Пример верстки сайта на HTML5
По сути, принцип верстки на HTML5 ничем не отличается от верстки на HTML4, единственное, на что стоит обратить внимание, что новые элементы (теги), показанные в структуре HTML5 — инлайновые (inline), поэтому сразу необходимо сделать их блочными для того, чтобы наш дизайн правильно отображался в браузере.
Так, нужен какой-то дизайн, который будем верстать. Для начала сделаем, пожалуй, самый простой макет, не нагруженный графикой и сложными элементами.
Начнем с HTML разметки. Итак, у нас есть header, навигационное меню — nav, контент или section, внутри снова section и article, правая часть — aside, а снизу footer.
Для того, чтобы была видна вложенность элементов HTML5 и где какой элемент находится я сделал для них тег с классом tag.
Графических элементов здесь нет, одна картинка, стили оформления и HTML5.
HTML код: Верстка сайта на HTML5.
Пример верстки сайта на HTML5 от DivMotive.ru
Пример верстки сайта на HTML5 от DivMotive.ru
<header>
<section>
Создание и разработка сайтов
<header>
Компания «DivMotive» предлагает комплекс высококачественных услуг по созданию, разработке и поддержке Интернет-ресурсов в сети на базе Систем управления сайтом (CMS).
К каждому проекту мы подходим индивидуально и выбираем оптимальный вариант для решения поставленных задач. Разработанный нами сайт будет отличаться оригинальным оформлением и функциональностью. При разработке веб-сайтов мы используем самые передовые технологии.
<article>
Веб-дизайн
<header>
Каждый сайт должен быть по-своему привлекателен. А первое, на что посетитель обращает внимание — это дизайн, т.е. все визуальное представление сайта, включая пиктограммы и иконки, шрифты, иллюстрации, и т.д.
От того, насколько дружественно и качественно разработан дизайн, зависит дальнейшее пребывание пользователя на Вашем сайте.
<article>
HTML верстка сайтов
<header>
Верстка макета (HTML верстка) — это процесс формирования веб-страницы, по средствам кода соответствующего языка разметки (HTML, XML и т.п.), так же состоящей из стилей оформления (CSS) и подгружаемых картинок и фонов, на которые специальным образом разбивается макет сайта, в соответствии с дизайном, как правило, в формате PSD.
<article>
<section>
<section>
Вот такой не замысловатый код у нас получился. Немного громоздко выглядит из-за текста, взятого с сайта, а так в качестве примера, думаю, самое оно.
Ну и последнее, что нам осталось сделать, это прописать стили оформления, чтобы все выглядело подобающим образом.
CSS код.
* {margin:0;padding:0;outline:none} /* обнуляем все элементы */ /* общие стили */ html {font-size:75%;height:100%} body {font:normal 1em/1.3 arial, helvetica, sans-serif;color:#333;height:100%;background:#f0f0f0} a {color:#2b82dc} a:hover {text-decoration:none} abbr {border-bottom:1px dotted #2b82dc;cursor:help} h1, h2, h3, h4, h5, h6 {font-weight:normal;line-height:1;margin:4px 0 12px;color:#2ca9e4} h1 {font-size:1.88em} p {text-align:justify;word-spacing:.1ex;line-height:1.6;margin-bottom:1em} ul {list-style:none} ol {list-style-position:inside} header, nav, section, article, aside, footer {display:block;position:relative} /* выравниваем страницу по центру, делаем отступы и цвет фона */ #main {width:950px;min-height:100%;padding:0 24px;margin:0 auto;background:#fff} /* пишем класс для шапки - header */ .h {overflow:hidden;height:70px;padding:35px 25px 0} /* меню навигации */ nav {width:100%;height:32px;background:#2ca9e4} nav li {float:left;margin:8px 20px 0} nav a {font-weight:bold;text-decoration:none;color:#fff} nav a:hover {text-decoration:underline;color:#fff} /* область основного контента */ section {overflow:hidden} /* стиль для картинки */ .image {width:100%;margin:10px 0} /* внутренняя область контента */ section section {float:left;width:640px} /* правая часть */ aside {overflow:hidden;width:250px;padding:0 30px} /* нижняя часть - footer */ footer {height:40px;padding:25px 25px 0;margin:20px 0 0;border-top:1px solid #bbb} /* стили для выделения областей HTML */ .tag {position:absolute;right:6px;top:2px;font-size:11px;font-style:normal} header:hover, nav:hover, section:hover, article:hover, aside:hover, footer:hover {background:#777;color:#fff} section section:hover, section aside:hover {background:#999} section article:hover {background:#bbb} article header:hover {background:#eee;color:#777} section article .tag {top:12px} article header .tag {right:70px;top:2px} aside .tag {top:12px}
Да, чуть не забыл. Вы, наверное, обратили внимание на следующий код:
HTML код.
Это нужно для того, чтобы Internet Explorer 6, 7 и 8 понимал новые теги.
Заключние
Верстать на HTML5 уже можно прямо сейчас, не бойтесь этого, если вы занимаетесь версткой сайтов, тем более что все современные браузеры понимают HTML5.
FireFox, Opera, Chrome и Safari как правило имеют автообновление и, как не крути, новые эффекты HTML5 так или иначе будут поддерживаться. Internet Explorer 9 тоже поддерживает HTML5, а для старых версий Internet Explorer можно применять JavaScript.
Алексей, по большому счету вы можете и не заменять теги DIV на новые из HTML5, но если вам так хочется (добавить больше семантики в код), из примера можете заменить
08.Май. в 14:46
Последние статьи
Масштабируем CSS спрайты с SVG, убивая сразу трех зайцев
Читать далее →Realtime xRTML — новый html-подобный язык разметки
Читать далее →Свежее в портфолио
TTL Studio →
Наши услуги
Создание и разработка сайтов
корпоративный сайт, сайт-визитка, интернет-магазин, информационные сайт, рекламный или промо-сайт, регистрация доменов и хостингВеб-дизайн
дизайн сайта, разработка фирменного стиля, векторная графика, иконкиHTML верстка сайтов
профессиональная HTML/XHTML верстка сайта, верстка NetCat, HostCMS, ABO CMS, модификация скрипта WebAsyst Shop-script