Верстка сайта на HTML5 с примерами

Верстка сайта на HTML5 с примерами

Прошло уже более трех лет с момента, когда был анонсирован первый черновик спецификации стандарта разметки веб-страниц — 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 документ
Определяет курсив