Каков правильный способ размещения списков в абзаце HTML5?

Я получаю техническое объяснение того, почему элемент <p> не может содержать элемент <ul>. К сожалению, это не помогает мне, когда эта структура содержимого.

В мета, я не понимаю ни

  • семантическое объяснение, а
  • рекомендуемая структура

для случаев, когда я действительно хочу показать список элементов "inline" с обычным контентом.

Эта страница предлагает либо отделить список от абзацев:

<p>For instance, this fantastic sentence has bullets relating to</p>
<ul>
 <li>wizards,
 <li>faster-than-light travel, and
 <li>telepathy,
</ul>
<p>and is further discussed below.</p>

или используя альтернативный тег для абзаца:

<div>For instance, this fantastic sentence has bullets relating to
<ul>
 <li>wizards,
 <li>faster-than-light travel, and
 <li>telepathy,
</ul>
and is further discussed below.</div>

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

В первом случае, как тег <p> семантически значим? Не говоря уже о практических трудностях правильного стилизации этого, если я хочу устранить интервал вокруг списка (а затем, если у меня есть другие списки, которые действительно являются отдельными блоками контента - oy!)

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

ISTM, что наиболее семантически значимая версия может быть примерно такой:

<p>For instance, this fantastic sentence has bullets relating to
 <span class="li">wizards,</span>
 <span class="li">faster-than-light travel, and</span>
 <span class="li">telepathy,</span>
and is further discussed below.</p>

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

Есть ли хорошая рекомендация по предоставлению такого контента?

Изменить

На самом деле это не так сложно, как кажется. Я не уверен, есть ли способ получить все настройки браузера по умолчанию, но я могу реплицировать стиль списка по умолчанию (по крайней мере, на OS X Chrome):

span.li {
  display: list-item;
  list-style-type: disc;
  margin-left: 40px;
}

Ответы

Ответ 1

Для меня это пример списка, или видя каждую последовательность вещей как список, который нуждается в маркировке как таковой.

Мой первый подход состоял бы в том, чтобы отметить то, что у вас есть:

<p>For instance, this fantastic sentence has bullets relating to wizards, 
faster-than-light travel, and telepathy, and is further discussed below.</p>

Если вам нужно применить общий стиль к этим элементам, то соответствующий крючок стиля будет <span>, как у вас в вашем последнем примере. Я бы не использовал li как имя класса; независимо от того, является ли каждый фрагмент текста элементом списка или нет, не имеет большого значения. Всегда сложно выбрать правильные имена классов, не зная общего содержимого страницы и того, как она используется в контексте, но, возможно, topic будет подходящим выбором. Таким образом, наценка становится

<p>For instance, this fantastic sentence has bullets relating to <span
class="topic">wizards</span>, <span class="topic">faster-than-light 
travel</span>, and <span class="topic">telepathy</span>, and is further 
discussed below.</p>

Ответ 2

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

<p>For instance, this fantastic sentence has bullets relating to:
wizards, faster-than-light travel, and telepathy,
and is further discussed below.</p>

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

<h2>For instance, this fantastic heading has bullets relating to:</h2>
<ul>
 <li>wizards,
 <li>faster-than-light travel, and
 <li>telepathy,
</ul>