Разделы документа в 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
				
			
Свежие записи
Команда MD

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

Оборудование
help2site
Разгон встроенных видеокарт от Intel

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

Web-Дизайн
help2site
Раскрутка и продвижение сайта в интернете

Продвижение сайта в интернете – об этом мечтает всякий вэб-мастер. А особенно, если это будет бесплатное продвижение сайта (любит народ халяву, что ж тут поделаешь!).

Mac OS
help2site
Как сбросить Mac до заводских настроек

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

iOS
help2site
Не заряжается IPHONE или IPAD

Каждый обладатель устройств от Apple, может столкнутся с различными проблемами, с которыми даже не ожидалось столкнуться. Самая популярная поломка на данный момент — это Не заряжается Ipad ,

iOS
help2site
Новые полезные функций iPhone 6

Оглавление Новые функций iOS 8, которые следует знать 17 сентября Apple выпустила операционную систему iOS 8 – давайте разберемся какие новые функции появились в новой