1.11.4. Группировка содержимого

Опубликовано: 25 февраля 2020 Обновлено: 5 июня 2022 0 комментариев

HTML-элементы для группировки содержимого веб-страниц

1. Элемент <p>

Категории контента: потоковое содержимое, видимое содержимое.

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

Пропуск тегов: закрывающий тег элемента <p> может быть пропущен, если сразу за ним следует <address>, <article>, <aside>, <blockquote>, <details>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <main>, <nav>, <ol>, <p>, <pre>, <section>, <table> или <ul> элемент, или если в родительском элементе больше нет содержимого, а родительский элемент не является <a>, <audio>, <del>, <ins>, <map>, <noscript> или <video>.

Для элемента доступны ‎глобальные атрибуты.

Элемент <p> представляет абзац. Абзацы — это блоки текста, физически отделенные от смежных блоков пустыми строками.

<p>Маленький котенок осторожно уселся на кусок ковра. Позже в его жизни это будет упоминаться как время, когда кошка сидела на коврике.</p>
<fieldset>
  <legend>Персональная информация</legend>
  <p>
    <label>Имя: <input name="n"></label>
    <label><input name="anon" type="checkbox"> Скрыть от других пользователей</label>
  </p>
  <p><label>Адрес: <textarea name="a"></textarea></label></p>
</fieldset>

Элемент <p> не должен использоваться, когда уместен более конкретный элемент. Следующий пример является технически правильным:

<section>
  ...
  <p>Последнее изменение: 2001-04-23</p>
  <p>Автор: [email protected]</p>
</section>

Тем не менее, это было бы лучше разметить как:

<section>
  ...
  <footer>Последнее изменение: 2001-04-23</footer>
  <address>Автор: [email protected]</address>
</section>

Или так:

<section>
  ...
  <footer>
  <p>Последнее изменение: 2001-04-23</p>
  <address>Автор: [email protected]</address>
  </footer>
</section>

Элементы списка (в частности, элементы <ol> и <ul>) не могут быть дочерними элементами <p>. Поэтому, когда предложение содержит маркированный список, его можно разметить следующим образом:

<p>Например, в этом фантастическом предложении есть элементы маркированного списка, относящиеся к</p>
<ul>
  <li>волшебникам,
  <li>путешествию быстрее скорости света,
  <li>телепатии,
</ul>
<p>и это обсуждается ниже.</p>

2. Элемент <address>

Категории контента: потоковое содержимое, видимое содержимое.

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

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.

Элемент <address> представляет контактную информацию о человеке или организации. Он должен включать физическое и / или цифровое местоположение / контактную информацию и средства идентификации лица (лиц) или организации, к которой относится эта информация. В браузере обычно отображается курсивом.

Например, твиттер-аккаунт W3C:

<address>
<p>W3C в Twitter:
<p><a href="https://twitter.com/w3c">@w3c</a>
</address>

Адрес, телефон и факс организации:

<address>      
Центральный офис АО «Почта России»<br>
131000, Москва, Варшавское шоссе, 37<br>
Тел.: +7 (495) 956-20-67 | Факс: +7 (495) 956-99-51
</address>

3. Элемент <hr>

Категории контента: потоковое содержимое.

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

Пропуск тегов: отсутствует закрывающий тег.

Для элемента доступны ‎глобальные атрибуты.

Элемент <hr> представляет собой тематический разрыв на уровне абзаца, например, изменение сцены в рассказе или переход к другой теме в разделе справочника.

<section>
<h1>Общение</h1>
<p>Существуют различные способы общения. Этот раздел охватывает несколько важных, используемых проектом.</p>
<hr>
<p>Камни связи, кажется, приходят парами и имеют загадочные свойства:</p>
<ul>
  <li>Они могут передавать мысли в двух направлениях после активации, если используются в одиночку.</li>
  <li>Если оба камня используются с другим устройством, сознание переключается на другое тело.</li>
</ul>
<hr>
<p>Радиоприемники используют электромагнитный спектр в метровом диапазоне и дольше.</p>
<hr>
<p>Сигнальные вспышки используют электромагнитный спектр в нанометровом диапазоне.</p>
</section>

Нет необходимости в элементе <hr> между разделами, поскольку элементы <section> и элементы <h1> сами подразумевают смену тематики.

Элемент <hr> не влияет на структуру документа.

4. Элемент <pre>

Категории контента: потоковое содержимое, видимое содержимое.

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

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.

Элемент <pre> представляет собой блок предварительно отформатированного текста, в котором структура представлена типографскими соглашениями, а не элементами.

В синтаксисе HTML ведущий символ новой строки, следующий сразу за начальным тегом <pre>, удаляется.

Для представления блока компьютерного кода, элемент <pre> может использоваться с элементом <code>. Для представления результата выполнения программного кода или скрипта элемент <pre> может использоваться с элементом <samp>. Аналогично, элемент <kbd> может использоваться в элементе <pre> для указания текста, который должен ввести пользователь.

<p>Это конструктор <code>Panel</code>:</p>
<pre><code>function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>

5. Элемент <blockquote>

Категории контента: потоковое содержимое, корневой секционный, видимое содержимое.

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

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты и необязательный атрибут cite, содержащий ссылку на источник цитаты. Браузеры могут разрешать пользователям переходить по таким ссылкам, но они в первую очередь предназначены для частного использования (например, серверными скриптами, собирающими статистику использования цитат сайта), а не для читателей.

Элемент <blockquote> представляет содержимое, цитируемое из другого источника, необязательно со ссылкой на источник цитирования, которая указывается в элементе <footer> или <cite>, и, необязательно, с изменениями по тексту, такими как аннотации и сокращения.

<blockquote>
  <p>От перца, верно, начинают всем перечить... От уксуса - куксятся, от горчицы - огорчаются, от лука - лукавят, от вина - винятся, а от сдобы - добреют. Как жалко, что никто об этом не знает... Всё было бы так просто! Ели бы сдобу и добрели!</p>
  <cite>Льюис Кэрролл. Приключения Алисы в Стране чудес</cite>
</blockquote>
<blockquote>
  <p>Моя любимая книга <cite class="from-source">"О водоплавающих"</cite></p>
  <footer>- <cite>Майк Смит</cite></footer>
</blockquote>

6. Элемент <ol>

Категории контента: потоковое содержимое. Если содержит хотя бы один элемент <li> — видимое содержимое.

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

Пропуск тегов: ни один из тегов не может быть пропущен.

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

Таблица 1. Атрибуты элемента <ol>
Атрибут Описание, принимаемое значение
reversed Логический атрибут. Если присутствует, это означает, что список является нисходящим (…, 3, 2, 1). Если атрибут опущен, список является восходящим (1, 2, 3, …).
start Целое число, задающее порядковый номер первого элемента списка. По умолчанию равно 1 (если отсутствует атрибут reversed).
type Используется для указания типа маркера, по умолчанию используется десятичная нумерация. Принимаемые значения:
1 — десятичная нумерация.
A — нумерация списка в алфавитном порядке, прописные буквы латинского алфавита (A, B, C, D).
a — нумерация списка в алфавитном порядке, строчные буквы латинского алфавита (a, b, c, d).
I — нумерация римскими заглавными цифрами (I, II, III, IV).
i — нумерация римскими строчными цифрами (i, ii, iii, iv).

Элемент <ol> представляет собой список элементов, где элементы были изначально упорядочены таким образом, что изменение порядка изменило бы смысл документа. Элементами списка являются элементы <li>.

<p>Я жил в следующих странах (приведено в порядке, когда я впервые жил там):</p>
<ol>
  <li>Швейцария
  <li>Великобритания
  <li>США
  <li>Норвегия
</ol>

7. Элемент <ul>

Категории контента: потоковое содержимое. Если содержит хотя бы один элемент <li> — видимое содержимое.

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

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.

Элемент <ul> представляет собой список элементов, где порядок элементов не важен, то есть когда изменение порядка не приведет к существенному изменению смысла документа.

<p>Я жил в следующих странах:</p>
<ul>
  <li>Швейцария
  <li>Великобритания
  <li>США
  <li>Норвегия
</ul>

8. Элемент <li>

Категории контента: отсутствуют.

Контекст, в котором этот элемент может быть использован: внутри элемента <ol> и <ul>.

Пропуск тегов: закрывающий тег </li> может быть опущен, если элемент <li> сразу следует за другим элементом <li>, или если больше нет содержания в элементе, в который вложен тег.

Для элемента доступны ‎глобальные атрибуты. Если элемент является дочерним элементом <ol> — необязательный атрибут value.

Элемент <li> представляет собой элемент списка. Если родительским элементом является элемент <ol>, то элемент <li> имеет порядковый номер.

Атрибут value, если он присутствует, должен быть допустимым целым числом, задающим порядковый номер элемента списка.

<figure>
  <figcaption>Топ 10 фильмов всех времен</figcaption>
  <ol>
      <li value="10"><cite>Джози и кошечки</cite>, 2001</li>
      <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
      <li value="8"><cite>Приключения Флика</cite>, 1998</li>
      <li value="7"><cite>История игрушек</cite>, 1995</li>
      <li value="6"><cite>Корпорация монстров</cite>, 2001</li>
      <li value="5"><cite>Тачки</cite>, 2006</li>
      <li value="4"><cite>История игрушек 2</cite>, 1999</li>
      <li value="3"><cite>В поисках Немо</cite>, 2003</li>
      <li value="2"><cite>Суперсемейка</cite>, 2004</li>
      <li value="1"><cite>Рататуй</cite>, 2007</li>
  </ol>
</figure>

9. Элемент <dl>

Категории контента: потоковое содержимое. Если имеется хотя бы одна пара <dt>—<dd> — видимое содержимое.

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

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.

Элемент <dl> представляет список описаний, состоящий из нуля или более групп термин-описание. Термин представлен элементом <dt>, описание — элементом <dd>.

Группы термин-описание могут быть терминами и определениями, вопросами и ответами, категориями и темами и т.п.

<dl>
  <dt>Текила «Бланко»</dt>
  <dd>Кристально прозрачная текила с медовым вкусом спелой агавы...</dd>
  <dt>Текила «Репосадо»</dt>
  <dd>Текила, выдержанная в бочках из белого дуба в течение 8-10 месяцев...</dd>
</dl>

10. Элемент <dt>

Категории контента: отсутствуют.

Контекст, в котором этот элемент может быть использован: перед элементами <dd> или <dt> внутри элементов <dl>.

Пропуск тегов: закрывающий тег элемента <dt> может быть опущен, если за элементом <dt> сразу же следует другой элемент <dt> или элемент <dd>.

Для элемента доступны ‎глобальные атрибуты.

Элемент <dt> представляет термин в списке описаний <dl>.

При использовании в элементе <dl> элемент <dt> не обязательно представляет определяемый термин. Для этой цели можно использовать элемент <dfn>.

<dl>
  <dt lang="en-us"><dfn>Color</dfn></dt>
  <dt lang="en-gb"><dfn>Colour</dfn></dt>
  <dd>A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three
        differently filtered analyses of a view.</dd>
</dl>

11. Элемент <dd>

Категории контента: отсутствуют.

Контекст, в котором этот элемент может быть использован: после элементов <dt> или <dd> внутри элементов <dl>.

Пропуск тегов: закрывающий тег элемента <dd> может быть опущен, если за элементом <dd> сразу же следует другой элемент <dd> или элемент <dt> или если в родительском элементе больше нет содержимого.

Для элемента доступны ‎глобальные атрибуты.

Элемент <dd> представляет описание в списке описаний <dl>.

12. Элемент <figure>

Категории контента: потоковое содержимое, корневой секционный, видимое содержимое.

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

Пропуск тегов: ни один из тегов не может быть пропущен.

Элемент <figure> представляет автономное содержимое (необязательно с подписью), являющееся самостоятельным элементом основного потока. С помощью элемента <figure> можно добавлять краткие характеристики к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д. 

<figure>
    <img src="picture.jpg" alt="Осень">
    <figcaption>Осенний лес</figcaption>
</figure>

Когда на <figure> ссылаются из основного содержимого документа, идентифицируя его по заголовку (например, по номеру рисунка), это позволяет легко перемещать такое содержимое из основного содержимого, например, в боковую колонку или приложение, не затрагивая поток документа.

Стили браузеров по умолчанию для элемента <figure>: 


display: block;
margin-left: 40px;
margin-right: 40px;
margin-top: 1em;
margin-bottom: 1em;

Для элемента доступны ‎глобальные атрибуты.

13. Элемент <figcaption>

Категории контента: отсутствуют.

Контекст, в котором этот элемент может быть использован: как потомок элемента <figure>.

Пропуск тегов: ни один из тегов не может быть пропущен.

Элемент <figcaption> представляет заголовок или легенду для остального содержимого родительского элемента <figure>.

Для элемента доступны ‎глобальные атрибуты.

14. Элемент <main>

Категории контента: потоковое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое; не может быть потомком таких элементов как <article>, <aside>, <footer>, <header> или <nav>.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.

Элемент <main> включает основное содержимое элемента <body> документа или приложения и исключает содержимое, которое повторяется на страницах сайта/приложения, таких как ссылки для навигации по сайту, информация об авторских правах, логотипы сайта и баннеры, а также поисковые формы (за исключением случаев, когда основной функцией документа или приложения является поисковая форма).

Не является секционным содержимым, поэтому не оказывает никакого влияния на структуру документа.

В документе должно быть не более одного элемента <main>. 

<body>
<header>
  <h1>Пудель</h1>
    <nav>
      <ul>
        <li><a href="index.html">Главная</a></li>
        <li><a href="about.html">О породе</a></li>
        <li><a href="health.html">Здоровье</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <header>
        <h2>О породе</h2>
          <nav>
            <ul>
              <li><a href="#basic">Разновидности</a></li>
              <li><a href="#app">Внешний вид</a></li>
              <li><a href="#temp">Характер</a></li>
            </ul>
          </nav>
      </header>
      <section id="basic">
        <h3>Разновидности</h3>
          <p>...</p>
      </section>
      <section id="app">
        <h3>Внешний вид</h3>
          <p>...</p>
      </section>
      <section id="temp">
        <h3>Характер</h3>
          <p>...</p>
      </section>
      <footer>
        <a href="#basic">Разновидности</a>
        <a href="#app">Внешний вид</a>
        <a href="#temp">Характер</a>
      </footer>
      </section>
    </main>
    <footer>
      <small>Copyright © <time datetime="2016">2016</time> Моя собака.ру</small>
    </footer>
</body>

15. Элемент <div>

Категории контента: потоковое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое; как дочерний элемент <dl>.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.

Элемент <div> сам по себе ничего не значит. Он представляет свои дочерние элементы. Может использоваться с атрибутами class, lang и title для разметки семантики, общей для группы последовательных элементов.

Рекомендуется использовать элемент <div> в случаях, когда другой элемент не подходит. Использование более подходящих элементов вместо элемента <div> обеспечивает лучшую доступность для читателей и облегчает обслуживание кода.

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

<article lang="en-US">
  <h2>My use of language and my cats</h2>
  <p>My cat’s behavior hasn’t changed much since her absence, except that she plays her new physique to the neighbors regularly, in an attempt to get pets.</p>
  <div lang="en-GB">
     <p>My other cat, colored black and white, is a sweetie. He followed us to the pool today, walking down the pavement with us. Yesterday he apparently visited our neighbours. I wonder if he recognizes that their flat is a mirror image of ours.</p>
     <p>Hm, I just noticed that in the last paragraph I used British English. But I’m supposed to write in American English. So I shouldn’t say "pavement" or "flat" or "color"...</p>
  </div>
  <p>I should say "sidewalk" and "apartment" and "color"!</p>
</article>

По материалам Grouping content

Разделы документа
Семантика уровня текста

Поделиться: