HTML :: Подробнее о структуре html-документа
- Основные элементы разметки html-документа
- «Шапка» сайта, тег <header>
- Основное содержимое страницы, тег <main>
- «Подвал» сайта, тег <footer>
- Боковая панель сайта, тег <aside>
- Создание блоков навигации, тег <nav>
- Создание тематических разделов, тег <section>
- Выделение раздела для новости или статьи, тег <article>
Основные элементы разметки html-документа
Как мы уже знаем, любой html-документ содержит заголовок документа «head», предназначенный для хранения служебной информации, и тело документа «body», в котором располагается информация, предназначенная для вывода на экран пользователя. Однако с развитием языка HTML он все больше стал отвечать за логическую разметку документа, что привело к появлению ряда новых тегов и сформированных ими элементов: «header», <main>, «footer», «aside», «nav», «section», «article» (см. пример. №1). Все они находятся в теле документа и по необходимости делят его на логические блоки, которые соответствующим образом воспринимаются поисковыми машинами. Отметим, что своих атрибутов, за исключением глобальных, данные элементы не имеют, а браузеры по умолчанию отображают их, как блочные элементы.
htmlCodes
<!-- Указываем тип документа -->
<!DOCTYPE html>
<!-- Начало документа -->
<html>
<!-- Раздел служебной информации -->
<head>
<!-- Соощаем браузеру кодировку документа -->
<meta charset="utf-8">
<!-- Задаем базовый адрес текущего документа -->
<base href="http://fruits.comm/">
<!-- Заголовок страницы -->
<title>Все о яблоках</title>
<!-- Подключаем таблицу стилей CSS -->
<link href="css/styles.css" rel="stylesheet">
<!-- Подключаем внешний js-скрипт -->
<script src="javascript/scripts.js"></script>
</head>
<!-- Тело документа -->
<body>
<!-- -------------- Шапка сайта ----------------------- -->
<header class="site_header">
<!-- Имя сайта делаем заголовком верхнего уровня -->
<h1 class="site_name">fruits.comm</h1>
<!-- Другое содержимое шапки сайта -->
Логотип, поисковая панель и др. информация
<!-- Панель навигации по сайту -->
<nav class="site_nav">
<!-- Ссылки на страницы сайта -->
<a href="apples.html">Яблоки</a>
<a href="oranges.html">Апельсины</a>
</nav>
</header>
<!-- -------- Боковая панель -------------------- -->
<aside class="site_aside">
<div class="adv_block" id="adv1">
Например, 1-й блок для сопутствующей рекламы.
</div>
<div class="adv_block" id="adv2">
Например, 2-й блок для сопутствующей рекламы.
</div>
</aside>
<!-- ----------- Уникальный контент страницы -------------- -->
<main>
<!-- Делаем разметку для статьи о яблоках -->
<article>
<!-- Собственная шапка -->
<header>
<!-- Задаем собственный заголовок 2-го уровня -->
<h2>Красные или зеленые яблоки?</h2>
<!-- Внутренняя навигация по статье -->
<nav>
<ul>
<li><a href="#red_apples">О красных сортах яблок</a></li>
<li><a href="#green_apples">О зеленых сортах яблок</a></li>
</ul>
</nav>
</header>
<!-- ----------- 1-й раздел статьи ---------- -->
<section id="red_apples">
<!-- Задаем собственный заголовок 3-го уровня -->
<h3>О красных сортах яблок</h3>
<p>
Не для кого не секрет, что красные сорта яблок...
</p>
</section>
<!-- ---------- 2-й раздел статьи ----------- -->
<section id="green_apples">
<!-- Задаем собственный заголовок 3-го уровня -->
<h3>О зеленых сортах яблок</h3>
<p>
Зеленые сорта яблок...
</p>
</section>
<!-- ---------- «Подвал» всей статьи ----------------------- -->
<footer class="site_footer">
<p>
Дата публикации: <time datetime="2015-05-15 19:00">15 мая</time>
</p>
<!-- Информация об авторе -->
<address>
Автор: Иванов Иван Иванович<br>
Тел. +375-444-44-44 (до 23-00)
</address>
</footer>
</article>
<!-- ... и другие статьи, например, о пирогах с яблоками -->
</main>
<!-- ---------- «Подвал» сайта ----------------------- -->
<footer class="site_footer">
<!-- Информация о владельце -->
<address>Петр Романовский, Минск, 2016-2099.</address>
</footer>
</body>
</html>
Пример №1. Использование элементов структурной разметки
«Шапка» сайта, тег <header>
Элемент «header» формируется парным тегом <header> (от англ. header – шапка, верхний колонтитул) и устанавливает шапку веб-страницы или раздела. Если он выступает в роли шапки сайта, то в нем обычно располагаются имя сайта, логотип, меню, поисковая панель или дополнительная информация (см. пример №1). Кроме того, он может формировать заголовки разделов (секций) html-страницы. Внутри данного элемента запрещается располагать элемент «main» или другой элемент «header». При этом сам элемент «header» запрещается вкладывать внутрь элементов «footer» и «address».
Основное содержимое страницы, тег <main>
Элемент «main» формируется парным тегом <main> (от англ. main – главный, основной) и предназначен для выделения основного содержимого веб-страницы (см. пример №1). На странице разрешается использовать только один элемент «main», внутри которого нужно размещать уникальную информацию текущей страницы, а не повторяющиеся разделы вроде поисковой или навигационной панели сайта. Кроме того, запрещается располагать элемент внутри элементов «header», «footer», «section», «article», «nav» или «aside».
«Подвал» сайта, тег <footer>
Для размещения сведений об авторских правах, контактной информации, даты последнего обновления документа или раздела, дополнительной навигации и прочей информации, относящейся к служебной информации всего сайта или раздела, а не к основному контенту страницы или раздела, используется элемент «footer», который формируется соответствующим парным тегом <footer> (от англ. footer – нижний колонтитул, подвал). На жаргоне веб-разработчиков элемент «footer» называют «подвалом» сайта или раздела (см. пример №1).
Боковая панель сайта. Тег <aside>
Элемент «aside» формируется парным тегом <aside> (от англ. aside – в стороне) и устанавливает боковую панель («сайдбар») веб-страницы. Боковая панель предназначается для размещения сопутствующей, дополнительной информации, которую можно удалить без ущерба для понимания основного содержимого всей страницы или раздела, но в тоже время косвенно связанной с этим содержимым (см. пример №1). Например, боковая панель может содержать блок категорий, рубрик или ссылок по данной теме, блок ссылок на архив или может содержать рекламу, тематически связанную с содержимым страницы или раздела, или даже полноценную статью. Главное, повторимся, что удаление содержимого боковой панели не должно наносить вред пониманию основного содержимого, но вместе с тем, должно быть связано с основным содержимым. При этом не рекомендуется, хотя и допускается, использовать элемент «aside» в качестве боковой панели навигации по сайту, поскольку для этих целей существует специальный элемент «nav», который описывается в следующем пункте.
Создание блоков навигации, тег <nav>
Элемент «nav» формируется парным тегом <nav> (от англ. navigation – навигация) и применяется для создания блока навигации, ссылки которого могут указывать как на разделы самого сайта, так и на внешние ресурсы (см. пример №1). Самих блоков может быть несколько и расположены они могут быть в любом месте тела документа, за исключением элемента «address». При этом рекомендуется использовать его именно в качестве основного меню, чтобы пользователи могли с его помощью свободно перемещаться по разделам сайта. Также элемент «nav» хорошо подходит для навигации по очень большой (длинной) статье, пусть даже и расположенной на одной странице, но содержащей много разделов и заголовков различных уровней.
Создание тематических разделов, тег <section>
Для того, чтобы можно было разбить веб-страницу на тематические разделы, в HTML был введен еще один элемент разметки «section». Формируется он соответствующим парным тегом <section> (от англ. section – секция, раздел). Данные тематические разделы подразумевают, как правило, наличие собственных заголовков. В качестве тематических разделов могут выступать, например, пункты данного параграфа, главы содержимого страницы или блоки с кратким описанием разделов сайта на домашней странице (см. пример №1). Отметим, что данный элемент должен применяться для явного разделения страницы на разделы, чтобы они различались по содержанию и смыслу. Разрешается использовать одни элементы «section» внутри других.
Выделение раздела для новости или статьи, тег <article>
Элемент «article» выделяет независимый фрагмент веб-страницы, который можно отнести к статье, новости, сообщению на форуме или записи комментария. При этом содержимое элемента должно быть связано с общим содержимым страницы, но также иметь и свой собственный смысл. Формируется элемент при помощи соответствующего парного тега <article> (от англ. article – статья). В данных элементах может присутствовать собственный заголовок одного из уровней h1-h6, а также собственные локальные элементы «header», «footer», «section», «nav» или «aside» (см. пример №1). Более того, разрешается использовать одни элементы «article» внутри других.
Быстрый переход к другим страницам
- Группировка элементов формы, теги <fieldset> и <legend>
- Основные элементы разметки html-документа
- Понятие файловой структуры сайта
- Вернуться к оглавлению учебника