Html5 структура документа: Использование разделов и создание структуры HTML документа — Веб-технологии для разработчиков – Структура документа HTML5

Содержание

Структура html5 для начинающих — Уроки верстки FreeHtmlThemes

Каждый, даже самый непродвинутый пользователь, хоть раз сталкивался с таким понятием, как HTML. Что же это такое и для каких целей его использовать? Аббревиатуру HTML можно расшифровывать как Hypertext Markup Language. Проще говоря, это язык, используемый для разметки гипертекста. HTML сложно отнести к языкам программирования, это понятие скорее относится к области размещения элементов в браузере. При помощи HTML можно показать обозревателю, как должны располагаться элементы на странице сайта, когда пользователь откроет сайт. 

HTML-элемент – рисунки, текст, анимация и все, что мы помещаем на странице. HTML помогает расположить эти элементы на странице, выбрать текст заголовков, создать переход на другую страницу и другое. 

Что такое теги и для чего они нужны?

Если открыть код любой страницы HTML, то можно заметить, что состоит она из множества непонятных, на первый взгляд, символов. Эти символы являются основой HTML – это теги. Некоторые теги требуют обязательного закрытия, хотя современные браузеры иногда и игнорируют ошибку подобного рода, но пренебрегать правилами нельзя, это может нарушить структуру документа, некоторые же теги не требуют закрытия вовсе. Нужно быть внимательными.

HTML -документ состоит из следующих обязательных, основополагающих тегов, без которых невозможна страница в сети:

<!DOCTYPE html>
<head> Заголовок
</head>
<body>
Тело
</body>
</html>

Теги !DOCTYPE html> </html> всегда открывают и закрывают документ, DOCTYPE объясняет непонятливому браузеру, как стоит разбирать этот документ, в старых версиях HTML доктайп имел разные значение, в современной пятой версии допустимо вышепредставленное написание, поэтому не будем углубляться в подробности и используем его. Между ними помещаются все остальные теги.

Сам документ делится на «голову» и «тело» документа. Для этого используются теги

<body> </body> и <head> </head>. Не сложно догадаться, что тег <body> это тело документа со всеми элементами, которые отображаются на странице, а <head> это голова, в которой содержатся скрипты, метаданные и проч. Содержимое тега head физически мы не видим, но он имеет колоссальное значение для продвижения и функционирования страниц сайта.

Внутри тегов html помещают другие теги, не забывают про голову и тело документа, например,

<b>Содержимое 1</b><p>Содержимое 2</p><div>Содержимое 3</div>

В первом случае выделяем текст жирным, во втором добавляем абзац, а в третьем добавляем блочный элемент div с текстом внутри.

Тег <title> </title>. Это обязательный тег, с его помощью размещается необходимый заголовок страницы сайта. Его оптимальная длина 60-70 символов, будьте внимательны. Это название будет отображаться в выдаче поисковика и на вкладке браузера и необходимо для SEO-продвижения. Его необходимо поместить между тегами

<head> </head>

Еще одним важным одиночным мета-тегом, который необходимо писать в head проекта становится кодировка документа. Она необходима, чтобы не произошло путаницы с предполагаемой и фактической кодировкой, иначе отображение всего вашего важного контента может превратиться в набор невнятных символов. Самая распространенная кодировка для кириллицы — utf-8, использование других кодировок, на основе windows считается дурным тоном сейчас.

Для поисковой системы большое значение имеют еще два мета-тега, которые прописываются в голове документа, это Keywords (ключевые слова) и Description (краткое описание). В них пишется информация не для пользователей, а для поисковиков, чтобы рассказать о ключевых моментах статьи и ее кратком описании (Длина до 120 символов). Значение для поисковых сиситем этих тегов сейчас остается загадкой, раньше ключевики большое влияние оказывали на выдачу, сейчас ситуация спорная.

<head>
<title>Заголовок</title>
<meta charset="utf-8">
<meta name="description" content="описание">
<meta name="keywords" content="ключевые, слова, через, запятую">
</head>

Почти все теги имеют парную структуру: <> и </>. Это контейнер. Все, что помещается между ними, например, «Заголовок» — содержимое контейнеров.

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

Атрибуты тегов.

Теги могут обладать атрибутикой. Наподобие параметра bgcolor:

<body bgcolor="grey">Текст</body>

Таким образом тег <body> имеет атрибут bgcolor со значением «grey». Так можно сделать фон документа серым. Набор атрибутов у каждого тега различается, все зависит от функционала данного элемента. 

Все теги и атрибуты находятся в свободном доступе. Зайдя в поисковую систему, можно с легкостью найти все теги и параметры, а также их значения. По сути, документ HTML состоит и этих элементов, меняя которые можно построить структуру сайта. Например, на сайта http://htmlbook.ru вы найдете подробное описание всех элементов HTML страницы, тегов, атрибутов, примеров использования. Научиться применять 

Выстраивание логической структуры страницы сайта на HTML5

Одной из задач создания новой версии HTML5 было упрощение разметки документа. Решением данной задачи стало создание новых тегов, которые отвечают за структуризацию документа.

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

Основной принцип построения дерева страницы основывается на дроблении всей страницы на структурные элементы – блоки или секции. К числу этих секций относят такие теги, как <header> (шапка сайта), <section>, <aside>, и <footer> (подвал). До момента создания вышеперечисленных тегов верстальщики использовали теги <div> для структуризации документа с использованием уникальных классов и id. Код, построенный исключительно на <div> очень сложный для восприятия и не читабельный. Причиной этого является отсутствие логической нагрузки на теге. Это было главным камнем преткновения для поисковых систем.

Данный факт стимулировал появления на свет тегов со смысловой нагрузкой, что стало так называемой «картой» для роботов в дремучем лесу кода.

Положительные стороны использования новых тегов

Поисковая оптимизация

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

Вследствие этого поисковые системы повысят эффективность нахождения уникального контента и плагиата.

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

Доступность

Для наглядного разбора доступности новых методов верстки рассмотрим пример сайта:

Пример сайта

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

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

Эти положительные стороны HTML5 повлияли на неожиданный интерес создателей альтернативных систем поиска, они делают серьезный уклон на семантику документа.

Коротко об основном назначении структурных тегов:

section

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

Более подробно о использовании этого тега для построения семантической структуры документа можно прочесть в статье «Построение структуры документа в HTML5 используя section»

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

<article>
   <h2>Заголовок статьи</h2>
   <p>Вступительное слово...</p>
   <section>
      <h2>Заголовок подраздела статьи</h2>
      <p>Контент подраздела</p>
   </section>
   <section>
      <h2>Заголовок второго подраздела статьи</h2>
      <p>Контент подраздела</p>
   </section>
</article>

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

Некоторые пользователи утверждают, что <section> — это не более, чем замена тега блочной верстки <div>. Однако это утверждение не верно. Существует четкое разграничение, когда применение section уместно, а когда нет. К примеру, при привязки некоторому контейнеру особого стиля нужно обращаться только к

<div>. Также стоит обращать внимание и на смысловую нагрузку, которая есть в блоке- section не употребляется при отсутствии естественного заголовка.

article

Опытные веб-мастера называют эту секцию частным случаем тега <section>. Article выделяет «автономную» (такую, которую в целом можно вырезать из страницы, и при этом она не потеряет своего смысла) часть страницы, которая в свою очередь состоит из взаимосвязанных элементов.

К примерам автономных частей можно отнести анонсы статей на блоге, рекламные блоки, различные виджеты (к примеру с погодой).

Однако, в спецификации достаточно заумно описано это понятие, в следствие чего возникло очень много споров по поводу того, что именно использовать: <section> или <аrticle>. К основным разногласиям по этому вопросу можно отнести следующие моменты:

  • для создания главного контейнера веб-страницы следует использовать
    <section>, <аrticle>
    или <div>. С одной стороны все содержимое так или иначе связано между собой, однако сайт можно назвать независимой единицей.
  • как именно оформлять шапку сайта, а точнее какие теги использовать?
  • и, наконец, как работать с основным контентом сайта? Нужно использовать <section> с <аrticle> внутри или же исключительно пользоваться одним <аrticle>.

Эта путаница напоминает те времена, когда аналогичные споры возникали при использовании тегов <acronim> и <abbr>. В тот раз проблема была решена достаточно просто, но радикально: отказались от использования <acronim>.

И в связи со всем этим возникает вполне логичный и законный вопрос: зачем использовать <аrticle>, если можно отказаться от него и работать только с <section>? В конечном итоге модернизация HTML5 была направлена на облегчения работы веб-мастеров.

Скорее всего в данном случае отказаться от <аrticle> будет не корректно, так как мы бы получили абсолютно идентичную разметку в блочном стиле, которая была в предыдущей версии HTML. Решением данного вопроса стало бы усовершенствование <section> таким образом, чтобы были видны четкие различия между основным контентом сайта и вспомогательной информации.

В помощь начинающим мастерам сайтостроения предлагаю несколько особенных черт, по которым можно достаточно просто решить, когда именно нужно использовать <аrticle>:

  1. Основной подход – имеет ценность для пользователя, привлекает его внимание, тобишь основное содержимое страницы.
  2. Если рационально было бы добавить атрибуты pubdat или cite.
  3. В случае полной автономности рассматриваемого нами фрагмента кода.

aside

Создан для отделения основного содержимого страницы от вспомогательного.

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

Чаще всего подобная информация на сайте располагается в сайдбаре.

header

Служит для четкого выделения заглавной части страницы. В нем располагаются заглавия как всего документа, так и отдельных его частей. Чаще всего внутри этой секции можно встретить такие теги, как <hgroup> и <h2>-<h6>. Однако это предписание не обязательно, в принципе в header могут распологаться любые теги.

Стоит отметить, что в первую очередь данный тег применяют при создании шапки, как указано в примере:

<header>
   <a href="/"><img src="logo.png" alt="Vaden Pro/></a>
   <ul>
      [меню]
   </ul>	
   [поиск]
</header>

Однако не стоит ограничивать данный тег шапкой для веб-страницы. <header> он может располагаться внутри <section>, <article>, <aside> и в особых исключительных случаях в <nav>. При таком подходе тег <header> является дочерним элементом и соответствует заглавию этой отдельной части. Рассмотрим пример, когда <header> используется внутри <article>:

<article>
   <header>
      <h2>Важный текст</h2>
      <time>21.02.10</time>
   </header>
   [Текст публикации]
</article>

Стоит отметить, что header собирает воедино заголовок части, однако если эта самая часть состоит только из названия, то применять данный тег не следует:

<article>
   <header>
      <h2> Важный текст </h2>
   </header>
   [Текст публикации]
</article>

Это нерациональное использование header, более правильной с точки зрения семантики будет следующая запись кода:

<article>
   <h2> Важный текст </h2>
   [Текст публикации]
</article>

footer

Опускаясь по структуре сайта все ниже мы постепенно подошли к нашему «подвалу», в котором располагается некоторая описательная информация раздела или сайта в общем. Эта информация отделяется тегом <footer>:

<footer>
   <p>&copy; 2014 Vaden Pro</p>
   <p>Все права защищены</p>
</footer>

В этой части сайта принято располагать информацию о правах на авторство данного ресурса, копирайт, различные ссылки на вспомогательные ресурсы и прочее. Именно поэтому нельзя ограничивать использование тега <footer> исключительно на главной странице. рационально будет его использование и в различных разделах ресурса. Также не стоит заблуждаться, что <footer> обязательно должен находиться в самом низу сайта. К примеру, имеет место такая разметка страницы:

<article>
   <header>
      <h2>Важная информация</h2>
      <time>05.04.2015</time>
   </header>
   <footer>
      <div>Данил Гойда</div>
      <a href="#">об авторе</a> | <a href="#">Все публикации автора</a>
   </footer>
   [сама публикация]
</article>

nav

Использование nav отвечает за разделение навигационной части сайта и основного контента. Внутри этого блока могут располагаться не только ссылки на другие страницы сайта, но и якорные ссылки по текущей странице. Для примера посмотрим на следующий код:

<header>
   <a href="/"><img src="logo.png" alt="Vaden Pro"/></a>
   <nav>
      <ul>
         [меню]
      </ul>	
   </nav>
   [поиск]
</header>

Стоит также обратить внимание на то, что формирует не просто перечень ссылок, а самостоятельную секцию со сложной структурой. Смотрим:

<nav>
   <a href="">Сложная навигация</a>
   <section>
      <h2>Первый раздел сайта</h2>
      <ul>
         <li><a href="">пункт</a></li>
         [...]
      </ul>
   </section>
   <section>
      <h2>Второй раздел сайта</h2>
      <ul>
         <li><a href="">Пункт</a></li>
      </ul>
   </section>
</nav>

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

Оценок: 7 (средняя 4.4 из 5)

HTML5 секционные элементы, заголовки и структура документа

Перевод статьи: HTML5 sectioning elements, headings, and document outlines.
Автор: Roger Johansson.

Одна из тем, к рассмотрению которой я возвращался уже несколько раз – это использование заголовков с целью создания корректной структуры HTML документа. В статье «Влияние заголовков на структуру документа» вы можете ознакомиться с моими рассуждениями на эту тему.

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

Структура, предусмотренная HTML 4.01 стандартом.

Для того, чтобы вам было понятней, давайте рассмотрим пару примеров. Сначала взгляните на упрощенный вариант типичного HTML 4.01 документа, содержащий в своем составе статью:

<body>
<div>Site title etc.</div>
<div>
<ul>
<li><a href=»/»>Nav item</a></li>
</ul>
</div>
<div>
<h2>Article title</h2>
<p>Article content.</p>
<h3>Article sub-heading</h3>
<p>More content.</p>
<h4>Article sub-sub-heading</h4>
<p>More content.</p>
</div>
<div>
<h3>Sidebar heading</h3>
<h4>Sidebar sub-heading</h4>
</div>
<div>
<h3>Footer heading</h3>
<p>Footer content.</p>
</div>
</body>

В результате такой разметки получаем следующую структуру документа (для просмотра структур веб-документов вы можете воспользоваться соответствующим расширением для разработчиков):

1. Article title
1. Article sub-heading
1. Article sub-sub-heading
2. Sidebar heading
1. Sidebar sub-heading
3. Footer heading

Взглянув на нее, вы, возможно, справедливо заметите, что заголовки, находящиеся в боковой колонке и подвале не должны зависеть от заголовка статьи. Хорошо, но давайте отвлечемся на время. В данном случае мы имеем четкую структуру страницы, сформированную заголовками, в которой название статьи является заголовком высшего уровня <h2>. Теперь нам необходимо сохранить положение вещей после приведения структуры к виду HTML5 стандарта.

HTML5 структура документа.

Ну что ж, давайте возьмем за основу HTML 4.01 структуру и при помощи секционных элементов преобразуем ее в новую, полностью отвечающую HTML5 стандарту. В большинстве обучающих пособий и статей для этих целей мне рекомендовалось сделать следующее:

<body>
<header>
Site title etc.
<nav>
<ul>
<li><a href=»/»>Nav item</a></li>
</ul>
</nav>
</header>
<article>
<h2>Article title</h2>
<p>Article content.</p>
<h3>Article sub-heading</h3>
<p>More content.</p>
<h4>Article sub-sub-heading</h4>
<p>More content.</p>
</article>
<aside>
<h3>Sidebar heading</h3>
<h4>Sidebar sub-heading</h4>
</aside>
<footer>
<h3>Footer heading</h3>
<p>Footer content.</p>
</footer>
</body>

Для обеспечения обратной совместимости я не стал менять все заголовки документа на <h2> элементы, как это рекомендуется делать в HTML5 спецификации, а оставил прежние уровни для всех заголовков (тем более, что в нашем случае тотальная замена заголовков на <h2> ни как не повлияет на структуру документа HTML5 стандарта). В результате мы получим структуру совершенно идентичную той, которая была в предыдущем HTML 4.01 примере. Именно ее и формирует браузер, не использующий новый алгоритм HTML5 стандарта. Но в том случае, если вы используете инструмент, подобный HTML5 outliner, который как раз таки и применяет вышеупомянутый алгоритм, то в результате вы увидите следующую структуру:

1. Footer heading
1. Untitled NAV
2. Article title
1. Article sub-heading
1. Article sub-sub-heading
3. Sidebar heading
1. Sidebar sub-heading

Что вы скажите на этот раз? Как же получилось так, что находящийся в элементе <footer> заголовок определен как самый важный на странице? И почему секция <nav> в структуре документа получила статус Untitled (безымянной)?

Для начала давайте разберемся с подвалом. Элемент <footer> не делит контент документа на секции (разделы), то есть с его помощью невозможно создать новую секцию. По этой причине, присутствующий в примере заголовок <h3>Footer heading</h3> является единственным в контексте элемента <body>. А учитывая то, что <body> создает корневую секцию, то алгоритм построения структуры документа присваивает этому заголовку высший уровень, несмотря на то, что он является последним заголовком в документе и реализован с использованием тега <h3>.

Так какой же выход из создавшейся ситуации? Мы можем «изолировать» находящийся в подвале заголовок при помощи секционного элемента, и после этого он уже не будет интерпретироваться как заголовок документа в целом:

<footer>
<section>
<h3>Footer heading</h3>
<p>Footer content.</p>
</section>
</footer>

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

1. Untitled BODY
1. Untitled NAV
2. Article title
1. Article sub-heading
1. Article sub-sub-heading
3. Sidebar heading
1. Sidebar sub-heading
4. Footer heading
Создание навигационных разделов <nav>.

В результате у нас появилось два безымянных раздела. То, что касается элемента <nav>, то он отображается без названия, так как представляет собой секционный элемент и алгоритм построения структуры документа просто создает для него новый раздел и соответствующий ему пункт в структуре документа. А поскольку в <nav> элементе отсутствует заголовок, то он отображается как безымянный навигационный раздел Untitled NAV.

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

<nav>
<h3>Main navigation</h3>
<ul>
<li><a href=»/»>Nav item</a></li>
</ul>
</nav>

Как быть с Untitled BODY?

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

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

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

Не используйте секционные элементы.

Исключение секционных элементов из документа предотвращает возникновение данной проблемы. Структура будет формироваться по старым правилам. Единственный очевидный недостаток в этом случае, это то, что если браузеры однажды все-таки начнут поддерживать эти элементы, то вы не сможете воспользоваться их гипотетическими преимуществами. Звучит не убедительно, неправда ли?

Повторно указывать заголовок статьи за рамками всех секционных элементов.

То есть, дублирование главного заголовка с последующим скрытием его при помощи CSS лишь с целью его корректного расположения в структуре документа? Я думаю, что это плохая идея. Взгляните на эту ситуацию с точки зрения доступности документа (его прочтения при помощи специальных программ) или с колокольни SEO.

Установить название сайта в качестве заголовка документа высшего уровня.

Существует мнение, что в качестве главного заголовка документа можно использовать имя сайта, компании или содержимое логотипа. Я лично не разделяю его, так как считаю, что именно название текущей страницы имеет принципиально важное значение при ее просмотре.

Не используйте элементы <article> в одностатейных документах.

А как насчет того, чтобы всё-таки применять секционные элементы, но именно в одностатейных документах не заключать их содержание в рамки элемента <article>, что приведет к тому, что заголовки самих публикаций будут одновременно представлять корневой элемент документа <body>. Что-то вроде этого:

<body>
<header>
Site title etc.
<nav>
<h3>Main navigation</h3>
<ul>
<li><a href=»/»>Nav item</a></li>
</ul>
</nav>
</header>
<div>
<h2>Article title</h2>
<p>Article content.</p>
<h3>Article sub-heading</h3>
<p>More content.</p>
<h4>Article sub-sub-heading</h4>
<p>More content.</p>
</div>
<aside>
<h3>Sidebar heading</h3>
<h4>Sidebar sub-heading</h4>
</aside>
<footer>
<h3>Footer heading</h3>
<p>Footer content.</p>
</footer>
</body>

В результате структура будет выглядеть так:

1. Article title
1. Main navigation
2. Article sub-heading
1. Article sub-sub-heading
3. Sidebar heading
1. Sidebar sub-heading
4. Footer heading

Здесь уже наблюдается некоторое улучшение. Единственная проблема заключается в том, что порядок, в котором представлены пункты структуры документа, не соответствует тому, как они располагаются в его разметке. И это может стать реальной проблемой для тех пользователей, которые перемещаются по странице, ориентируясь по ее заголовкам, представленным в том порядке, в котором их располагает браузер, формируя структуру документа. И я не имею ни малейшего понятия, действительно ли такие инструменты как программы чтения с экрана будут поступать именно таким образом, если они начнут поддерживать HTML5 спецификацию. Поэтому не могу утверждать, что данная проблема будет напрямую отнесена к вопросу юзабилити.

Другой путь решения этой проблемы – использование имени сайта в качестве заголовка высшего уровня <h2> документа. Тогда в элементе <header> необходимо сделать следующие изменения:

<header>
<h2>Site title etc.</h2>
<nav>
<h3>Main navigation</h3>
<ul>
<li><a href=»/»>Nav item</a></li>
</ul>
</nav>
</header>

Которые приведут к такой структуре:

1. Site title etc.
1. Main navigation
2. Article title
1. Article sub-heading
1. Article sub-sub-heading
2. Sidebar heading
1. Sidebar sub-heading
3. Footer heading

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

Я полагаю, что вы тоже запутались.

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

Вполне допустимо, что я не верно понял или упустил из виду какие-либо нюансы, в этом случае буду рад вашим замечаниям и поправкам.

Post Views: 289

Секции и структура документа в HTML5

Подготовил: Евгений Рыжков Дата публикации: 03.03.2011

Последнее обновление: 19.04.2011

В данной статье пойдет речь о способах построения семантической структуры документа (не путать с деревом документа или DOM). Для начала рассмотрим как строится структура документа в HTML4.

Структура документа в HTML4

В HTML4 создать логическую структуру документа можно было только одним путем — это использование заголовков <h2>-<h6>. Например следующий код:

<div>
	<h2>Forest elephants</h2>
	<p>In this section, we discuss the lesser known forest elephants.
	...this section continues...
	<div>
		<h3>Habitat</h3>
		<p>Forest elephants do not live in trees but among them.
		...this subsection continues...
	</div>
</div>

строит следующую структуру:

1. Forest elephants
   1.1 Habitat

Замечу, что ни <div> ни какие-либо другие теги кроме заголовков не имеют влияния на структуру. Поэтому следующий код построит структуру идентичную предыдущей:

<h2>Forest elephants</h2>
<p>In this section, we discuss the lesser known forest elephants.
...this section continues...
<h3>Habitat</h3>
<p>Forest elephants do not live in trees but among them.
...this subsection continues...

В HTML4, можно сказать, критически важным было соблюдение правильной вложенности заголовков (если, конечно, тебе не «по барабану» была грамотно построенная структура).

Семантические недостатки HTML4

  1. Использование <div> для разметки семантических блоков делает практически невозможным чтение структуры документа в автоматическом режиме. Особенно это важно для вспомогательных технологий вроде голосовых браузеров.
  2. Не удобно и временами трудоемко объединять HTML документы: после объединения нужно проверить и при необходимости изменить уровни заголовков, чтобы соблюсти правильную вложенность.
  3. Нет возможности использования альтернативного или вспомогательного заголовка, т.к. каждый заголовок создает подраздел. Пример из жизни, есть основной заголовок сайта — «mpbox.ru». И есть вспомогательный (слоган) — «Основы и секреты front-end разработки». Если сделать следующую разметку:
    <h2>mpbox.ru</h2>
    <h3>Основы и секреты front-end разработки</h3>
    
    получим структуру:
    1. mpbox.ru
    	1.1 Основы и секреты front-end разработки
    
    В данном случае получилась ложная ветка в структуре, поэтому, что избежать таковой, часто в разметке для слоганов используется нейтральный элемент:
    <h2>mpbox.ru</h2>
    <div>Основы и секреты front-end разработки<div>
    
  4. Нет возможности выделить подразделы, которые не имеют отношения к данному материалу. В HTML4 каждый подраздел является частью раздела, в котором он находится. Но все подразделы имеют прямое отношение к текущему содержимому. Например, рекламный блок в статье.
    Так же сюда можно отнести и общую информацию о сайте, которая не имеет никакого отношения к текущему материалу, но является частью общей страницы. Например, логотип mpbox.ru, форма поиска и копирайты никак не связаны со статьей, которую ты сейчас читаешь.

HTML5 решает данные проблемы введением новых семантических тегов. Разметка на основании которых будет более понятной и предсказуемой для любых пользовательских агентов.

Алгоритм построения структуры в HTML5

Определение секций в HTML5

В HTML5 для формирования секций используются следующие элементы: <body>, <section>, <article>, <aside>, <footer>, <header> и <nav>. Тег <body> формирует корневую секцию. Пример:

<section>
	<h2>Forest elephants</h2>
	<section>
		<h3>Introduction</h3>
		<p>In this section, we discuss the lesser known forest elephants
	</section>
	<section>
		<h3>Habitat</h3>
		<p>Forest elephants do not live in trees but among them.
	</section>
	<aside>
		<p>advertising block
	</aside>
</section>
<footer>
<section>
	<p>(c) 2010 The Example company
</section>
</footer>

Данный код формирует две секции верхнего уровня:

<section>
	<h2>Forest elephants</h2>
	<section>
		<h3>Introduction</h3>
		<p>In this section, we discuss the lesser known forest elephants
	</section>
	<section>
		<h3>Habitat</h3>
		<p>Forest elephants do not live in trees but among them.
	</section>
	<aside>
		<p>advertising block
	</aside>
</section>
<footer>
<section>
	<p>(c) 2010 The Example company
</section>
</footer>

Первая секция имеет три подуровня:

<section>
	<h2>Forest elephants</h2>
	<section>
		<h3>Introduction</h3>
		<p>In this section, we discuss the lesser known forest elephants
	</section>
	<section>
		<h3>Habitat</h3>
		<p>Forest elephants do not live in trees but among them.
	</section>
	<aside>
		<p>advertising block
	</aside>
</section>
<footer>
<section>
	<p>(c) 2010 The Example company
</footer>
</section>

В итоге получаем такую структуру документа:

1. Section
   1.1 Section
   1.2 Section
   1.3 Section (aside)
2. Section 

Данный способ получил название явное секционирование. Есть еще неявное, с помощью элементов <h2>-<h6>.

Пример по «живому»

Попробуем разбить на основные секции не сложный сайт на примере mpbox.ru. Начнем с шапки:

Исходя из этих соображений получаем такой код:

<header>
	<hgroup>
		<h2>mpbox.ru</h2>
		<h3>Основы и секреты front-end разработки</h3>
	</hgroup>
	<section>
		<form action="">
		[содержимое формы]
		</form>
	</section>
	<nav>
	<ul>
	[содержимое меню]
	</ul>
	</nav>
	<a href="">twitter</a>
	<a href="">RSS</a>
	<a href="">email</a>
	<aside>
		[рекламный банер]
	</aside>
</header>

О заголовках и в часности о <hgroup> читай в «Заголовки в HTML5 — неявное секционирование» (скоро будет). Далее рассмотрим среднюю часть сайта:

Получаем код:

<article>
	[анонс 1]
</article>
<article>
	[анонс 2]
</article>
<div>
	<aside>
		<h2>Книги веб разработчикам</h2>
		<ul>
		[список книг]
		</ul>
	</aside>
	<aside>
		[гугл адсенс]
	</aside>
</div>

<div> тут не создает никакой семантики, он используется исключительно в оформительных целях — формирует колонку сайдбара. И напоследок разберем подвал:

Код для подвала:

<footer>
	<section>
		<h2>Инфо</h2>
		<ul>
		[ссылки]
		</ul>
	</section>
	<section>
		<h2>Разделы</h2>
		<ul>
		[ссылки]
		</ul>
	</section>
	<div>[копирайты + сеотекст]</div>
</footer>

Роль div в HTML5

Тег <div> в HTML5 не будет таким популярным как в HTML4. Он будет служит только для привязки оформления и сценариев к определенным участкам. На семантику кода он никак не влияет и может располагаться где угодно. Например, можно обернуть весь код общим дивом для выравнивания сайта по середине окна браузера, чтобы не выравнивать каждую основную секцию (шапку, подвал, контент) отдельно.

Подводя итоги

Семантические теги делают разметку куда читабильней и понятней даже для автоматического разбора. Что не может не радовать, так это добавка творчества в нашу работу (ура!): теперь вместо механической расстановки дивов, нужно будет хотя бы немного подумать какой структурой лучше представить свой документ. Один и то же макет можно будет сверстать используя разную структурную разметку. Даже такой простой пример кода как рассмотренный выше для mpbox.ru, может вызвать споры. Например, каждый анонс может выступать отдельным <article>, блок со списком анонсов стал бы <section>, сайдбар можно представить одним тегом <aside> и т.д. Это остается на усмотрение front-end разработчика.

Материалы

По теме

Построение структуры документа в HTML5 используя section

В первую очередь следует рассмотреть строение структуры документа HTML. Имеется ввиду именно семантическая структура, которую в некоторых отдельных случаях неопытный пользователь путает с деревом документа (DOM).

Построение структуры документа в среде HTML4

При создании документа в среде HTML4 логическая структуризация базировалась на использовании тегов заголовков – h2, h3,..,h6. Для наглядности стоит рассмотреть следующий пример:

<div>
   <h2>Важный заголовок</h2>
   <p>Какое-либо содержимое страницы</p>
   <div>
      <h3>Подзаголовок</h3>
      <p>Какое-либо содержимое страницы</p>
   </div>
</div>

В результате изучения данного примера вырисовывается следующая структура:

1. Важный заголовок
   1.1. Подзаголовок

В вышеуказанном примере присутствуют теги div, которыми можно пренебречь в силу того, что на семантическое строение документа они не оказывают никакого влияния и используются только для выстраивания визуального оформления через CSS в будущем. С точки зрения семантики нас интересуют исключительно заголовки.

Таким образом, код, на который обращает внимание поисковый робот, выглядит примерно следующим образом:

<h2>Важный заголовок</h2>
<p>Какое-либо содержимое страницы</p>
<h3>Подзаголовок</h3>
<p>Какое-либо содержимое страницы</p>

Подводя итог вышесказанному, стоит отметить, что в HTML4 грамотная постановка структуры документа основывалась на рациональной расстановке заголовков внутри документа.

Недостатки семантики HTML4

  • Во-первых, это невозможность чтения структуры документа в автономном режиме из-за применения тега <div> при отмечании семантических блоков. Это играет важную роль при использовании дополнительных программ браузера, к примеру – голосовой ввод запроса.
  • Следующий недостаток заключается в трудоемкости объединения двух разных документов HTML. В свою очередь эта трудоемкость заключается в сопряжении заголовков. Для построения грамотной структуры документа необходимо изменить уровни заголовков.
  • Также к недостаткам следует отнести невозможность одновременного использования основного и альтернативного заголовков. К примеру, множество компаний под своим названием пишут свой слоган. Вот этот слоган и будет альтернативным заголовком.При разметке
    <h2>Vaden Pro</h2>
    <h3>Выйди за рамки. Ультиматумная веб-разработка</h3>

    Получим ложную ветку в логической структуре документа. Чтобы этого избежать, луче для подзаголовка использовать нейтральные элементы:
    <h2>Vaden Pro</h2>
    <p class=”slogan”>Выйди за рамки. Ультиматумная веб-разработка</p>
  • И в заключении следует отметить неспособность отделять подразделы, относящиеся к разным тематикам и не связаны между собой. Примером этого явления служат вставки рекламы внутри основного содержимого страницы. Под эту же категорию попадает и информация с сайта, которая указана на данной странице, но не связана с ее содержанием (меню навигации, последние обновления блога и тд).

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

Выстраиваем структуру документа по стандартам HTML5

Секции

В первую очередь для пояснения понятия секций необходимо перечислить неотъемлемые составляющие, с помощью которых они формируются: <header>, <body>, <section>, <article>, <aside>,  <nav> и <footer>. Корневая секция представляется тегом <body>. В качестве примера следует изучить следующий код:

<section>
   <h2>Важный заголовок</h2>
   <section>
      <h3>Подзаголовок 1</h3>
      <p>Какое-либо содержимое страницы</p>
   </section>
   <section>
      <h3> Подзаголовок 2</h3>
      <p>Какое-либо содержимое страницы</p>
   </section>
   <aside>
      <p>Информация сайдбара</p>
   </aside>
</section>
<footer>
   <section>
      <p>Копирайты</p>
   </section>
</footer>

Для простоты понимания уберем сложный для восприятия код и представим структуру документа в следующем виде:

Структура документа в HTML5

Вышеуказанная секционное строение носит явный характер. На практике также встречается и не явное секционирование, которое осуществляется посредством заглавных тегов <h2>-<h6>.

Примеры на практике

Ниже представлен скриншот сайта с указанием основных его структурных частей:

Структура сайта на HTML5

В виде языка HTML сематническая структура данного сайта будет выглядеть следующим образом:

<header>
   <h2>Vaden pro</h2>
   [форма поиска]
   <nav>
      <ul>
      [содержимое меню]
      </ul>
   </nav>
   <p>слоган</p>
</header>
 
<section>
   [описание страницы блога]
</section>
 
<div>
   <section>
      <article>
         [вывод превью статьи]
      </article>
      <article>
         [вывод превью статьи]
      </article>
   </section>
 
   <acide>
      [сайдбар]
   </acide>
</div>

Стоит обратить внимание на тот факт, что в данном случае тег <div> применяется в целях оформление и не несет в себе семантической нагрузки.

Значимость тега div в HTML5

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

Итог

В первую очередь стоит отметить полезность новых тегов для разметки документа, которые упрощают задачу формирования иерархии внутри документа и способствуют облегчению читабельности кода для поискового робота.

Также стоит отметить новую возможность широкой вариации верстки одного и того же кода. В зависимости от стилевого оформления и желаний верстальщика, один и тот же сайт может быть написан разными способами с использованием разной структуры документа.

Оценок: 4 (средняя 4 из 5)

  • 2738 просмотров

Понравилась статья? Расскажите о ней друзьям:

Еще интересное

Структура документа. Заключение. / Habr

В отличие от предыдущих версий HTML и XHTML, которые определяются браузерами их синтаксисом, HTML 5 определяется в зависимости от Document Object Model (DOM) — структура («дерево») документа считываемое браузером для отображения страницы. Например, рассмотрим очень простой документ, состоящий из заголовка, подзаголовка и некоторого текста. Структура DOM будет выглядеть так:

К иллюстрации: структура документа DOM состоит из элемента «title» в заголовка «h2» и «p» элементов в теле документа.


Преимущества такого определения HTML 5 по правилам DOM в том, что сам язык может определяться независимо от синтаксиса. Есть прежде всего два синтаксиса, которые могут быть использованы для представления HTML документов: серия HTML (HTML 5) и серия XML (XHTML 5).

Серия HTML относиться к синтаксису который исходит от SGML ранних версий HTML, но определяется для совместимости с браузерами, фактически, на практике как HTML.

<!DOCTYPE html>
An HTML Document
This is an example HTML document.

Отметим, что в предыдущих версиях HTML некоторые теги необязательны и добавляются автоматически.

Серия XML относится к синтаксису используемому в XML 1.0, ровно как и XHTML 1.0.

An HTML Document
This is an example HTML document.

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

Браузеры используют типы MIME чтобы различать эти документы. Любой документ, представленный как «text/html» должен соответствовать требованиям, предъявляемым к серии HTML, и любой документ с XML MIME типом как application/xhtml+xml должен соответствовать требованиям, предъявляемым к серии XML.

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

Преимущества использования HTML

1. Обратно совместимы с существующими браузерами.
2. Разработчики уже знакомы с синтаксисом.
3. Используемый синтаксис означает, что пользователь не сталкнется с «Желтым экраном смерти», если ошибка все-таки случайно выскользнула.
4. Удобный сокращенный синтаксис, например, разработчики могут пропустить несколько тегов и атрибутов.

Преимущества использования XHTML

1. Строгий синтаксис XML заставляет разработчиков писать хорошо размеченный код, в котором смогут разобраться и другие разработчики.
2. Интегрируется непосредственно с другими XML словари, такими как SVG и MathML
3. Позволяет использовать XML Processing, который некоторые авторы используют как часть процесса редактирования и / или размещения.

Хотите помочь разработчикам HTML 5 ?

Работа по 5 HTML продолжается, и будет продолжаться в течение нескольких лет. Тестирования, требование добиться максимальной совместимости с разными браузерами, различные оценочные работы — все это может занять около 15 лет. В ходе этих разработок, общение с широким кругом людей, в том числе, веб-дизайнерами и разработчиками, поставщиками и продавцами браузеров имеет жизненно важное значение для обеспечения его успеха релиза этих разработок.

В дополнение к спецификации, существует ряд других связанных с этим работ, чтобы помочь людям лучше понять процесс разработки.

1. Отличия от HTML 4 описывают изменения, которые коснулись прошлых версих HTML.
2. Принципы HTML дизайна описывают основные правила, которые помогут принять решения и понять многие существующие принципы разработок.
3. Руководство веб-разработчика HTML 5, было начато только недавно. Его задача — помочь веб-дизайнерам и разработчикам лучше разобраться в нововведениях HTML 5, передать опыт лучших разработчиков

Есть множество способов, с помощью которых вы можете внести свой вклад в развитие HTML 5. Вы можете присоединиться к W3C’s HTML WG или подписаться на рассылку HTML WG или WIKI. Вы также можете подписаться на какую-либо из рассылок WHATWG, общаться на форуме WHATWG, добавить комментарий или написать статьи в блог WHATWG.

Благодарю за внимание.

Секции и структура документа в HTML5

Автор: Евгений Рыжков Дата публикации: 03.03.2011

В данной статье пойдет речь о способах построения семантической структуры документа (не путать с деревом документа или DOM). Для начала рассмотрим как строится структура документа в HTML4.

Структура документа в HTML4

В HTML4 создать логическую структуру документа можно было только одним путем — это использование заголовков <h2>-<h6>. Например следующий код:


<div>
	<h2>Forest elephants</h2>
	<p>In this section, we discuss the lesser known forest elephants.
	...this section continues...
	<div>
		<h3>Habitat</h3>
		<p>Forest elephants do not live in trees but among them.
		...this subsection continues...
	</div>
</div>

строит следующую структуру:


1. Forest elephants
   1.1 Habitat

Замечу, что ни <div> ни какие-либо другие теги кроме заголовков не имеют влияния на структуру. Поэтому следующий код построит структуру идентичную предыдущей:


<h2>Forest elephants</h2>
<p>In this section, we discuss the lesser known forest elephants.
...this section continues...
<h3>Habitat</h3>
<p>Forest elephants do not live in trees but among them.
...this subsection continues...

В HTML4, можно сказать, критически важным было соблюдение правильной вложенности заголовков (если, конечно, тебе не «по барабану» была грамотно построенная структура).

Семантические недостатки HTML4

  1. Использование <div> для разметки семантических блоков делает практически невозможным чтение структуры документа в автоматическом режиме. Особенно это важно для вспомогательных технологий вроде голосовых браузеров.
  2. Не удобно и временами трудоемко объединять HTML документы: после объединения нужно проверить и при необходимости изменить уровни заголовков, чтобы соблюсти правильную вложенность.
  3. Нет возможности использования альтернативного или вспомогательного заголовка, т.к. каждый заголовок создает подраздел. Пример из жизни, есть основной заголовок сайта — «xiper.net». И есть вспомогательный (слоган) — «Основы и секреты front-end разработки». Если сделать следующую разметку:
    
    <h2>xiper.net</h2>
    <h3>Основы и секреты front-end разработки</h3>
    
    получим структуру:
    
    1. xiper.net
    	1.1 Основы и секреты front-end разработки
    
    В данном случае получилась ложная ветка в структуре, поэтому, что избежать таковой, часто в разметке для слоганов используется нейтральный элемент:
    
    <h2>xiper.net</h2>
    <div>Основы и секреты front-end разработки<div>
    
  4. Нет возможности выделить подразделы, которые не имеют отношения к данному материалу. В HTML4 каждый подраздел является частью раздела, в котором он находится. Но все подразделы имеют прямое отношение к текущему содержимому. Например, рекламный блок в статье.
    Так же сюда можно отнести и общую информацию о сайте, которая не имеет никакого отношения к текущему материалу, но является частью общей страницы. Например, логотип xiper.net, форма поиска и копирайты никак не связаны со статьей, которую ты сейчас читаешь.

HTML5 решает данные проблемы введением новых семантических тегов. Разметка на основании которых будет более понятной и предсказуемой для любых пользовательских агентов.

Алгоритм построения структуры в HTML5

Определение секций в HTML5

В HTML5 для формирования секций используются следующие элементы: <body>, <section>, <article>, <aside>, <footer>, <header> и <nav>. Тег <body> формирует корневую секцию. Пример:


<section>
	<h2>Forest elephants</h2>
	<section>
		<h3>Introduction</h3>
		<p>In this section, we discuss the lesser known forest elephants
	</section>
	<section>
		<h3>Habitat</h3>
		<p>Forest elephants do not live in trees but among them.
	</section>
	<aside>
		<p>advertising block
	</aside>
</section>
<footer>
<section>
	<p>(c) 2010 The Example company
</section>
</footer>

Данный код формирует две секции верхнего уровня:


<section>
	<h2>Forest elephants</h2>
	<section>
		<h3>Introduction</h3>
		<p>In this section, we discuss the lesser known forest elephants
	</section>
	<section>
		<h3>Habitat</h3>
		<p>Forest elephants do not live in trees but among them.
	</section>
	<aside>
		<p>advertising block
	</aside>
</section>
<footer>
<section>
	<p>(c) 2010 The Example company
</section>
</footer>

Первая секция имеет три подуровня:


<section>
	<h2>Forest elephants</h2>
	<section>
		<h3>Introduction</h3>
		<p>In this section, we discuss the lesser known forest elephants
	</section>
	<section>
		<h3>Habitat</h3>
		<p>Forest elephants do not live in trees but among them.
	</section>
	<aside>
		<p>advertising block
	</aside>
</section>
<footer>
<section>
	<p>(c) 2010 The Example company
</footer>
</section>

В итоге получаем такую структуру документа:


1. Section
   1.1 Section
   1.2 Section
   1.3 Section (aside)
2. Section 

Данный способ получил название явное секционирование. Есть еще неявное, с помощью элементов <h2>-<h6>.

Пример по «живому»

Попробуем разбить на основные секции не сложный сайт на примере xiper.net. Начнем с шапки:

Исходя из этих соображений получаем такой код:


<header>
	<hgroup>
		<h2>xiper.net</h2>
		<h3>Основы и секреты front-end разработки</h3>
	</hgroup>
	<section>
		<form action="">
		[содержимое формы]
		</form>
	</section>
	<nav>
	<ul>
	[содержимое меню]
	</ul>
	</nav>
	<a href="">twitter</a>
	<a href="">RSS</a>
	<a href="">email</a>
	<aside>
		[рекламный банер]
	</aside>
</header>

О заголовках и в часности о <hgroup> читай в «Заголовки в HTML5 — неявное секционирование» (скоро будет). Далее рассмотрим среднюю часть сайта:

Получаем код:


<article>
	[анонс 1]
</article>
<article>
	[анонс 2]
</article>
<div>
	<aside>
		<h2>Книги веб разработчикам</h2>
		<ul>
		[список книг]
		</ul>
	</aside>
	<aside>
		[гугл адсенс]
	</aside>
</div>

<div> тут не создает никакой семантики, он используется исключительно в оформительных целях — формирует колонку сайдбара. И напоследок разберем подвал:

Код для подвала:


<footer>
	<section>
		<h2>Инфо</h2>
		<ul>
		[ссылки]
		</ul>
	</section>
	<section>
		<h2>Разделы</h2>
		<ul>
		[ссылки]
		</ul>
	</section>
	<div>[копирайты + сеотекст]</div>
</footer>

Роль div в HTML5

Тег <div> в HTML5 не будет таким популярным как в HTML4. Он будет служит только для привязки оформления и сценариев к определенным участкам. На семантику кода он никак не влияет и может располагаться где угодно. Например, можно обернуть весь код общим дивом для выравнивания сайта по середине окна браузера, чтобы не выравнивать каждую основную секцию (шапку, подвал, контент) отдельно.

Подводя итоги

Семантические теги делают разметку куда читабильней и понятней даже для автоматического разбора. Что не может не радовать, так это добавка творчества в нашу работу (ура!): теперь вместо механической расстановки дивов, нужно будет хотя бы немного подумать какой структурой лучше представить свой документ. Один и то же макет можно будет сверстать используя разную структурную разметку. Даже такой простой пример кода как рассмотренный выше для xiper.net, может вызвать споры. Например, каждый анонс может выступать отдельным <article>, блок со списком анонсов стал бы <section>, сайдбар можно представить одним тегом <aside> и т.д. Это остается на усмотрение front-end разработчика.

Материалы

По теме

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *