HTML :: Подробнее о структуре html-документа
- Основные элементы разметки html-документа
- «Шапка» сайта, тег <header>
- Основное содержимое страницы, тег <main>
- «Подвал» сайта, тег <footer>
- Боковая панель сайта, тег <aside>
- Создание блоков навигации, тег <nav>
- Создание тематических разделов, тег <section>
- Выделение раздела для новости или статьи, тег <article>
Основные элементы разметки html-документа
Как мы уже знаем, любой html-документ содержит заголовок документа «head», предназначенный для хранения служебной информации, и тело документа «body», в котором располагается информация, предназначенная для вывода на экран пользователя. Однако с развитием языка HTML он все больше стал отвечать за логическую разметку документа, что привело к появлению ряда новых тегов и сформированных ими элементов: «header», <main>, «footer», «aside», «nav», «section», «article» (см. пример. №1). Все они находятся в теле документа и по необходимости делят его на логические блоки, которые соответствующим образом воспринимаются поисковыми машинами. Отметим, что своих атрибутов, за исключением глобальных, данные элементы не имеют, а браузеры по умолчанию отображают их, как блочные элементы.
<!-- Указываем тип документа --> <!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-документа
- Понятие файловой структуры сайта
- Вернуться к оглавлению учебника