
В заключении мы решили привести образец простого сайта на HTML 5 с пояснениями всех важных элементов для закрепления материала указанного в предыдущих статьях.
Пример:
<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