Запись Footer HTML5 впервые появилась Энциклопедия HTML5.
]]>Тег footer в HTML5, обрамляет подвал, на странице сайта.
В тегах <footer> </footer> оычно содержится инфрмация относящаяся к самому сайту, а не к основному контенту, например: правовая информация (копирайты), имя автора, название сайта и/или компании, телефон и/или адрес компании и т.п.
Приведём пример расположения тегов footer в типичном коде шаблона страницы, созданной с помощью языка HTML5:
<!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/normalize.css" />
</head>
<!-- Тело страницы сайта -->
<body>
<div class="wrapper">
<header>Шапка страницы</header>
<nav>Основное меню страницы</nav>
<div class="main">
<article>Основная статья страницы</article>
<aside>Сайдбар</aside>
</div> <!-- .main -->
<footer>
Подвал страницы
</footer>
</div> <!-- .wrapper -->
</body>
</html>
Тег footer — это блочный элемент.
Семантика — используется для обозначения подвала страницы сайта, где располагается так называемая служебная информация.
Запись Footer HTML5 впервые появилась Энциклопедия HTML5.
]]>Запись Aside HTML5 впервые появилась Энциклопедия HTML5.
]]>Тег aside в HTML5, обрамляет боковую панель (сайдбар), на странице сайта.
Тегами <aside> </aside> оычно обрамляют блок виджетов на сайте. В качестве виджетов могут выступать: блок категориев, меток, последних записей, последних комментариев, популярных страниц, поисковая строка и т.п.
Приведём пример возможного расположения тегов aside в типичном коде шаблона страницы, созданной с помощью языка HTML5:
<!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/normalize.css" />
</head>
<!-- Тело страницы сайта -->
<body>
<div class="wrapper">
<header>Шапка страницы</header>
<nav>Основное меню страницы</nav>
<div class="main">
<article>Основная статья страницы</article>
<aside>
Сайдбар
</aside>
</div> <!-- .main -->
<footer>Подвал страницы</footer>
</div> <!-- .wrapper -->
</body>
</html>
Сайдбар можно расположить не только сбоку, но и внизу над подвалом страницы.
Тег aside — это блочный элемент.
Семантика — используется для обозначения сопутствующей информации основной статьи страницы сайта, но при этом не являющейся частью основной статьи.
Запись Aside HTML5 впервые появилась Энциклопедия HTML5.
]]>Запись Section HTML5 впервые появилась Энциклопедия HTML5.
]]>Тег section в HTML5, может обрамлять повторяющиеся элементы (разделы), на странице сайта. Данный тег довольно сложен для понимания, попробуем разобраться когда же его применять.
Теги <section> </section> могут обрамлять комментарии на сайте, ответы темы на форуме, анонсы (цитаты) новостей или постов на главной странице, страниц категориев, меток и т.д. Также тегами section можно обрамлять виджеты в сайдбаре или главы рассказа, если они расположены на одной странице.
Приведём пример возможного расположения тегов section в типичном коде шаблона страницы, созданной с помощью языка HTML5:
<!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/normalize.css" />
</head>
<!-- Тело страницы сайта -->
<body>
<div class="wrapper">
<header>Шапка страницы</header>
<nav>Основное меню страницы</nav>
<div class="main">
<section>
анонс поста 1
</section>
<section>
анонс поста 2
</section>
<section>
анонс поста 3 и т.д.
</section>
<aside>Сайдбар</aside>
</div> <!-- .main -->
<footer>Подвал страницы</footer>
</div> <!-- .wrapper -->
</body>
</html>
Тег section — это блочный элемент.
Семантика — используется для обозначения повторяющихся блоков на сайте.
Запись Section HTML5 впервые появилась Энциклопедия HTML5.
]]>Запись Nav HTML5 впервые появилась Энциклопедия HTML5.
]]>Тег nav в HTML5, обозначет основное меню сайта (панель навигации). Обычно тегами <nav> </nav> обрамляют основное меню страницы сайта, которое расположено сразу под шапкой сайта.
В меню nav, обычно располагают ссылки на важные страницы сайта, это могут быть страницы контактов, о компании, каталог, магазин, главная, описание услуг, новостей и т.д.
Рассмотрим расположение тегов nav в типичном коде шаблона страницы, созданной с помощью языка HTML5:
<!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/normalize.css" />
</head>
<!-- Тело страницы сайта -->
<body>
<div class="wrapper">
<header>Шапка страницы</header>
<nav>
Основное меню страницы
</nav>
<div class="main">
<article>Основная статья страницы</article>
<aside>Сайдбар</aside>
</div> <!-- .main -->
<footer>Подвал страницы</footer>
</div> <!-- .wrapper -->
</body>
</html>
Тег nav — это блочный элемент.
Семантика — используется для обозначения наиболее важного блока ссылок на сайте.
Запись Nav HTML5 впервые появилась Энциклопедия HTML5.
]]>Запись Header HTML5 впервые появилась Энциклопедия HTML5.
]]>Тег header в HTML5, обозначет шапку сайта. Обычно тегами <header> </header> обрамляют шапку страницы сайта.
В шапке страницы сайта чаще всего располагают заголовок (девиз, слоган компании), логотип сайта (компании), контактную информацию (телефоны, часы работы). В шапке сайта можно встретить ссылки на: карту проезда, заказать звонок, поисковую строку и различные элементы типа социальных кнопок.
Теги <header> </header> можно использовать несколько раз на странице, например они могут быть использованы как шапка основной статьи страницы, шапка повторяющихся элементов сайдбара (например виджеты) и т.д.
Теги header нельзя помещать внутрь тегов footer, address и сам header
Рассмотрим расположение тегов header в типичном коде шаблона страницы, созданной с помощью языка HTML5:
<!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/normalize.css" />
</head>
<!-- Тело страницы сайта -->
<body>
<div class="wrapper">
<header>
Шапка страницы
</header>
<nav>Основное меню страницы</nav>
<div class="main">
<article>Основная статья страницы</article>
<aside>Сайдбар</aside>
</div> <!-- .main -->
<footer>Подвал страницы</footer>
</div> <!-- .wrapper -->
</body>
</html>
Тег header — это блочный элемент.
Семантика — может быть использована как шапка страницы, статьи, какой-либо секции на сайте (например виджета).
Запись Header HTML5 впервые появилась Энциклопедия HTML5.
]]>