Разметка html5 страницы: Разметка HTML5

HTML5 и алгоритм разметки документов / Хабр

Данная статья вышла в далеком 2011 году, но до сих пор не потеряла актуальности, и собственно говоря я не нашел ничего лучше и понятнее по этой теме. Перевел для вас Кинзябулатов Рамиль.

Вступление

Все мы уже  знаем, что для создания веб-сайтов лучше всего использовать HTML5. Сейчас мы обсудим то, как правильно использовать HTML5. Одной из важных частей HTML5, которую до сих пор не все понимают, является разделение содержимого на разделы: section, article, aside и nav. Чтобы понять разделение содержимого, нам нужно понять алгоритм разметки документа. 

Понимание алгоритма структурирования документа может оказаться непростой задачей, но оно того стоит. Вы больше не будете ломать голову над тем, какой элемент использовать — section или div — вы будете знать это сразу. Более того, вы будете знать, почему эти элементы используются, и именно знание их значения является самым большим достоинством изучения алгоритма.

Дальнейшее чтение на SmashingMag:

• Важность элементов разметки HTML5

• Кодирование макета HTML 5 с нуля

• Наша бессмысленная гонка за значимостью семантики

Что такое алгоритм структурирования документов?

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

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

1. Лошади на продажу

   1. Кобылы

      1. Pink Diva

      2. Ring a Rosies

      3. Chelsea’s Fancy

   2. Жеребцы

      1. Korah’s Fury

      2. Sea Pioneer

      3. Brown Biscuit

Пример 1: Как может быть структурирована страница о лошадях на продажу.

Вот и все: красивый, чистый, легко читаемый список заголовков, отображаемый в иерархии — подобно оглавлению.

Если говорить еще проще, то только две вещи в вашей разметке влияют на внешний вид веб-страницы:

Очевидно, что секционирование содержимого — это новый способ HTML5 для создания разметки. Но прежде чем перейти к этому, давайте вернемся к HTML 101 и рассмотрим, как мы должны использовать заголовки.

Создание разметки с использованием заголовков

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

<div>             
   <h2>Лошади на продажу</h2>
   <h3>Кобылы</h3>
   <h4>Pink Diva</h4>
   <p>Pink Diva родила трех победителей Grand National.</p>
   <h4>Ring a Rosies</h4>
   <p>Ring a Rosies трижды выигрывала Дерби.</p>
   <h4>Chelsea’s Fancy</h4>
   <p>Chelsea’s Fancy родила трех обладателей Золотого кубка. </p>
   <h3>Жеребцы</h3>
   <h4>Korah’s Fury</h4>
   <p>Korah’s Fury стал отцом трех чемпионских скаковых лошадей.</p>
   <h4>Sea Pioneer</h4>
   <p>Sea Pioneer трижды выигрывал "The Oaks".</p>
   <h4>Brown Biscuit</h4>
   <p>Brown Biscuit не стал отцом никого примечательного.</p>
   <p>Все наши лошади поставляются с полным пакетом документов и родословной.</p>
</div>

Пример 2: Наша страница «Лошади на продажу», размеченная с помощью заголовков.

Все очень просто. Контур на примере 1 создан уровнями заголовков.

Чтобы вы знали, что я не выдумываю, скопируйте и вставьте приведенный выше код в превосходный инструмент Джеффри Снеддона для создания схем. Нажмите большую кнопку «Outline this», и вуаля!

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

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

Пример 3 ниже — пример неявного раздела, который заканчивается заголовком того же уровня. А пример 4 — неявный раздел, который заканчивается заголовком более высокого уровня.

<h4>Sea Pioneer</h4><!-- начало неявного раздела -->
<p>Sea Pioneer трижды выигрывал "The Oaks".</p>
<h4>Brown Biscuit</h4><!-- Этот заголовок начинает новый неявный раздел,
поэтому предыдущий, -  "Sea Pioneer" закрывается
 -->

Пример 3: Неявный раздел закрывается заголовком того же уровня

<h4>Chelsea’s Fancy</h4><!-- начало неявного раздела -->
<p>Chelsea’s  родила трех обладателей Золотого кубка.</p>
<h3>Stallions</h3><!-- с этого заголовка начинается новый неявный раздел
используя заголовок более высокого уровня, так что "Chelsea`s Fancy" теперь закрыт -->

Пример 4: Неявный раздел закрывается заголовком более высокого уровня.

Создание схемы с помощью разделения содержимого

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

<div>
   <h6>Лошади на продажу</h6>
   <section>
      <h2>Кобылы</h2>
      <article>
         <h2>Pink Diva</h2>
         <p>Pink Diva родила трех победителей Grand National.</p>
      </article>
      <article>
         <h5>Ring a Rosies</h5>
         <p>Ring a Rosies трижды выигрывала Дерби.</p>
      </article>
      <article>
         <h3>Chelsea’s Fancy</h3>
         <p>Chelsea’s Fancy родила трех обладателей Золотого кубка.</p>
      </article>
   </section>
   <section>
      <h6>Жеребцы</h6>
      <article>
         <h4>Korah’s Fury</h4>
         <p>Korah’s Fury стал отцом трех чемпионских скаковых лошадей.
  </p>
      </article>
      <article>
         <h4>Sea Pioneer</h4>
         <p>Sea Pioneer трижды выигрывал "The Oaks".</p>
      </article>
      <article>
         <h2>Brown Biscuit</h2>
         <p>Brown Biscuit не стал отцом никого примечательного.</p>
      </article>          
   </section>
   <p>Все наши лошади поставляются с полным пакетом документов и родословной.</p>
</div>

Пример 5: Страница лошадей, размеченная с помощью новых структурных элементов HTML5.

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

что схема создается содержимым секций, а не заголовками.

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

Элементы section, article, aside и nav — вот что создает схему, и на этот раз разделы называются явными разделами.

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

В той части спецификации HTML5, которая посвящена заголовкам и разделам, это четко указано:

Разделы могут содержать заголовки любого ранга, но авторам настоятельно рекомендуется либо использовать только элементы h2, либо использовать элементы соответствующего ранга для уровня вложенного раздела.

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

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

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

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

<div>
      <h2>Лошади на продажу</h2>
      <section>
         <h3>Кобылы</h3>
         <article>
            <h4>Pink Diva</h4>
            <p>Pink Diva родила трех победителей Grand National. </p>
         </article>
         <article>
            <h4>Ring a Rosies</h4>
            <p>Ring a Rosies трижды выигрывала Дерби.</p>
         </article>
         <article>
            <h4>Chelsea’s Fancy</h4>
            <p>Chelsea’s родила трех обладателей Золотого кубка.</p>
         </article>
      </section>
      <section>
         <h3>Жеребцы</h3>
         <article>
            <h4>Korah’s Fury</h4>
            <p>Korah’s Fury стал отцом трех чемпионских скаковых лошадей.</p>
         </article>
         <article>
            <h4>Sea Pioneer</h4>
            <p>Sea Pioneer трижды выигрывал "The Oaks".</p>
         </article>
         <article>
            <h4>Brown Biscuit</h4>
            <p>Brown Biscuit не стал отцом никого примечательного.</p>
         </article>           
      </section>
      <p>Все наши лошади поставляются с полным пакетом документов и родословной.
   </p>
   </div>

Пример 6: Страница наших лошадей с разумной разметкой.

Еще один момент, на который стоит обратить внимание, — это положение абзаца «Все наши лошади поставляются с полным пакетом документов и родословной». В примере, где для создания схемы использовались заголовки (прим. 2), этот абзац является частью неявного раздела, созданного заголовком «Brown Biscuit». Читатели ясно увидят, что этот текст относится ко всему документу, а не только к Brown Biscuit.

Секционирование контента решает эту проблему довольно легко, перемещая его обратно на верхний уровень, возглавляемый заголовком «Лошади на продажу».

Смешивание

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

<h2>Лошади на продажу</h2>
   <section>
      <h3>Кобылы</h3>
      <h4>Pink Diva</h4>
      <p>Pink Diva родила трех победителей Grand National. </p>
      <h4>Ring a Rosies</h4>
      <p>Ring a Rosies трижды выигрывала Дерби.</p>
      <h4>Chelsea’s Fancy</h4>
      <p>Chelsea’s  родила трех обладателей Золотого кубка.</p>
   </section>

И это создает разумную иерархическую схему:

1. Horses for sale

   1. Mares

      1. Pink Diva

      2. Ring a Rosies

      3. Chelsea’s Fancy

Пример 7: Скрытые разделы, созданные заголовками внутри явного раздела.

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

<h2>Лошади на продажу</h2>
   <h3>Кобылы</h3>
   <article>
      <h4>Pink Diva</h4>
      <p>Pink Diva родила трех победителей Grand National.</p>
   </article>
   <article>
      <h4>Ring a Rosies</h4>
      <p>Ring a Rosies трижды выигрывала Дерби. </p>
   </article>
   <article>
      <h4>Chelsea’s Fancy</h4>
      <p>Chelsea’s Fancy родила трех обладателей Золотого кубка.</p>
   </article>

В результате получится следующая схема:

1. Horses for sale

   1. Mares

   2. Pink Diva

   3. Ring a Rosies

   4. Chelsea’s Fancy

Пример 8: Явные секции не могут находиться внутри скрытых секций.

Не существует способа заставить явные разделы, созданные элементами article, стать подразделами неявного раздела Mare.

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

На что следует обратить внимание

Разделы без названия

До сих пор мы не рассматривали nav и aside, но они работают точно так же, как section и article. Если у вас есть второстепенный контент, который в целом связан с вашим сайтом — скажем, советы по дрессировке лошадей и новости отрасли — вы пометите его как «в сторону», что создаст явный раздел в схеме документа. Аналогично, основная навигация должна быть обозначена как nav, что также создает явный раздел.

Нет требования использовать заголовки для aside и nav, поэтому они могут появиться в конспекте как разделы без названия. Попробуйте использовать следующий код в программе outliner:

<nav>
      <ul>
         <li><a href="/">home</a></li>
         <li><a href="/about.html">about us</a></li>
         <li><a href="/лошади.html">horses for sale</a></li>
       </ul>
   </nav>
   <h2>Лошади на продажу</h2>
   <section>
      <h3>Кобылы</h3>
   </section>
   <section>
      <h3>Жеребцы</h3>
   </section>

Пример 9: Безымянная <nav>.

nav  отображается как раздел без названия. Как правило, это не является проблемой и не считается плохим кодом HTML5, хотя в своей недавней статье HTML5 Doctor об изложении Майк Робинсон рекомендует использовать заголовки для всех разделов контента, чтобы повысить доступность.

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

На самом деле, спецификация не требует, чтобы элементы section имели заголовок. Она гласит:

Элемент section представляет собой общий раздел документа или приложения. В данном контексте раздел — это тематическая группировка содержимого, обычно с заголовком.

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

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

Если вы не уверены, является ли ваш раздел без названия nav, aside, section или article, очень удобное расширение Opera позволит вам узнать, какой тип содержимого раздела вы оставили без названия. Этот инструмент также позволит вам просмотреть схему, не покидая страницу, что может быть очень полезно при отладке разделов.

Корень секционирования

Самые зоркие из вас заметили, что когда я сказал, что содержимое раздела не может создавать подсекцию скрытого раздела, в содержимом раздела не было h2 («Лошади на продажу»), за которым сразу следовал section («Кобылы»), и содержимое раздела действительно создавало подсекцию h2.

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

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

Элемент body является корнем секционирования. Таким образом, если вы вставите код с примера 7 в outliner, h2 будет корневым заголовком секционирования, а элемент section будет подразделом корневого элемента секционирования body.

Элемент body — не единственный, который действует как корень секционирования. Есть еще пять других:

1. blockquote

2. details

3. fieldset

4. figure

5. td

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

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

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

Попробуйте следующий код в outliner, чтобы посмотреть, что произойдет:

<section>
   <h2>this is an h2</h2>
</section>
<h6>this h6 comes first in the source</h6>
<h2>this h2 comes last in the source</h2>

Пример 10: Как уровни заголовков на корневом уровне влияют на схему.

Я не буду пытаться объяснить вам это, потому что это, вероятно, только запутает нас обоих, поэтому я позволю вам поиграть с этим в аутлайнере. Подсказка: попробуйте использовать разные уровни заголовков для неявных разделов, чтобы посмотреть, как это повлияет на контур; например, h4 и h5 или два h5.

Неназванные документы

Если ни один заголовок не находится на корневом уровне документа (т.е. не внутри секционирующего содержимого), то сам документ будет без заголовка. Это довольно серьезная проблема, и она может возникнуть либо из-за небрежности, либо, как это ни парадоксально, из-за тщательного продумывания того, как следует использовать содержимое секций.

Роджер Йоханссон рассматривает этот вопрос в своей замечательной статье о схемах документов и HTML5, а также в последующей статье.

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

<body>
   <article>
      <h2>Blog post title</h2>
      <p>Blog post content</p>
   </article>
</body>

Документ не имеет названия. С некоторой неохотой Йоханссон решает выделить заголовок сайта в h2 и использовать еще один h2 для выделения заголовка статьи. Это разумное решение, и его подтверждают результаты опроса пользователей экранных считывателей WebAIM, в котором большинство респондентов высказались за два заголовка верхнего уровня именно в таком формате.

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

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

На мой взгляд, есть простой способ обойти эту проблему: не используйте article в качестве обертки для постов в одном блоге, новостей или основного содержимого статической страницы. Помните, что article — это секционирование контента: он создает подраздел документа. Но в этих случаях документ — это содержимое, а содержимое — это документ. Если отбросить название элемента, зачем нам создавать подраздел документа еще до того, как он начался?

Помните, что вы все еще можете использовать div!

HGROUP

Это последний пункт в списке того, чего следует остерегаться, и его очень легко понять. Элемент hgroup может содержать только заголовки (от h2 до h6), и его назначение — удалить из схемы все заголовки, кроме самого высокоуровневого, который он содержит.

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

В заключение

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

Но если вы запомните основы — что section, article, aside и nav создают подразделы на веб-страницах, — то вы уже на 90 % на правильном  пути. Привыкайте размечать контент с помощью элементов секционирования и проверять свои страницы в аутлайнере, потому что чем больше вы будете практиковаться в создании хорошо оформленных документов, тем быстрее вы поймете алгоритм.

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

Краткий курс HTML 5. Разметка веб-страницы — Exlab

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

HTML 4 и более ранние версии языка применялись в первую очередь для визуального оформления документа. Для создания каркаса страницы было достаточно всего двух тегов: блочного <div> и строчного <span>, которые сами по себе не влияют на отображение текста (кроме стандартных «блочных» свойств <div>), но позволяют использовать глобальные атрибуты class и id. А уже с их помощью задать стили отображения в CSS — не проблема. Тем более, что многие теги стандарта HTML 4 поддерживали целый набор атрибутов для визуального оформления.

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

Но сначала следует упомянуть, что теги <div> и <span> по-прежнему поддерживаются и могут быть применены в целях стилевого оформления или для удобства скриптования, когда лексическая разметка не имеет значения. Кроме того, поддерживается и знакомый многим тег <style>, позволяющий определять стили CSS непосредственно в документе. Как и прежде, элемент <style> располагается внутри <head> и содержит в себе прямые инструкции на языке CSS. Он поддерживает атрибуты type и media, описанные ранее в главе «Ссылки», с той лишь разницей, что здесь type может принимать только значение text/css. В HTML 5 добавлен еще и атрибут scoped="scoped". Элемент <style> с таким атрибутом может располагаться в любом месте документа, а находящиеся в нем инструкции CSS будут распространяться только на элемент-родитель, в котором находится этот <style>, и вложенные в него дочерние элементы.

<style type="text/css" media="screen" scoped="scoped">
   .status{color:red}
   #download{font-weight:bold;}
</style>
<div>Cкачивание файла: <span>завершено</span></div>

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

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

Элемент <section> предназначен для тематического группирования содержимого. С его помощью можно обозначать главы, вкладки диалоговых окон и т. п. Документ, например, может быть разделен на введение, параграфы и контактную информацию. Вообще говоря, рекомендуется применять этот тег для тех частей документа, которые целесообразно обозначать и в его содержании. В случаях, когда содержимое <section> заимствовано, можно указать URL источника в атрибуте cite.

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

Кстати, <header> и <footer> могут быть использованы не только в качестве колонтитулов документа, но и выполнять аналогичную роль для отдельных его разделов, если это необходимо.

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

<article pubdate="2010-03-04">
   <header>
      <h2>Разметка веб-страницы</h2>
      <p>Вместе с появлением HTML 5 изменилась идеология…</p>
   </header>
   <section cite="http://www.exlab.net/html/markup.html">
      <p>…</p>
      <p>…</p>
   </section>
   <nav>
      <a href="previous.html">Назад</a>
      <a href="index.html">Содержание</a>
      <a href="next.html">Вперед</a>
   </nav>
   <footer>2010 © www.exlab.net</footer>
</article>

Обратите внимание на заголовок документа, который вы сейчас читаете. Он состоит из названия курса (более крупным шрифтом) и главы (более мелким). Для подобного группирования тегов <h2>…<h6>, являющихся частями одного заголовка, предназначен тег <hgroup>.

<hgroup>
   <h2>Краткий курс HTML 5</h2>
   <h3>Разметка веб-страницы</h3>
</hgroup>

Еще одним группирующим элементом является <figure>. Обычно в него помещается самодостаточная информация, отсутствие или перенос которой в другое место не исказит смысл документа. Чаще всего это иллюстрации, диаграммы, фотографии с кратким комментарием или без него. Такой информационный блок можно озаглавить с помощью тега <figcaption>, который должен располагаться внутри <figure> в качестве первого или последнего дочернего элемента.

<figure>
   <img src="collider.gif" alt="Синхрофазотрон" />
   <figcaption>
      <h5>Синхрофазотрон</h5>
      <p>На схеме 1 изображен принцип действия…</p>
   </figcaption>
</figure>

Элемент <aside> представляет собой часть документа с информацией, также связанной с близлежащим содержимым, однако способной восприниматься отдельно от него. В печатной типографии такая информация обычно помещается в отдельной колонке или выделяется рамкой. На сайте тегом <aside> можно обозначить, например, боковые колонки веб-страницы (т. н. sidebar).

<p>Вчера мы были в Лувре.</p>
<aside>
   <h5>Лувр</h5>
   <p>Лувр — один из крупнейших художественных музеев мира.</p>
</aside>

Еще одним элементом, предназначенным для пояснительной информации является <details>. В отличие от предыдущих, он интерактивен и способен скрывать и отображать содержимое (т. н. spoiler). По умолчанию он «закрыт», но указав элементу атрибут open="open", можно заставить его «раскрыться». Заголовок блока задается в элементе <summary>, который размещается сразу за открывающим тегом <details>. При отсутствии <summary>, заголовок устанавливается по усмотрению браузера.

<details open="open">
   <summary>HTML 5</summary>
   В этом курсе есть все, что нужно знать об HTML.
</details>

Большинство приведенных выше тегов на момент создания курса не поддерживаются браузерами в полной мере. Прежде чем использовать их, рекомендуем ознакомиться с главой «Обратная совместимость».

Используйте семантические теги HTML5 для улучшения SEO веб-страницы | Pluralsight

Мирослав Gajic

Мирослав Gajic

• 22 марта 2019
• 12 мин.
• 99 537 Просмотров

• Мар 22
.9008 9008 99379.9001..9001..

Семантика

Семантика

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

Одной из наиболее важных особенностей HTML5 является его семантика . Семантический HTML относится к синтаксису, который делает HTML более понятным за счет лучшего определения различных разделов и макета веб-страниц. Это делает веб-страницы более информативными и адаптируемыми, позволяя браузерам и поисковым системам лучше интерпретировать контент. Например, вместо использования div вы можете использовать тег заголовка .

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

Макет семантической HTML-страницы

Давайте сначала рассмотрим базовый шаблон HTML-страницы, написанный на несемантическом HTML:

 1
2 <голова>
3 
4 
5 <тело>
6 <дел>
7 Здесь логотип, навигация и т.д.
8 
9 <дел>
10 Место для основного контента сайта
11 
12 <дел>
13 Информация в нижнем колонтитуле, ссылки и т.  д.
14 
15 
16 

HTML

Теперь рассмотрим пример семантического HTML, показанный ниже:

 1
2 <голова>
3 
4 
5 <тело>
6 <заголовок>
7 Здесь логотип, навигация и т.д.
8 
9 <основной>
10 Место для основного контента сайта
11 
12 <нижний колонтитул>
13 Информация в нижнем колонтитуле, ссылки и т. д.
14 
15 
16 

HTML

Основное отличие: мы заменили теги div на 3 новых тега: header , main и footer . Теги header , main и footer являются семантическими , поскольку они используются для представления различных разделов на HTML-странице. Это более описательные теги, чем теги div , которые затрудняют разделение веб-страниц на материальные разделы.

Навигация

В HTML5 есть 9Тег 0030 nav , который заменяет бывший мастер на все руки, div , для переноса ссылок, образующих меню навигации. Например, меню навигации можно вставить в раздел заголовка :

 1<заголовок>
2 
3 <навигация>
4 Главная
5 Службы
6 Контакт
7 О нас
8 
9```
10
11но его также можно добавить после секции _header_:
12
13``HTML
14<заголовок>
15 
16
17<навигация>
18 Главная
19 Услуги
20 Контакты
21 О нас
22 

HTML

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

Основное содержимое

Чтобы добавить некоторый контент в основной раздел , мы можем использовать новые теги HTML5, такие как article и section . Эти теги упрощают структуру main , делая ее похожей на:

 1<основной>
2 <статья>
3  
Основы JavaScript
 
4 
JavaScript — богатый и выразительный язык...
5 <раздел>
6  
Основы синтаксиса
 
7 
Понимание операторов, именования переменных, пробелов...
8 
9 <раздел>
10  
операторов
 
11 
Операторы позволяют управлять значениями...
12 
13 <раздел>
14  
Условный код
 
15 
Иногда вы хотите запустить блок кода только при определенных условиях...
16 
17 
18