From 2c06c1e456cf28d032c6afc4f1613447b620e16e Mon Sep 17 00:00:00 2001 From: MDN Date: Wed, 16 Jun 2021 00:36:25 +0000 Subject: [CRON] sync translated content --- .../using_html_sections_and_outlines/index.html | 374 +++++++++++++++++++++ 1 file changed, 374 insertions(+) create mode 100644 files/ru/orphaned/web/guide/html/using_html_sections_and_outlines/index.html (limited to 'files/ru/orphaned') diff --git a/files/ru/orphaned/web/guide/html/using_html_sections_and_outlines/index.html b/files/ru/orphaned/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..fc0c5e000f --- /dev/null +++ b/files/ru/orphaned/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,374 @@ +--- +title: Использование разделов и создание структуры HTML документа +slug: orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines +tags: + - HTML5 + - Веб + - Для опытных разработчиков + - Обзор + - Пример + - Разделы + - Руководство + - Структура +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +original_slug: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +
+

Важно: В настоящее время нет известных реализаций алгоритма построения структуры документа в графических браузерах или пользовательских приложениях, использующих реабилитационные технологии, хотя такой алгоритм внедрён в другие приложения, например, в средствах проверки соответствия спецификации. Поэтому алгоритм построения структуры нельзя использовать для передачи структуры документа пользователям. Авторы рекомендуют использовать для этой цели степень важности заголовков (h1-h6).

+
+ +

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

+ +

Структура документа в HTML 4

+ +

Структура документа, т. е. семантическая структура контента, заключённого в теги  <body> и </body>, является основой для представления страницы пользователю. HTML4 использует для описания структуры страницы разделы и подразделы. Раздел определяется элементом ({{HTMLElement("div")}}) с включёнными в него элементами заголовка ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} или {{HTMLElement("h6")}}), содержащими его название. Структура документа определяется отношениями между этими элементами.

+ +

Так, следующая разметка:

+ +
+
<div class="section" id="forest-elephants" >
+  <h1>Лесные слоны</h1>
+  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  <div class="subsection" id="forest-habitat" >
+    <h2>Среда обитания</h2>
+    <p>Лесные слоны живут не на деревьях, а под ними.
+     ...продолжение данного подраздела...
+  </div>
+</div>
+
+
+ +

обеспечивает следующую структуру:

+ +
1. Лесные слоны
+   1.1 Среда обитания
+
+ +

Для задания нового раздела не обязательно использовать элементы {{HTMLElement("div")}}. Для этого достаточно наличия элемента заголовка. Поэтому, разметка

+ +
<h1>Лесные слоны</h1>
+ <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  <h2>Среда обитания</h2>
+  <p>Лесные слоны живут не на деревьях, а под ними.
+    ...продолжение данного подраздела...
+  <h2>Рацион</h2>
+<h1>Монгольская песчанка</h1>
+
+ +

обеспечивает следующую структуру:

+ +
1. Лесные слоны
+   1.1 Среда обитания
+   1.2 Рацион
+2. Монгольская песчанка
+
+ +

Какие проблемы решает HTML5

+ +

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

+ +
    +
  1. Использование {{HTMLElement("div")}} для задания семантических разделов, без задания специальных значений для атрибутов class не позволяет автоматизировать алгоритм создания структуры («Является ли данный {{HTMLElement("div")}} частью структуры страницы, определяющим раздел или подраздел, или он используется исключительно для управления стилем?»). Другими словами, спецификация HTML4 не даёт точного определения разделу и чётких правил его определения. Автоматическое создание структуры имеет большое значение, особенно в случае с реабилитационными технологиями, представляющими информацию пользователю в соответствии со структурой документа. HTML5 позволяет больше не использовать элементы {{HTMLElement("div")}} в алгоритме построения структуры благодаря добавлению нового элемента {{HTMLElement("section")}}.
    2. +
  2. Объединить несколько документов в один непросто: включение подчинённого документа в основной документ требует изменения уровня элементов заголовков для сохранения правильной структуры. В HTML5 эта проблема решена благодаря новым элементам задания разделов ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} и {{HTMLElement("aside")}}), которые всегда являются подразделами ближайшего родительского раздела, независимо от того, какие разделы создаются внутренними заголовками.
    3. +
  3. В HTML4 каждый раздел является частью структуры документа. Однако часто документы отличаются сложной, нелинейной структурой. Документ может включать специальные разделы, информация в которых не является частью основного контента, хотя и связана с ним, например, рекламный блок или поясняющая заметка. HTML5 добавляет элемент {{HTMLElement("aside")}}, позволяющий исключить такие разделы из основной структуры.
    4. +
  4. Опять же, поскольку в HTML4 каждый раздел является частью структуры документа, как быть с разделами, содержащими информацию, касающуюся не конкретного документа, а всего сайта, например, логотипы, оглавления или информация об авторских правах и правовые положения. В HTML5 для этих целей добавлено три новых элемента: {{HTMLElement("nav")}} для наборов ссылок, например, оглавления, {{HTMLElement("footer")}} и {{HTMLElement("header")}} для информации, касающейся всего сайта. Обратите внимание, что {{HTMLElement("header")}} и {{HTMLElement("footer")}} не создают разделы как {{HTMLElement("section")}}, а, скорее, обеспечивают семантическую разметку частей раздела.
    5. +
+ +

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

+ +

Алгоритм создания структуры HTML5

+ +

Задание разделов в HTML5

+ +

Весь контент, находящийся внутри {{HTMLElement("body")}}, является частью раздела. Разделы в HTML5 могут быть вложенными. Помимо основного раздела, определяемого элементом {{HTMLElement("body")}}, границы разделов определяются явным или неявным образом. Явным образом заданные разделы – это контент внутри тегов {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}} и {{HTMLElement("nav")}}. 

+ +
Note: Каждый раздел может иметь собственную иерархию заголовков. Следовательно, даже вложенный раздел может иметь {{HTMLElement("h1")}}. См. «Задание заголовков в HTML5».
+ +

Например:

+ +
<section>
+  <h1>Лесные слоны</h1>
+  <section>
+    <h1>Введение</h1>
+    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>
+  </section>
+  <section>
+    <h1>Среда обитания</h1>
+    <p>Лесные слоны живут не на деревьях, а под ними.</p>
+  </section>
+  <aside>
+    <p>рекламный блок</p>
+  </aside>
+</section>
+<footer>
+  <p>(c) 2010 The Example company</p>
+</footer>
+ +

Данный фрагмент HTML задаёт раздел верхнего уровня:

+ +
<section>
+  <h1>Лесные слоны</h1>
+  <section>
+    <h1>Введение</h1>
+    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>
+  </section>
+  <section>
+    <h1>Среда обитания</h1>
+    <p>Лесные слоны живут не на деревьях, а под ними.</p>
+  </section>
+  <aside>
+    <p>рекламный блок</p>
+  </aside>
+</section>
+<footer>
+  <p>(c) 2010 The Example company</p>
+</footer>
+ +

Данный раздел имеет три подраздела:

+ +
<section>
+  <h1>Лесные слоны</h1>
+
+  <section>
+    <h1>Введение</h1>
+    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>
+  </section>
+
+  <section>
+    <h1>Среда обитания</h1>
+    <p>Лесные слоны живут не на деревьях, а под ними.</p>
+  </section>
+
+  <aside>
+    <p>рекламный блок</p>
+  </aside>
+</section>
+
+<footer>
+  <p>(c) 2010 The Example company</p>
+</footer>
+ +

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

+ +
1. Лесные слоны
+   1.1 Введение
+   1.2 Среда обитания
+
+ +

Задание заголовков в HTML5

+ +

Хотя структура определяется элементами задания структуры, она будет практически бесполезна без заголовка. Основное правило очень простой: первый элемент заголовка (это может быть {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) задаёт заголовок текущего раздела.

+ +

Элемент заголовка имеет определённую степень важности, определяемую цифрой в его названии, таким образом, {{HTMLElement("h1")}} имеет максимальную степень важности, а {{HTMLElement("h6")}} минимальную. Соотношение степеней важности имеет смысл только внутри раздела; структура документа определяется структурами разделов, а не степенью важности заголовков разделов. Например, данный код:

+ +
<section>
+  <h1>Лесные слоны</h1>
+  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  <section>
+    <h2>Среда обитания</h2>
+    <p>Лесные слоны живут не на деревьях, а под ними.
+        ...продолжение данного подраздела...
+  </section>
+</section>
+<section>
+  <h3>Монгольская песчанка</h3>
+  <p>В данном разделе мы расскажем о монгольской песчанке.
+     ...продолжение данного раздела...
+</section>
+ +

приводит к следующей структуре:

+ +
1. Лесные слоны
+   1.1 Среда обитания
+2. Монгольская песчанка
+ +

Обратите внимание, что степень важности элемента заголовка (в данном примере {{HTMLElement("h1")}} для первого раздела верхнего уровня, {{HTMLElement("h2")}} для подраздела {{HTMLElement("h3")}} для второго раздела верхнего уровня) роли не играет. (В качестве заголовка явно заданного раздела может использоваться заголовок с любой степенью важности, хотя такая практика и не рекомендуется.)

+ +

Неявное задание разделов

+ +

Поскольку элементы задания разделов HTML5 Sectioning Elements не являются обязательными для задания структуры, можно задавать разделы и не используя их, чтобы обеспечить совместимость с веб-сайтами, созданными на HTML4. Это называется неявным заданием разделов.

+ +

Элементы заголовков ({{HTMLElement("h1")}} — {{HTMLElement("h6")}}) задают новый, неявный раздел, когда не являются первым заголовком своего родительского, явно заданного раздела. То, как этот неявно заданный раздел располагается в структуре документа, определяется отношением важности его заголовка в важности предыдущего заголовка в родительском разделе. Если его степень важности ниже, чем у предыдущего заголовка, он открывает неявно заданный подраздел раздела. Следующий код:

+ +
<section>
+  <h1>Лесные слоны</h1>
+  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  <h3 class="implicit subsection">Среда обитания</h3>
+  <p>Лесные слоны живут не на деревьях, а под ними.
+    ...продолжение данного подраздела...
+</section>
+ +

приводит к следующей структуре:

+ +
1. Лесные слоны
+   1.1 Среда обитания (неявно задано элементом h3)
+
+ +

Если степень важности такого заголовка совпадает со степенью важности предыдущего заголовка, он закрывает предыдущий раздел (который мог быть задан неявно!) и открывает новый неявно заданный раздел на том же уровне: 

+ +
<section>
+  <h1>Лесные слоны</h1>
+  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  <h1 class="implicit section">Монгольская песчанка</h1>
+  <p>Монгольская песчанка – это небольшое симпатичное млекопитающее.
+    ...продолжение данного раздела...
+</section>
+ +

приводит к следующей структуре:

+ +
1. Лесные слоны
+2. Монгольская песчанка (неявно задано элементом h1, который одновременно закрывает предыдущий раздел)
+
+ +

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

+ +
<body>
+  <h1>Млекопитающие</h1>
+  <h2>Киты</h2>
+  <p>В данном разделе мы поговорим о китах.
+    ...продолжение данного раздела...
+  <section>
+    <h3>Лесные слоны</h3>
+    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+    <h3>Монгольская песчанка</h3>
+      <p>Песчанки распространились далеко за пределы Монголии.
+         ...продолжение данного подраздела...
+    <h2>Рептилии</h2>
+      <p>Рептилии – это холоднокровные животные.
+          ...продолжение данного раздела...
+  </section>
+</body>
+ +

приводит к следующей структуре:

+ +
1. Млекопитающие
+   1.1 Киты (неявно задаётся элементом h2)
+   1.2 Лесные слоны (явным образом задаётся элементом раздела)
+   1.3 Монгольская песчанка (неявно задаётся элементом h3, который одновременно закрывает предыдущий раздел)
+2. Рептилии (неявно задаётся элементом h2, который одновременно закрывает предыдущий раздел)
+
+ +

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

+ +

Исключение из общего правила соответствия степени важности тега уровню вложенности раздела делается для разделов, которые могут использоваться в нескольких документах. Например, раздел может храниться в системе управления контентом и добавляться в документы при их генерировании. В этом случае рекомендуется начинать с {{HTMLElement("h1")}} в качестве главного заголовка многократно используемого раздела. Уровень вложенности многократно используемого раздела будет определяться иерархией разделов документа, в который он добавляется. Теги для явного задания разделов по-прежнему останутся полезными и в этом конкретном случае.

+ +

Корни задания разделов

+ +

 Корень задания разделов – это элемент HTML, который может иметь собственную структуру, однако входящие в неё разделы и заголовки, не входят в структуру его родительского элемента. Помимо {{HTMLElement("body")}}, который является логическим корнем задания разделов документа, такими элементами часто являются элементы, добавляющие внешний контент на страницу: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} и {{HTMLElement("td")}}.

+ +

Например:

+ +
<section>
+  <h1>Лесные слоны</h1>
+  <section>
+    <h2>Введение</h2>
+    <p>В данном разделе мы поговорим о малоизвестных лесных слонах</p>
+  </section>
+  <section>
+    <h2>Среда обитания</h2>
+    <p>Лесные слоны живут не на деревьях, а под ними. Давайте рассмотрим, что говорят учёные в «<cite>Лесной слон на Борнео</cite>»:</p>
+    <blockquote>
+       <h1>Борнео</h1>
+       <p>Лесной слон живёт на Борнео...</p>
+    </blockquote>
+  </section>
+</section>
+
+ +

Данный пример приводит к следующей структуре:

+ +
1. Лесные слоны
+   1.1 Введение
+   1.2 Среда обитания
+ +

Данная структура не включает внутреннюю структуру элемента {{HTMLElement("blockquote")}}, который, будучи внешней цитатой, является корнем задания разделов и изолирует свою внутреннюю структуру.

+ +

Разделы, не входящие в структуру

+ +

 HTML5 вводит два новых элемента, позволяющих задавать разделы, не входящие в основную структуру веб-документа:

+ +
    +
  1. Элемент вспомогательного раздела {{HTMLElement("aside")}} задаёт раздел, который, хотя и связан с основным элементом, не принадлежит к основной структуре, например, поясняющая заметка или реклама. Он имеет собственную структуру, однако не входит в основную структуру страницы.
    2. +
  2. Элемент навигационного раздела {{HTMLElement("nav")}} задаёт раздел, содержащий навигационные ссылки. Таких элементов в документе может быть несколько, например, один со внутренними ссылками на страницу, например, оглавление, а другой – с ссылками для навигации по сайту. Такие ссылки не являются частью основной структуры документа и как правило пропускаются экранными дикторами.
    3. +
+ +

Шапки и подвалы

+ +

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

+ +
    +
  1. Элемент шапки {{HTMLElement("header")}} задаёт шапку страницы (как правило, логотип и название сайта, а также горизонтальное меню, если имеется) или раздела (которая может включать заголовок раздела, имя автора и т.д.).{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("header")}}. Несмотря на название, этот элемент не обязательно располагается в начале страницы или раздела.
    2. +
  2. Элемент подвала ({{HTMLElement("footer")}}) задаёт нижний колонтитул страницы (как правило включающий уведомления об авторских правах и другую правовую информацию, а иногда также содержащий какие-либо ссылки) или раздела (может включать дату публикации, информацию о лицензии и т.п. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("footer")}}. Несмотря на название, этот элемент не обязательно располагается в конце страницы или раздела.
    3. +
+ +

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

+ +

Адреса в элементах задания разделов

+ +

Автор документа часто хочет опубликовать свою контактную информацию, например, имя и адрес. HTML4 позволял сделать это с помощью элемента {{HTMLElement("address")}}, расширенного в HTML5.

+ +

Документ может включать несколько разделов, принадлежащих разным авторам. Если раздел создаётся не автором основной страницы, для задания используется элемент {{HTMLElement("article")}}. В результате элемент {{HTMLElement("address")}} теперь связан с ближайшим родительским {{HTMLElement("body")}} или {{HTMLElement("article")}}.

+ +

Использование элементов HTML5 в браузерах, не поддерживающих HTML5

+ +

Элементы разделов и заголовков должны работать в большинстве браузеров, не поддерживающих HTML5. Хотя они и не поддерживаются, они не требуют специального интерфейса DOM, им требуется лишь особый стиль CSS, поскольку к неизвестным элементам по умолчанию применяется стиль display:inline:

+ +
section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+
+ +

Конечно, веб-разработчик может применить к ним любой другой стиль, однако следует помнить в браузерах, не поддерживающих HTML5, по умолчанию используется не тот стиль, который требуется для таких элементов. Также обратите внимание на отсутствие в перечне элемента {{HTMLElement("time")}}, поскольку по умолчанию к нему применяется одинаковый стиль как в браузерах, не поддерживающих HTML5, так и в браузерах, совместимых с HTML5.

+ +

Данный способ не универсален, поскольку некоторые браузеры не позволяют применять стили к неподдерживаемым элементам. Например, Internet Explorer (версии 8 и более ранней), для которого требуется специальный скрипт:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+<![endif]-->
+ +

Этот скрипт запускается в Internet Explorer (8 и более ранней версии), однако требует включённой поддержки скриптов для правильного отображения элементов задания разделов и заголовок HTML5. Если поддержка скриптов выключена, это может стать проблемой, поскольку данные элементы, скорее всего, определяют структуру всей страницы. Поэтому необходимо добавить элемент {{HTMLElement("noscript")}}:

+ +
<noscript>
+   <strong>Внимание!</strong>
+   Поскольку ваш браузер не поддерживает HTML5, некоторые элементы воспроизводятся с помощью JScript.
+   Однако в вашем браузере скрипты отключены, пожалуйста, включите их, чтобы браузер смог отобразить данную страницу.
+</noscript>
+ +

This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+  <noscript>
+     <strong>Внимание!</strong>
+     Поскольку ваш браузер не поддерживает HTML5, некоторые элементы воспроизводятся с помощью JScript.
+     Однако в вашем браузере скрипты отключены, пожалуйста, включите их, чтобы браузер смог отобразить данную страницу.
+  </noscript>
+<![endif]-->
+ +

Заключение

+ +

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

-- cgit v1.2.3-54-g00ecf