как семантически предоставить заголовок, заголовок или метку для списка в html

<p>как правильно обеспечить <strong>семантическую</strong> подпись для списка html? например, следующий список имеет заголовок/заголовок.</p><p><strong>фрукты</strong></p><ul> <li>apple</li> <li>груша</li> <li>оранжевый</li> </ul><p>как следует обращаться со словом "фрукт" таким образом, чтобы оно семантически ассоциировалось с самим списком?</p>

<p>хотя элемент заголовка или заголовка не структурирован, ваша разметка может иметь тот же эффект. вот некоторые предложения:</p><p><strong>вложенный список</strong></p><pre><code><ul> <li> fruit <ul> <li>apple</li> <li>pear</li> <li>organge</li> </ul> </li> </ul> </code></pre><hr><p><strong>заголовок до списка</strong></p><pre><code><hx>fruit</hx> <ul> <li>apple</li> <li>pear</li> <li>orange</li> </ul> </code></pre><hr><p><strong>список определений</strong></p><pre><code><dl> <dt>fruit</dt> <dd>apple</dd> <dd>pear</dd> <dd>orange</dd> </dl> </code></pre>

<p><strong> вариант 1 </strong></p><p>в html5 есть элементы <a href="https://www.w3.org/tr/html5/grouping-content.html#the-figure-element"><code>figure</code> и <code>figcaption</code></a> , что, на мой взгляд, прекрасно работает.</p><p>пример:</p><pre><code><figure> <figcaption>fruit</figcaption> <ul> <li>apple</li> <li>pear</li> <li>orange</li> </ul> </figure> </code></pre><p>затем они легко оформляются с помощью css.</p><hr><p><strong> вариант 2 </strong></p><p>хорошим решением может быть использование псевдоэлемента :: before в css3:</p><p>html:</p><pre><code><ul title="fruit"> <li>apple</li> <li>pear</li> <li>orange</li> </ul> </code></pre><p>css:</p><pre><code>ul[title]::before { content: attr(title); /* then add some nice styling as needed, eg: */ display: block; font-weight: bold; padding: 4px; } </code></pre><p>конечно, вы можете использовать другой селектор, чем <code>ul[title]</code>; например, вы можете добавить класс title-as-header и использовать вместо него <code>ul.title-as-header::before</code> или все, что вам нужно.</p><p>это имеет побочный эффект, давая вам всплывающую подсказку для всего списка. если вам не нужна такая подсказка, вы можете вместо этого использовать атрибут данных (например, <code><ul data-title="fruit"></code> и <code>ul[data-title]::before { content: attr(data-title); }</code>).</p>

<p>насколько я знаю, в текущих спецификациях html нет положений для предоставления заголовка для списка, как в случае с таблицами. я бы остановился на использовании либо классифицированного абзаца, либо тега заголовка.</p><pre><code><h3>fruit</h3> <ul> <li>apple</li> <li>pear</li> <li>orange</li> </ul> </code></pre><p>в будущем, когда html5 получит более широкое распространение, вы сможете использовать теги <code><legend></code> и <code><figure></code>, чтобы выполнить это немного более семантически.</p><p>см. <a href="http://lists.w3.org/archives/public/public-html/2008feb/0357.html">этот пост</a> в списке рассылки w3c для получения дополнительной информации.</p>

<p>для списка, подобного таблице, нет тега, похожего на заголовок. так что я бы просто дал ему <code><hx></code> (x в зависимости от ваших ранее использованных заголовков).</p>

<p>вы всегда можете использовать <code><label/></code>, чтобы связать метку с вашим элементом списка:</p><pre><code><div> <label for="list-2">test</label> <ul id="list-1"> <li>one</li> <li>two</li> <li>three</li> </ul> <label for="list-2">test</label> <ol id="list-2"> <li>one</li> <li>two</li> <li>three</li> </ul> </div> </code></pre>