ОС, IT, Web

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

Команда RD и RMDIR позволяют удалять как каталоги, так и
Оборудование
help2site
Ремонт компьютера с помощью безопасного режима

Оглавление Безопасный режим Windows — помощник при ремонте компьютера Рассмотрим ремонт компьютера в безопасный режиме и диагностика, если по каким-то причинам запуск операционной системы windows
Web-Дизайн
help2site
Lightbox Plus ColorBox – это слайдер для сайта

Lightbox Plus ColorBox. Как установить слайдер для сайта. Lightbox Plus ColorBox – это плагин wordpress, с помощью которого можно установить слайдер для сайта. Что такое
Web-Дизайн
help2site
Установка веб-сервера Apache

В прошлый раз мы разобрались с тем, что такое web-сервер. Самым популярным на сегодняшний момент является веб-сервер Apache. Сегодня я расскажу вам как быстро и правильно установить apache.
Интернет
help2site
Купить планшет за границей

Заказать планшет IPAd Купить планшет за границей стало намного проще и безопаснее, сегодня я хочу рассказать вам, как это можно осуществить. Сами понимаете, что в интернете