Разметка HTML5

Уже давно не менялись и не добавлялись новые элементы разметки HTML5, последним новым добавленным элементом в HTML5 был template. Последним убранным элементом из HTML5 был hgroup. Больше глобальных изменений в спецификации не было, предлагаю создать шаблон с разметкой HTML5.

Шаблон с разметкой HTML5

Предназначение HTML5, в первую очередь уменьшить код страницы и расширить функции элементов. Большинство веб-разработчиков добавляют к элементу HTML5 идентификатор id или класс class например <header class="header">. Я предлагаю создать шаблон где разметка HTML5 без идентификаторов id и классов class. Свойства в каскадной таблице не CSS3, поэтому совместимы со всеми браузерами. Адаптивный дизайн в этой статье не рассматривается.

к меню ↑

Структура разметки HTML5

Разметка HTML5 для шаблона
Схема разметки HTML5 без идентификаторов id и классов class
к меню ↑

Код разметки HTML5

<!DOCTYPE HTML>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta name="robots" content="index, follow">
    <meta name="author" content="htmlhook.ru">
    <meta name="publisher" content="Viktor Klim">
    <meta name="description" content="Создать стопроцентный шаблон HTML5">
    <meta name="keywords" content="100%, шаблон, HTML5">
    <meta name="generator" content="Core CMS">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<title>100% шаблон HTML5</title>

 <!--скрипт для старых браузеров IE-->

 <!--[if lt IE 9]>
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->

</head>
<body>

<header>
    <figure>
        Логотип
    </figure>
       <h1><a href="#">Заголовок сайта</a></h1>
       <p>Краткое описание</p>
</header>

<nav>
    <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">О Нас</a></li>
        <li><a href="#">Контакты</a></li>
   </ul>
</nav>

  <main>

     <article>

          <h2>Заголовок статьи</h2>

           <p>В содержании сайта, может быть текст, фото, видео, аудио ...</p>

        <section>
           <h3>Заголовок</h3>
           <p>здесь могут быть похожие записи, слайдер, баннеры, миниатюры и т.д...</p>
        </section>

       </article>

    <aside>

      <h3>Боковая колонка</h3>

       <p>боковая колонка для всего остального</p>

        <h4>Меню сайта</h4>

            <menu>
                <li><a href="#">Смотреть фото</a></li>
                <li><a href="#">Смотреть видео</a></li>
                <li><a href="#">Слушать музыку</a></li>
           </menu>

    </aside>

 </main>

<footer>

     <p>

        <small>
          <time>2004-05-24</time> © <a href="http://htmlhook.ru">htmlhook.ru</a>
       </small>

    </p>

       <address>
          <a href="mailto:js@example.com">Написать письмо</a>
       </address>

</footer>

</body>
</html>

После того как вы внимательно рассмотрели код шаблона, давайте разберёмся что к чему и определим значения для таблицы CSS.

Обратите внимание на первую строку: указан тип документа html <!DOCTYPE HTML>, язык для html — русский <html lang="ru">. В XHTML что бы указать тип документа потребовалось бы в пять раз больше кода. Дальше написан обязательный мета-тег <meta charset="utf-8"> для кодировки символов в документе HTML, подробнее об этом читайте на странице «Метатеги в HTML»

Мир переполнен старыми браузерами IE, которые не понимают HTML5, для таких браузеров существует javascript, который добавляет им недостающею информацию о HTML5. Обратите внимание, что в подключении скрипта не указывается тип документа, в HTML5 это не нужно.

В документе HTML второй элемент для разметки это body его еще называют телом документа. В таблице CSS для него обычно указывают цвет фона, название шрифта для текста, размер и цвет текста по желанию, по умолчанию он черный.

к меню ↑

CSS для элемента body

*, *:before, *:after {
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
                box-sizing:border-box;
}

body { 
    background-color: rgba(255,255,255);
    font: 16px/1.42857 "Helvetica Neue",Helvetica,Arial,sans-serif;
    margin:0;
}

Первый элемент разметки это html, Я написал о нём не сразу, потому что значение для html можно определить в CSS3 псевдоклассом :root. Это полезный псевдокласс читайте о нём здесь.

В шапке шаблона HTML5 всегда должен быть элемент header; в котором находится название сайта и небольшое описание, а так же может быть логотип внутри элемента figure .

к меню ↑

CSS для элемента header

header {
    background-color: #373737;
    color: #fff;
    height: 160px;
    padding: 10px 50px;
}
к меню ↑

CSS для элемента figure

figure {
    float:left;
}
к меню ↑

CSS для элемента nav

На каждом сайте где больше чем одна страница, нужна навигация по страницам. Для этого Я использовал элемент nav.

nav {
    background-color: #eee;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    height: 56px;
}

nav ul li {
    float:left;
    margin-right:22px
}

Для нового элемента HTML5 main нужно указать размер по горизонтали для содержимого, при переходе на другую страницу, только это содержимое должно меняться. Элемент main, может иметь любые элементы разметки кроме main, он должен быть только один, подробно об этом элементе читайте на странице Тег HTML5 main. В нашем примере, элемент main содержит только три элемента разметки HTML5:

  1. article — текст сайта
  2. section — здесь могут быть похожие записи, слайдер, баннеры, миниатюры и т.д…
  3. aside — боковая колонка для всего стольного
к меню ↑

CSS для элемента main

Этот код CSS выравнивает блок <main> по центру с указанным размером.

main {
    margin: 0 auto;
    width: 1170px;
    display: block;
}
к меню ↑

CSS для элемента article

Теперь главное указать размер по горизонтали для элемента article что бы хватило места для боковой колонки aside, легче всего для этого использовать проценты.

article {
    float: left;
    margin-bottom: 30px;
    padding: 0 15px;
    width: 74%;
    overflow: hidden;
}
к меню ↑

CSS для элемента section

Как лучше оформить элемент section зависит от его содержимого, но думаю что рамка и фон залитым другим цветом чем основной, не испортит вид.

section {
    background-color:#eee;
    border: 1px solid #ccc;
    padding: 20px;
}
к меню ↑

CSS для элемента aside

Для боковой колонки указываем размер по горизонтали в процентах которые были отняты у элемента article, и один процент на пробел между колонками article и aside, остаётся 25%, для боковой колонки должно хватить.

aside {
    float: right;
    padding-left: 15px;
    width: 25%;
    display: block;
    overflow: hidden;
    position:relative;
}
к меню ↑

CSS для элемента menu

На мой взгляд элемент HTML5 menu идеально подходит для списка меню сайта в боковой колонке.

menu {
    padding: 0;
}
к меню ↑

В самом низу шаблона элемент HTML5 footer, который является не маловажным элементом HTML, смотрите страницу «Варианты оформить страницы сайта». В этом примере 100% разметка HTML5, Я написал свои ссылки, так как являюсь автором шаблона.

footer {
    background-color: #373737;
    clear: both;
    color: #fff;
    padding: 50px 20px;
}

footer small a {
    color: #eff;
}

Демо

к меню ↑

Заключение

В статье описан готовый шаблон с разметкой HTML5, который за счет скрипта выглядит одинаков как в новых браузерах так и в старых IE. В шаблоне не применялись идентификаторы или классы для таблицы стилей. Если вдруг вам понадобится стиль для элемента рекомендую для этого использовать CSS селекторы. Жду ваших комментарий.