Разделы документа в 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 позволяют удалять как каталоги, так и

Команда RENAME

RENAME что это? Команда RENAME позволяет переименовать файл или каталог.

Команда MD

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

CMS и сайты
help2site
ШОРТКОДЫ [SHORTCODES]

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

CMS и сайты
help2site
Как ускорить сайт на WordPress

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

Разработка сайтов
help2site
Изучение HTML. Вёрстка сайта из PSD шаблона.

В данной статье речь пойдёт о сайтах, которые разработчики создают вручную, т. е. верстают. Статья предназначена для пользователей, знакомых с HTML и CSS. Также желательно знать хотя бы основы Adobe Photoshop

Разработка сайтов
help2site
Drupal: taxonomy, Views, поиск и фасетная фильтрация

Оглавление Настройка сортировки на Drupal 7 или Фасетный поиск Умный фильтр или Фасетный поиск — это фильтр по категориям товара , которую можно видеть в крупных

Разработка сайтов
help2site
Основы PHP для начинающих

Как пишутся скрипты на PHP Для написания кода на PHP подходит любой текстовый редактор (например Notepad++). Оглавление Размещение PHP на HTML-странице Код скрипта PHP может

Windows и Windows Server
help2site
Команда RENAME

RENAME что это? Команда RENAME позволяет переименовать файл или каталог. С помощью RENAME можно изменить расширение всех файлов в каталоге либо отдельного файла. Команда RENAME

Разработка сайтов
help2site
Настройка SQLite-соединения под Windows

Когда вы создаете новое приложение в Yii, при генерации файла класса модели для таблицы БД может возникнуть ошибка:  exception ‘CDbException’ with message ‘CDbConnection failed to

Разработка сайтов
help2site
Вставка содержимого внешнего файла в PHP

В PHP большие файлы сценариев можно разделять на части (модули) и включать один файл в состав другого файла. Команда require require «имя_файла«; Команда require (затребовать)