Разметка HTML5

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

Оглавление:
  1. Шаблон с разметкой HTML5
  2. Структура разметки HTML5
  3. Код разметки HTML5
  4. CSS для элемента body
  5. CSS для элемента header
  6. CSS для элемента img
  7. CSS для элемента nav
  8. CSS для элемента main
  9. CSS для элемента article
  10. CSS для элемента section
  11. CSS для элемента aside
  12. CSS для элемента menu
  13. CSS для элемента footer
  14. Заключение

Шаблон с разметкой 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>
       <img src="https://demo.htmlhook.ru/logo.png" alt="Логотип" height="50" width="50">

       <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="https://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 для элемента img

header img, header h1 {
 display: inline;
}

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 селекторы. Жду ваших комментарий.