Структура тела документа

Структура тела документа

В HTML5 созданы элементы для создания базовой структуры и макета страницы. Они позволяют объявлять и различать их. Конечно страницы можно писать и без них например с помощью одних <div> не чуть не хуже, но новые элементы уже сами собой подразумевают, то что они значат. Применяя их или нет, у каждой веб страницы есть свой индивидуальный макет, все они различаются наличием или отсутствием определенных элементов или их расположением относительно друг друга.

maket

Это типичная структура сайта. На картинке приведены обозначения и теги с помощью которых они написаны.

Элемент <header> содержит вводную и вспомогательную информацию, такую как заголовки, логотипы, ссылки на соц сети и подобную информацию. Его не стоит путать с элементом <head>? который находится в голове документа.


Пример кода написанный ниже можно скопировать в пустой текстовый файл (например  Блокнот, или Notepad) и сохранить полученный документ под любым именем с расширением .html. Чтобы посмотреть на результат написанного кода можно его открыть в браузере, прямо из него, выбрав пункт меню File, или дважды щелкнуть на нужном файле в файловом менеджере.


 В нем также содержатся заголовки раздела обозначаемые тегами от <h1>до <h6> различающихся соответственно по размеру.

На странице может присутствовать несколько элементов <header>. В первую очередь это основной <header>, представляющий собой область заголовка всего документа. Здесь находятся логотип, основная навигационная панель, названия вашего сайта и учетной записи. Кроме того, на странице могут присутствовать отдельные элементы <header> для каждого блока кода <section> и/или <article>.


Можно считать  элемент <header> семантической заменой основного заголовка <div id="header"> и множественных заголовков разделов <div class="heading">, оставшихся в прошлом.

На странице в первую очередь можно применить  основной <header>, представляющий собой область заголовка всего документа. Здесь находятся логотип, основная навигационная панель, названия вашего сайта и учетной записи. Кроме того, на странице могут присутствовать отдельные элементы <header> для каждого блока кода <section> и/или <article>.

<article>
  <header>
    <h1>Что можно поместить внутрь элемента header </h1>
    <p>внутри него можно поместить и другой интерактивный контент, используя его как контейнер</p>
  </header>
  <p>Его можно использовать неоднократно</p>
</article>


Элемент <nav>

Используется для создания панелей навигации и блока ссылок другие страницы сайта или разделы длинной страницы. При создании основной навигационной панели в такие элементы можно поместить раскрывающиеся меню или другие крупные группы ссылок.

<nav>
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/css/">CSS3</a></li>
<li><a href="/html/">HTML5</a></li>
<li><a href="/js/">JavaScript</a></li>
<li><a href="/access/">Доступ</a></li>
</ul>
</nav>

Можно сделать как вложенным списком, так и без него:

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

Но не все ссылки требуется помещать в блок <nav>; обычно этот блок резервируется для самых больших и наиболее важных разделов навигации страницы. Например, для списка статей  определенно требуется блок <nav>. Но для пары ссылок внизу страницы на условия лицензирования и контактную информацию использование полноценного  блока <nav> не является необходимым.

Технологии могут передать семантический смысл элемента nav. Например при использовании <nav role он может быть объявлен программным обеспечением как элемент навигации при чтении  с экрана, когда пользователь переходит к nav элементу.

Элемент <aside>

Элемент <aside> содержит информацию, которая связана с основным контентом, но имеет самостоятельное значение. Чаще всего этот элемент используют для создания боковых колонок, бокового меню.

Можно придерживаться такого правила: если элемент <aside> вместе с его содержимым убрать со страницы или восприятие остального контента не ухудшиться то смело используйте этот элемент. Его ни сколько не обязательно переносить на боковую панель, он может находиться даже в footere.

Элемент aside не будет отображается по умолчанию, поэтому вам необходимо превратить его в блочный элемент и настроить внешний вид и положение с помощью таблиц стилей. 

<section>
<h1>......</h1>
<!-- Основное содержимое страницы -->
<section>
<aside>
<dl>
<dt>Бытовая техника</dt>
<dd>Посудомоечные машины</dd>
</dl>
</aside>

Разделы и статьи  Элемент <section> и <article>

Объемный документ будет легче восприниматься когда он будет поделен на мелкие составляющие. К примеру все книги поделены на главы, разделы и тому подобное, смысл в том, что вся информация упорядочена, в тексте легко ориентироваться, что искать.

И для этого можно использовать элемент <section>. Существует множество применений элемента section, от деления целой страницы на основные разделы до определения тематических разделов в рамках одной статьи.

Но он имеет семантическое значение, и поэтому используйте его когда делите контент по тематической направленности, а  если вы группируете элементы лишь в порядке оформления, пользуйтесь несемантическим элементом <div>.

Для себя можно также решить, будет ли элемент section использоваться там, где разделяемое содержимое имеет внутри себя естественный заголовок (например, h3).
Если такого заголовка нет, то лучше, наверное, будет воспользоваться
div-контейнером.  Например читаемый контент помещен в элемент <section> и имеет позаголовок h3.

Элемент <article> похож на <section>, и его легко можно спутать. Оба этих элемента относятся к элементам разделов спецификации. Примерами содержимого, пригодного для помещения в элемент <article>, могли бы стать публикации в блогах или новостные сообщения.

Используйте элемент article для независимых работ, которые могут использоваться отдельно или многократно в ином контексте (например, при синдикации). Это полезно для журнальных и газетных статей, сообщений в блогах, комментариев или других элементов, которые можно извлечь для внешнего использования. Можете представить егокак специализированный элемент разделения, отвечающий утвердительно на вопрос: «Может ли этот контент появиться на другом сайте и не потерять свой смысл?»

Можно разбить длинный элемент article на несколько разделов, как показано здесь:
<article>
<h1>Наследование</hl>
<section>
<h2>Как принять наследство</h2>
<р>...</р>
</section>
<section>
<h2>Отказ от наследства</h2>
<р>...</р>
</section>
</article>
И наоборот, элемент section веб-документа может состоять из нескольких статей.
<section id=class1">
<article>
<h1>Наследство по закону</h1>
<р>...</р>
</article>
<article>
<h1>Наследство по завещанию</h1>
<р>...</р>
</article>
</section>
Элементы section и article легко перепутать, особенно потому, что их можно вкладывать друг в друга. Помните, что, если контент автономный и может появляться вне данного контекста, его лучший разметить как article.

Элемент <footer>

Обычно в этом элементе находится второстепенная информация, информация об авторе, ссылки на другой контент. Его нужно использовать для содержания информации о разделе, в котором он находится.

Если есть необходимость то элемент <footer> можно использовать в каждом разделе многократно. 

Контактную информацию спецификация рекомендует размещать в <address>, который в свою очередь может быть размещен в <footer>.

<footer>
<p>Copyright 2019
<address>alexalpenugaЭтот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.;/address>
</p>
</footer>

Есть одна особенность - заголовки <footer> и <aside> не включаются в структуру документа.

Элемент <address>

Он используется исключительно для разметки контактной информации для своего ближайшего предка, <article> или <body>.


Печать