Макет шаблона HTML 5 с пояснениями

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

Пример:

<!DOCTYPE html>
<html lang="ru">

    <head>
       <meta charset="utf-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Название страницы</title>
       <link rel="stylesheet" href="css/style.css" />
     </head>

     <body>
       <div class="wrapper">

         <header>Шапка страницы</header>
         <nav>Основное меню страницы</nav>
         <div class="main">

<article>Основная статья страницы</article>
<aside>Сайдбар</aside>

        </div>

      <footer>Подвал страницы</footer>

   </div>
   </body>
</html>

А теперь пояснения:

- <meta charset="utf-8" /> — назначаем кодировку UTF-8.

- <meta http-equiv="X-UA-Compatible" content="IE=edge" /> — если страница открыта браузером IE, то браузер должен всегда использовать последний стандартный режим отображения.

- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> — корректное отображение сайта на мобильных устройствах.

- <link rel="stylesheet" href="css/normalize.css" /> — адрес файла с CSS стилями.

- .wrapper — обертка для всего кода находящегося в теге body.

- header — шапка страницы сайта, в нём обычно содержится логотип сайта, заголовок, телефон, слайдер и т.п.

- nav — основное меню страницы сайта.

- .main — "срединная" обертка для основного контента (статьи) и сайдбара (боковой панели) сайта.

- article — основной контент страницы: статья, запись в блоге, тема форума и т.д. Может содержать текст, изображения, видео, таблицы и т.д.

- aside — боковая панель сайта для размещения различной второстепенной информации (виджетов, популярных статей, рекламы и тому подобного)

- footer — подвал страницы сайта, предназначен для размещения счётчиков, копирайтов, контактов и тому подобного.

Все статьи по теме HTML 5:

- HTML 5 Введение
- Устаревшие теги и атрибуты HTML 5
- Нововведения в структуру документа HTML 5
- Глобальные атрибуты в HTML 5
- Формы HTML 5
- Воспроизведение аудио файлов в HTML 5
- Воспроизведение видео файлов в HTML 5
- Web worker
- Геолокация в HTML 5
- Drag and Drop
- Кэширование страниц
- Макет шаблона HTML 5 с пояснениями
- Справочник тегов HTML 5

Canvas:

- Canvas вступление
- Применение стилей в canvas
- Оформление текста и изображений в canvas