Элементы раздела учитывают их порядок? - PullRequest
Новая
       5

Элементы раздела учитывают их порядок?

2 голосов
/ 09 апреля 2020

Я пишу HTML для страницы Условия предоставления услуг. Я решил использовать элемент ol и элемент section с учетом следующих двух элементов:

  1. Каждый элемент должен быть гарантирован в порядке
  2. Каждая часть может быть разрезана в виде секции 

ol {
  list-style: none;
}
<ol>
  <li>
    <section>
      <h1>1.</h1>
    </section>
  </li>
  <li>
    <section>
      <h1>2.</h1>
    </section>
  </li>
  <li>
    <section>
      <h1>3.</h1>
    </section>
  </li>
</ol>

Однако знакомый проверил, что он заменен только на элемент section. Он сказал, что если вы пишете только элемент section, порядок гарантирован. 

<section>
  <h1>1.</h1>
</section>
<section>
  <h1>2.</h1>
</section>
<section>
  <h1>3.</h1>
</section>

Однако я (и рецензент) не нашел никакого основания для этого в стандарте HTML.

Вопрос

  1. Один элемент section гарантирует, что их заказ имеет значение?

  2. Допустимо объединение элементов списка и раздела, но дает ли это семантически неуместное толкование как "Условия" службы "разметка страницы?

Ответы [ 2 ]

1 голос
/ 09 апреля 2020

Короткий ответ

Он прав, список здесь не нужен.

Длинный ответ

При условии, что вы не измените заказ с помощью CSS, элементы будут быть отображены (и прочитаны в программе чтения с экрана) в том порядке, в котором они находятся в DOM.

Так что, если вы не используете какое-либо позиционирование на элементах section, которые будут мешать этому (то есть position: absolute) и вы не меняете порядок с помощью tabindex="1", tabindex="2" et c. все будет в порядке.

То, что вы делали, действительно HTML для дальнейшего использования: элемент li использует модель содержимого потока как таковую он может содержать любые элементы, перечисленные на этой странице

Следует учитывать, что вы используете <h1> в этих разделах. Хотя технически это допустимо HTML, в скором времени оно вернется к правилу «один <h1> на страницу», также настоятельно рекомендуется сделать это для пользователей программ чтения с экрана, поскольку они по-прежнему не используются для нескольких <h1> правило. Измените их на <h2> или любое другое подходящее.

Если вы сделаете это, добавление упорядоченного списка (по крайней мере, для доступности) не принесет пользы.

0 голосов
/ 09 апреля 2020

Согласно spe c ничто не говорит о том, что вы не можете использовать тег section внутри ol.

Элемент section представляет обобщенный c раздел документа или приложения. Раздел в этом контексте представляет собой тематическую c группу содержимого, обычно с заголовком.

Примерами разделов могут быть главы, различные страницы с вкладками в диалоговом окне с вкладками или пронумерованные разделы Тезис. Домашняя страница веб-сайта может быть разбита на разделы для введения, новостей и контактной информации.

При прочтении этого вы можете использовать section внутри ol. HTML5 валидатор w3.org не выдает никаких ошибок. Я взял бы это с зерном соли. И согласно MDN примечаниям к использованию

примечания по использованию

  • Каждое должно быть идентифицировано, как правило, путем включения заголовка (- element) как дочерний элемент.
  • Если имеет смысл отдельно синдицировать содержимое элемента, используйте вместо него элемент.
  • Не используйте элемент как обобщенный c контейнер; это то, для чего, особенно когда секционирование только для стилизации. Практическое правило заключается в том, что раздел должен логически появляться в структуре документа.

К первому вопросу, да, один элемент section гарантирует, что их порядок имеет значение. Согласно этот

Элемент section является универсальным c semanti c элементом, который можно использовать для объединения частей документа в отдельные единицы, которые связаны между собой. каким-то образом. Например, элемент section может создавать элементы внутри структуры документа или делить содержимое страницы на связанные части (например, введение), за которым следует некоторая справочная информация в топи c.

Некоторые примеры использования даны следующие. Элемент section может быть применен к каждому отдельному разделу переключателя вкладок или ползунка содержимого (если неупорядоченный список не требуется). Элемент section также может разделить длинную страницу «Условия использования» (или аналогичную) на пронумерованные разделы. Кроме того, элементы раздела могут разделять различные разделы одностраничного веб-сайта или портфолио. Обычное использование в автономном режиме может означать главу книги.

Это означает, что элемент раздела может использоваться для обозначения порядка / потока документа. Что, я думаю, будет гарантировать, что заказ имеет значение.

ссылка - HTML5,

внутри неупорядоченного списка

Не беспокойтесь о семанти c соображениях - они

обязательно размыты.

...