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

Sytrus
22 февраля 2011г.
Кодинг
10 комментариев
44210 просмотров
A+A-X

Полный список тегов HTML5
Список атрибутов HTML5
Структура 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 документ
	Определяет курсив
	Определяет встроенный фрейм
	Определяет изображение
	Определяет поле ввода
	Определяет вставленный (обновленный) текст
	Не поддерживается. Определяет поисковый индекс в документе
	Определяет текст, набранный на клавиатуре
	Определяет метку для элемента формы
	Определяет заголовок группы элементов формы
	Определяет элемент списка
	Определяет ссылку на ресурс
	Определяет выделенный текст
	Определяет изображение карты
	Определяет список меню
	Определяет мета-информацию
	Определяет измерения в течение заранее определенного диапазона
	Определяет навигационные ссылки
	Определяет вложенную точку в шаблоне данных
	Не поддерживается. Определяет секцию, не поддерживающую фрейм
	Определяет секцию, не поддерживающую сценарий (скрипт)
	Определяет внедренный объект
	Определяет упорядоченный список
	Определяет группу вариантов в раскрывающемся списке
	Определяет вариант в раскрывающемся списке
	Определяет некоторые виды результата
	Определяет параграф (абзац)
	Определяет параметр для объекта
	Определяет выровненный (форматированный) текст
	Определяет ход выполнения задачи любого рода
	Определяет краткую цитату
	Определяет правила для обновления шаблонов
	Не поддерживается. Определяет зачеркнутый текст
	Определяет образец программного кода
zakladki.yandex.ru google.com bobrdobr.ru facebook.com ВКонтакте twitter.com mister-wong.ru moemesto.ru del.icio.us reddit.com memori.ru Автор статьи: Sytrus Используемый материал: http://html5tutorial.net/ html5, html, css Похожие статьи: Блочная верстка сайта 10 комментариев к статье "Верстка сайта на HTML5 с примерами" Константин 08.Май. в 14:46 Алексей, по большому счету вы можете и не заменять теги DIV на новые из HTML5, но если вам так хочется (добавить больше семантики в код), из примера можете заменить на , на и на соответственно. Остальные без изменений. Алексей 08.Май. в 13:58 Подскажите пожалуйста какие теги div блоков заменить на теги HTML5 http://s019.radikal.ru/i604/1205/3b/56722aa5076e.jpg пример вёрстки Василий 08.Январь. в 20:01 Ребят, кто-нибудь видел пример создания водной глади на html 5? я где-то видел.. замучился искать. Константин 01.Декабрь. в 15:29 Спасибо, Ян и Андрей! Внесу изменения в статью. Хотя на момент написания этой статьи, было правильным считать именно такое использование данных тегов. Андрей 01.Декабрь. в 00:24 К сожалению тег aside неправильно использовать так, как у вас в примере. Aside используется для публикации дополнительных материалов, например цитат, для тега articles. Пруф: Книга издательства Питер, «HTML5 и CSS3.» Автор: Брайан Хоган. 38 страница. А так спасибо за статью. Ян 07.Октябрь. в 15:35 В примере неправильно используются теги header и section. Вот статья на эту тему: http://habrahabr.ru/blogs/html5/124993/ Андрей 06.Сентябрь. в 10:16 Отличная статья! За Html5 будущее, есть небольшие сложности, которые не любят разработчики сайтов (да и их заказчики), т.к. весь офисный планктон зачастую сидит на IE6. Павел 15.Июль. в 16:42 Спасибо. Как раз вовремя попалась статья. Удачи. Дмитрий 07.Июнь. в 12:37 Наоборт верстка на HTML 5 проще намного проще чем просто верстка на таблицах или дивах)) не каждый разберется в таблицах с многочисленными тэгами и блоками вечно разъезжающимися. Артиом 07.Март. в 22:42 Мне кажется вёрстка сайта на ШТМЛ5 сложна для начинающих. Я ещё даже на таблицах верстаю,конечно уже перехожу на блочную, но всётаки ШТМЛ для профи =). Добавить комментарий Ваше имя: ^* Email для генерации Gravatar: URL сайта - dofollow: Ваш комментарий: ^* Ваша оценка: Контрольные цифры: ^* Свежие статьи 08 апреля 2012г. – Кодинг Масштабируем CSS спрайты с SVG, убивая сразу трех зайцев Всем привет. Сразу хочу отметить, что если мы говорим об иконках, их можно масштабировать двумя способами (других я просто не знаю): конвертировать иконки в шрифт и подключать их через @font-face, либо использовать SVG в качестве формата для этих иконок. Немного отойду от темы и расскажу предысторию. Предыстория Я было решил использовать у себя на сайте шрифтовые иконки, казалось бы все хорошо: и размер менять можно, и цвет задавать и запрос к серверу всего один (на подключение шрифта). Другими словами, подключаемый шрифт это и есть своеобразный «CSS спрайт», верно? Я давай проверять, везде ли все красиво выглядит. Оказалось, что не все так хорошо как хотелось бы, потому как в некоторых размерах иконки выглядели кособокими, а при отключенном сглаживании вообще противно смотреть на них стало. Что делать? Использовать второй вариант — SVG, о чем и пойдет речь. Читать далее → 11 февраля 2012г. – Кодинг Realtime xRTML — новый html-подобный язык разметки Речь пойдет о новом запатентованном HTML-подобном языке разметки — xRTML, который позволяет редактировать функции сайта в реальном времени без использования Ajax. Читать далее → 10 марта 2011г. – Интернет Рамблер Нихром. Коротко о главном В начале февраля 2011 года компания Rambler выпустила в свет свой собственный браузер — Нихром, созданный на базе движка Chromium от Google. На первый взгляд Rambler Нихром ничем не отличается от Google Chrome, разве что панелью закладок сервисов Рамблера, однако, при близком рассмотрении, можно увидеть кое-что еще. Читать далее → 22 февраля 2011г. – Кодинг Верстка сайта на HTML5 с примерами Прошло уже более трех лет с момента, когда был анонсирован первый черновик спецификации стандарта разметки веб-страниц — HTML5, но до сих пор немного ресурсов на HTML5 и, наверное, лишь сотая доля верстальщиков используют HTML5 на практике, при верстке страниц сайта, хотя все современные браузеры поддерживают данный стандарт. Читать далее → 30 января 2011г. – Кодинг Блочная верстка сайта Чтобы не повторяться, в сети и так много информации по блочной верстке, пробегусь только по азам и определениям, приведу несколько примеров html-кода, каким он должен быть по моему глубокому убеждению. Читать далее → 30 января 2011г. – Кодинг Ручная верстка: преимущества и недостатки В этой статье рассмотрим преимущества и недостатки ручной верстки страниц сайта, а так же узнаем как верстают профессионалы. Набор инструментов, помогающих быстро верстать «руками». В чем основные сложности ручной верстки. Стоит ли использовать фреймворк и какой он должен быть? Читать далее → Все статьи RSS Статьи по тегам api css css sprites css3 framework google html html5 rambler Realtime svg xRTML браузеры Главная Статьи Кодинг Верстка сайта на HTML5 с примерами Последние статьи 08 апреля 2012г. – Кодинг Масштабируем CSS спрайты с SVG, убивая сразу трех зайцев Читать далее → 11 февраля 2012г. – Кодинг Realtime xRTML — новый html-подобный язык разметки Читать далее → Все статьи RSS Свежее в портфолио TTL Studio → Портфолио Наши услуги Создание и разработка сайтов корпоративный сайт, сайт-визитка, интернет-магазин, информационные сайт, рекламный или промо-сайт, регистрация доменов и хостинг Веб-дизайн дизайн сайта, разработка фирменного стиля, векторная графика, иконки HTML верстка сайтов профессиональная HTML/XHTML верстка сайта, верстка NetCat, HostCMS, ABO CMS, модификация скрипта WebAsyst Shop-script Об авторе Системы управления сайтом Новости Услуги Портфолио Клиентам Поиск по сайту Карта сайта DivMotive © 2012.