Разделы документа в HTML 5.1

Это перевод статьи «Document Outlines in HTML 5.1», опубликованной на bitsofco.de. Оригинальную статью можно прочитать здесь.

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

  • Удалено: использование вложенных <section> с заголовками первого уровня для формирования структуры страницы;
  • Изменено: элементы <header> и <footer> могут быть вложенными, если на каждый уровень вложенности есть свой элемент <section>.

Создание разделов документа с помощью вложенных <section>

В HTML 5.0 был представлен новый способ создания разделов документа: <section> с заголовком первого уровня создавал новый раздел, вложенный в него такой же <section>с таким же заголовком первого уровня создавал подраздел и так далее.

Пример разметки (этот способ создания разделов устарел):

				
					<section>  
    <h1>Heading Level One</h1>

    <section>
        <h1>Heading Level Two</h1>
    </section>

    <section>
        <h1>Heading Level Two</h1>

        <section>
            <h1>Heading Level Three</h1>
        </section>
    </section>

</section>
				
			
Такая разметка определяла следующую структуру документа:
				
					1. Заголовок первого уровня
    1. Заголовок второго уровня
    2. Заголовок второго уровня
        1. Заголовок третьего уровня
				
			

Этот способ ещё не получил достаточной поддержки браузерами и другими устройствами. Он убран из спецификации HTML 5.1.

Теперь рекомендуется использовать вложенные

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

				
					<section>  
<h1>Heading Level One</h1>

    <section>
        <h2>Heading Level Two</h2>
    </section>

    <section>
        <h2>Heading Level Two</h2>

        <section>
            <h3>Heading Level Three</h3>
        </section>
    </section>

</section>
				
			

Вложенные <header> и <footer>

В HTML 5.0 <header> нельзя было вложить в другой <header>, как и <footer>нельзя было вложить в другой <footer>

В HTML 5.1 это было изменено. Теперь вложенные <header> и <footer> считаются валидными, если они представлены в контексте отдельной секции. Такой контекст создаётся секционными элементами:

  • <article>
  • <section>
  • <aside>
  • <nav>

Таким образом, <header> и <footer> всегда должны ассоциироваться с уникальным секционным элементом вроде <section>, а не с родительским <header> или <footer>. Например, элемент <article> может иметь <header>, в котором есть несколько <section> с информацией о статье:

				
					<article>  
  <header>
    <h1>Creating a Document Outline in HTML 5.1</h1>
    <section>
      <header>
        <h2>The Author</h2>
      </header>
      <p>Ire Aderinokun</p>
      <address>Lorem ipsum dolor sit amet</address>
    </section>
    <section>
      <header>
        <h2>The Publication</h2>
      </header>
      <p>bitsofcode</p>
      <address>Lorem ipsum dolor sit amet</address>
    </section>
  </header>
  <h2>Introduction</h2>
  <p>Lorem ipsum dolor sit amet</p>
</article>
				
			
Эта разметка определяет такую структуру:
				
					1. Creating a Document Outline in HTML 5.1   
     1. The Author
     2. The Publication
     3. Introduction
				
			
Свежие записи
Web-Дизайн
help2site
Подборка тем для Drupal

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

Web-Дизайн
help2site
Основные понятия. Что такое веб-сервер.

На этом занятии мы познакомимся с таким понятием как веб-сервер (web server). Посмотрим, что пишет по этому поводу Wikipedia: Веб-сервер — это сервер, принимающий HTTP-запросы

Настройка
help2site
Разгон видеокарты с помощью программы MSI Afterburner

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

Настройка
help2site
Нужно обновить биос без процессора? Решаем вопрос

Попробуем решить непростую задачу когда нужно обновить БИОС без процессора на материнской плате. Что такое BIOS и как им пользоваться, если коротко, самостоятельная микропрограмма, отвечающая за

Игры
help2site
Poker для ipad

Большое количество людей ринулось покупать планшетные компьютеры от Apple, так как они являются на данный момент самыми лучшими и известными. И у некоторых возникает вопрос: