DivMotive.ru 23 февраля 2012 6:21 мск

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

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

Прошло уже более трех лет с момента, когда был анонсирован первый черновик спецификации стандарта разметки веб-страниц — HTML5, но до сих пор немного ресурсов на HTML5 и, наверное, лишь сотая доля верстальщиков используют HTML5 на практике, при верстке страниц сайта, хотя все современные браузеры поддерживают данный стандарт.

Немного лирики, via wiki. HTML5 — это пятая версия основного языка разметки веб-страниц, разработка которой началась еще в 2007 году. В настоящее время спецификация HTML5 находится в стадии разработки, закончить которую планируют в 2014 году. Все современные браузеры уже поддерживают основные элементы HTML5, за что им честь и хвала.

Прежде чем переходить к примерам верстки сайта на HTML 5, рассмотрим: теги, атрибуты и структуру HTML 5.

Полный список тегов HTML5

Для наглядности в таблице ниже представлен полный справочник тегов HTML, новые теги HTML 5 выделены.

Таблица 1. Справочник тегов HTML5
Тег Краткое описание
<comment> Определяет комментарий
<DOCTYPE> Определяет тип документа
<a> Определяет гиперссылки
<abbr> Определяет аббревиатуру
<acronym> Не поддерживается. Определяет акроним
<address> Определяет элемент с адресом
<applet> Не поддерживается. Определяет апплет
<area> Определяет область внутри изображения карты
<article> Определяет статью
<aside> Определяет контент в стороне от основного контента страницы
<audio> Определяет аудио контент
<b> Определяет жирный текст
<base> Определяет базовый URL для всех относительных ссылок на странице
<basefont> Не поддерживается. Используетя вместо CSS для задания шрифта
<bdo> Определяет направление отображения текста
<big> Не поддерживается. Определяет большой текст
<blockquote> Определяет длинную цитату
<body> Определяет элемент тела документа
<br> Вставка одного разрыва строки
<button> Определяет кнопку
<canvas> Определяет графики
<caption> Определяет заголовок (подпись) таблицы
<center> Не поддерживается. Определяет текст по центру
<cite> Определяет цитату или сноску на материал
<code> Определяет, что текст является программным кодом
<col> Определяет атрибуты для столбцов таблицы
<colgroup> Определяет групп столбцов таблицы
<command> Определяет командную кнопку
<datagrid> Определяет данные в упорядоченный список
<datalist> Определяет выпадающий список
<datatemplate> Определяет шаблон данных
<dd> Определяет описание определения
<del> Определяет удаленный текст
<details> Определяет детали элемента
<dialog> Определяет диалог (разговор)
<dir> Не поддерживается. Определяет список директорий
<div> Определяет секцию (блок) в документе
<dfn> Определяет определение термина
<dl> Определяет список определений
<dt> Определяет определение термина в списке
<em> Определяет выделенный текст
<embed> Определяет внешний интерактивный контент или плагин
<eventsource> Определяет цель события, отправляемого по серверу
<fieldset> Определяет сгруппированный набор полей формы
<figure> Определяет группу медиа-контента, и их подписи
<font> Устаревший. Определяет шрифт текста, размер и цвет
<footer> Определяет нижний колонтитул для раздела или страницы
<form> Определяет форму
<frame> Не поддерживается. Определяет фрейм
<frameset> Не поддерживается. Определяет набор фреймов
<h1> по <h6> Определяет заголовок с 1 по 6 заголовок
<head> Определяет информацию о документе
<header> Определяет область заголовка раздела или страницы
<hr> Определяет горизонтальную линию
<html> Определяет html документ
<i> Определяет курсив
<iframe> Определяет встроенный фрейм
<img> Определяет изображение
<input> Определяет поле ввода
<ins> Определяет вставленный (обновленный) текст
<isindex> Не поддерживается. Определяет поисковый индекс в документе
<kbd> Определяет текст, набранный на клавиатуре
<label> Определяет метку для элемента формы
<legend> Определяет заголовок группы элементов формы
<li> Определяет элемент списка
<link> Определяет ссылку на ресурс
<mark> Определяет выделенный текст
<map> Определяет изображение карты
<menu> Определяет список меню
<meta> Определяет мета-информацию
<meter> Определяет измерения в течение заранее определенного диапазона
<nav> Определяет навигационные ссылки
<nest> Определяет вложенную точку в шаблоне данных
<noframes> Не поддерживается. Определяет секцию, не поддерживающую фрейм
<noscript> Определяет секцию, не поддерживающую сценарий (скрипт)
<object> Определяет внедренный объект
<ol> Определяет упорядоченный список
<optgroup> Определяет группу вариантов в раскрывающемся списке
<option> Определяет вариант в раскрывающемся списке
<output> Определяет некоторые виды результата
<p> Определяет параграф (абзац)
<param> Определяет параметр для объекта
<pre> Определяет выровненный (форматированный) текст
<progress> Определяет ход выполнения задачи любого рода
<q> Определяет краткую цитату
<rule> Определяет правила для обновления шаблонов
<s> Не поддерживается. Определяет зачеркнутый текст
<samp> Определяет образец программного кода
<script> Определяет сценарий (скрипт)
<section> Определяет раздел (секцию)
<select> Определяет список для выбора
<small> Определяет мелкий текст
<source> Определяет медиа-ресурсы
<span> Определяет раздел в документе
<strike> Не поддерживается. Определяет зачеркнутый текст
<strong> Определяет выделенный жирный текст
<style> Определяет определение стиля
<sub> Определяет индексным текст
<sup> Определяет надстрочным текст
<table> Определяет таблицу
<tbody> Определяет тело таблицы
<td> Определяет ячейку таблицы
<textarea> Определяет область ввода текста
<tfoot> Определяет колонтитул таблицы
<th> Определяет заголовок ячейки таблицы
<thead> Определяет заголовок таблицы
<time> Определяет дату/время
<title> Определяет название документа
<tr> Определяет строку таблицы
<tt> Не поддерживается. Определяет телетайп текст
<u> Не поддерживается. Определяет подчеркнутый текст
<ul> Определяет неупорядоченный список
<var> Определяет переменную
<video> Определяет видео
<xmp> Не поддерживается. Определяет выровненный текст

Из Таблицы 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
Структура разметки HTML4
Структура разметки HTML5
Структура разметки HTML5

Разница очевидна, HTML5 имеет семантический чистый код, структура HTML5 более легкая, гибкая и функциональная. Функциональные особенности структуры HTML5 рассмотрим в новых статьях.

Пример верстки сайта на HTML5

По сути, принцип верстки на HTML5 ничем не отличается от верстки на HTML4, единственное, на что стоит обратить внимание, что новые элементы (теги), показанные в структуре HTML5 — инлайновые (inline), поэтому сразу необходимо сделать их блочными для того, чтобы наш дизайн правильно отображался в браузере.

Для этого пишем в CSS следующее:

CSS код. 

header, nav, section, article, aside, footer {display:block}

Так, нужен какой-то дизайн, который будем верстать. Для начала сделаем, пожалуй, самый простой макет, не нагруженный графикой и сложными элементами.

Начнем с HTML разметки. Итак, у нас есть header, навигационное меню — nav, контент или section, внутри снова section и article, правая часть — aside, а снизу footer.

Для того, чтобы была видна вложенность элементов HTML5 и где какой элемент находится я сделал для них тег <i> с классом tag.

Графических элементов здесь нет, одна картинка, стили оформления и HTML5.

HTML код: Верстка сайта на HTML5. 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Пример верстки сайта на HTML5 от DivMotive.ru</title>
	<!--[if IE]>
	<script>
		document.createElement('header');
		document.createElement('nav');
		document.createElement('section');
		document.createElement('article');
		document.createElement('aside');
		document.createElement('footer');
	</script>
	<![endif]-->
	<style type="text/css">
		/* Здесь будут наши стили */
	</style>
</head>
<body>
<div id="main">
	<header class="h">
		<h1>Пример верстки сайта на HTML5 от DivMotive.ru</h1>
		<i class="tag">&lt;header&gt;</i>
	</header>
	<nav>
		<ul>
			<li><a href="/about/">Об авторе</a></li>
			<li><a href="/service/">Услуги</a></li>
			<li><a href="/clients/">Клиентам</a></li>
			<li><a href="/project/">Проекты</a></li>
			<li><a href="/article/">Статьи</a></li>
			<li><a href="/news/">Новости</a></li>
			<li><a href="/contact/">Контакты</a></li>
		</ul>
		<i class="tag">&lt;nav&gt;</i>
	</nav>
	<section>
		<img class="image" src="img.jpg" alt="" />
		<i class="tag">&lt;section&gt;</i>
	</section>
	<section>
		<section>
			<article>
				<header>
					<h2>Создание и разработка сайтов</h2>
					<i class="tag">&lt;header&gt;</i>
				</header>
				<p>Компания «<a href="/">DivMotive</a>» предлагает комплекс высококачественных услуг по созданию, разработке и поддержке Интернет-ресурсов в сети на базе <a href="/cms/">Систем управления сайтом</a> (<abbr title="Content Management System">CMS</abbr>).</p>
				<p>К каждому проекту мы подходим индивидуально и выбираем оптимальный вариант для решения поставленных задач. Разработанный нами сайт будет отличаться оригинальным оформлением и функциональностью. При разработке веб-сайтов мы используем самые передовые технологии.</p>
				<i class="tag">&lt;article&gt;</i>
			</article>
			<article>
				<header>
					<h2>Веб-дизайн</h2>
					<i class="tag">&lt;header&gt;</i>
				</header>
				<p>Каждый сайт должен быть по-своему привлекателен. А первое, на что посетитель обращает внимание — это <strong>дизайн</strong>, т.е. все визуальное представление сайта, включая <em>пиктограммы</em> и <em>иконки</em>, <em>шрифты</em>, <em>иллюстрации</em>, и т.д.</p>
				<p>От того, насколько дружественно и качественно <strong>разработан дизайн</strong>, зависит дальнейшее пребывание пользователя на Вашем сайте.</p>
				<i class="tag">&lt;article&gt;</i>
			</article>
			<article>
				<header>
					<h2>HTML верстка сайтов</h2>
					<i class="tag">&lt;header&gt;</i>
				</header>
				<p><em>Верстка макета (HTML верстка)</em> — это процесс формирования веб-страницы, по средствам кода соответствующего языка разметки (<abbr title="HyperText Markup Language">HTML</abbr>, <abbr title="eXtensible Markup Language">XML</abbr> и т.п.), так же состоящей из стилей оформления (<abbr title="Cascading Style Sheets">CSS</abbr>) и подгружаемых картинок и фонов, на которые специальным образом разбивается макет сайта, в соответствии с дизайном, как правило, в формате <abbr title="Photoshop Document">PSD</abbr>.</p>
				<i class="tag">&lt;article&gt;</i>
			</article>
			<i class="tag">&lt;section&gt;</i>
		</section>
		<aside>
			<h2><a href="/service/">Услуги DivMotive</a></h2>
			<ul>
				<li>
					<h3><a href="/service/website/">Создание и разработка сайтов</a></h3>
					<em>Полностью готовый для работы в сети сайт на базе <abbr title="Content Management System">CMS</abbr></em>
				</li>
				<li>
					<h3><a href="/service/design/">Веб-дизайн</a></h3>
					<em>Оригинальные индивидуальные решения оформления сайта</em>
				</li>
				<li>
					<h3><a href="/service/markup/">HTML верстка сайтов</a></h3>
					<em>Блочная валидная семантическая <abbr title="HyperText Markup Language">HTML</abbr>/<abbr title="Extensible Hypertext Markup Language">XHTML</abbr> верстка сайта в строгой технической спецификации</em>
				</li>
			</ul>
			<br />
			<h2>Наши преимущества</h2>
			<ol>
				<li>самый <a href="/cms/">широкий выбор CMS</a> для реализации любой идеи;</li>
				<li>создание уникального функционала для сайта;</li>
				<li>подбор наиболее оптимальной <abbr title="Content Management System">CMS</abbr> для поставленной задачи;</li>
				<li><a href="/service/website/">качественная разработка сайта</a> на каждом этапе его реализации;</li>
				<li>применение новых технологий в разработке сайта: jQuery, HTML5, CSS3;</li>
				<li>бесплатные консультации и сопровождение проекта в течение месяца;</li>
				<li>скидки постоянным клиентам и индивидуальные бонусные программы.</li>
			</ol>
			<i class="tag">&lt;aside&gt;</i>
		</aside>
		<i class="tag">&lt;section&gt;</i>
	</section>
	<footer>
		Copyright &copy; 2011 <a href="/" rel="copyright">DivMotive</a>. All rights reserved.
		<i class="tag">&lt;footer&gt;</i>
	</footer>
</div>
</body>
</html>

Вот такой не замысловатый код у нас получился. Немного громоздко выглядит из-за текста, взятого с сайта, а так в качестве примера, думаю, самое оно.

Ну и последнее, что нам осталось сделать, это прописать стили оформления, чтобы все выглядело подобающим образом.

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}

Простейший сайт на HTML5 готов. Ссылка на рабочий пример верстки сайта на HTML 5.

Да, чуть не забыл. Вы, наверное, обратили внимание на следующий код:

HTML код. 

	<!--[if IE]>
	<script>
		document.createElement('header');
		document.createElement('nav');
		document.createElement('section');
		document.createElement('article');
		document.createElement('aside');
		document.createElement('footer');
	</script>
	<![endif]-->

Это нужно для того, чтобы Internet Explorer 6, 7 и 8 понимал новые теги.

Заключние

Верстать на HTML5 уже можно прямо сейчас, не бойтесь этого, если вы занимаетесь версткой сайтов, тем более что все современные браузеры понимают HTML5.

FireFox, Opera, Chrome и Safari как правило имеют автообновление и, как не крути, новые эффекты HTML5 так или иначе будут поддерживаться. Internet Explorer 9 тоже поддерживает HTML5, а для старых версий Internet Explorer можно применять JavaScript.

На этом все. Встретимся в новых статьях..

← Предыдущая статья
Realtime xRTML — новый html-подобный язык разметки
Следующая статья →
Блочная верстка сайта
Автор статьи: 

Используемый материал:
,  ,   


8  комментариев к статье "Верстка сайта на HTML5 с примерами"

  1. Ребят, кто-нибудь видел пример создания водной глади на html 5? я где-то видел.. замучился искать.
  2. Спасибо, Ян и Андрей! Внесу изменения в статью. Хотя на момент написания этой статьи, было правильным считать именно такое использование данных тегов.
  3. К сожалению тег aside неправильно использовать так, как у вас в примере.
    Aside используется для публикации дополнительных материалов, например цитат, для тега articles.
    Пруф: Книга издательства Питер, «HTML5 и CSS3.» Автор: Брайан Хоган. 38 страница.
    А так спасибо за статью.
  4. В примере неправильно используются теги header и section. Вот статья на эту тему: http://habrahabr.ru/blogs/html5/124993/
  5. Отличная статья! За Html5 будущее, есть небольшие сложности, которые не любят разработчики сайтов (да и их заказчики), т.к. весь офисный планктон зачастую сидит на IE6.
  6. Спасибо. Как раз вовремя попалась статья. Удачи.
  7. Дмитрий
    07.июня. в 12:37
    Наоборт верстка на HTML 5 проще намного проще чем просто верстка на таблицах или дивах)) не каждый разберется в таблицах с многочисленными тэгами и блоками вечно разъезжающимися.
  8. Мне кажется вёрстка сайта на ШТМЛ5 сложна для начинающих. Я ещё даже на таблицах верстаю,конечно уже перехожу на блочную, но всётаки ШТМЛ для профи =).

Добавить комментарий






Ваша оценка:

Контрольные цифры

Свежие статьи

  • 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

Статьи по тегам

                   

Последние статьи

Все статьиRSS

Свежее в портфолио

Портфолио

Наши услуги

DivMotive © 2012.