Html 如何在语义上向列表添加标题

How to semantically add heading to a list

提问by Tomas Mulder

This has been bothering me for a while, and I'm wondering if there's any consensus on how to do this properly. When I'm using an HTML list, how do I semantically include a header for the list?

这一直困扰着我一段时间，我想知道是否就如何正确地做到这一点达成了共识。当我使用 HTML 列表时，如何在语义上包含列表的标题？

One option is this:

一种选择是这样的：

<h3>Fruits I Like:</h3>
<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

but semantically the <h3>heading is not explicitly associated with the <ul>

但在语义上，<h3>标题没有明确地与<ul>

Another option is this:

另一种选择是这样的：

<ul>
    <li><h3>Fruits I Like:</h3></li>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

but this seems a bit dirty, as the heading is not really one of the list items.

但这似乎有点脏，因为标题并不是真正的列表项之一。

This option is not allowed by the W3C:

W3C 不允许此选项：

<ul>
    <h3>Fruits I Like:</h3>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

as <ul>'s can only contain one or more <li>'s

如<ul>'s只能含有一种或多种<li>的

The old "list heading" <lh>makes the most sense

旧的“列表标题”<lh>最有意义

<ul>
    <lh>Fruits I Like:</lh>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

but of course it's not officially part of HTML

但当然它不是 HTML 的正式组成部分

I've heard it suggested that we use <label>just like a form:

我听说有人建议我们<label>像表单一样使用：

<ul>
    <label>Fruits I Like:</label>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

but this is a little strange and will not validate anyway.

但这有点奇怪，无论如何都不会验证。

It's easy to see the semantical problems when trying to style my list headers, where I end up needing to put my <h3>tags within the first <li>and target them for styling with something like:

在尝试为我的列表标题设置样式时很容易看到语义问题，我最终需要将我的<h3>标签放在第一个中，<li>并使用以下内容将它们定位为样式：

ul li:first-of-type {
    list-style: none;
    margin-left: -1em;
    /*some other header styles*/
}

horrors! But at least this way I can control the entire <ul>, heading and all, by styling the ultag.

恐怖！但至少通过这种方式，我可以<ul>通过设置ul标签样式来控制整个、标题和所有内容。

What is the correct way to do this? Any ideas?

这样做的正确方法是什么？有任何想法吗？

采纳答案by Alohci

As Felipe Alsacreations has already said, the first option is fine.

正如 Felipe Alsacreations 已经说过的，第一个选项很好。

If you want to ensure that nothing below the list is interpreted as belonging to the heading, that's exactly what the HTML5 sectioning content elements are for. So, for instance you could do

如果您想确保列表下方的任何内容都不会被解释为属于标题，这正是 HTML5 分段内容元素的用途。所以，例如你可以做

<h2>About Fruits</h2>
<section>
  <h3>Fruits I Like:</h3>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
  </ul>
</section>
<!-- anything here is part of the "About Fruits" section but does not 
     belong to the "Fruits I Like" section. -->

回答by Duncan Tidd

In this case I would use a definition list as so:

在这种情况下，我将使用定义列表，如下所示：

<dl>
  <dt>Fruits I like:</dt>
  <dd>Apples</dd>
  <dd>Bananas</dd>
  <dd>Oranges</dd>
</dl>

回答by FelipeAls

Your first option is the good one. It's the least problematic one and you've already found the correct reasons why you couldn't use the other options.

你的第一个选择是好的。这是问题最少的一个，您已经找到了无法使用其他选项的正确原因。

By the way, your heading IS explicitly associated with the <ul>: it's right before the list! ;)

顺便说一句，您的标题与以下内容明确相关<ul>：它就在列表之前！;)

edit: Steve Faulkner, one of the editors of W3C HTML5 and 5.1 has sketched out a definitionof an ltelement. That's an unofficial draftthat he'll discuss for HTML 5.2, nothing more yet.

编辑：Steve Faulkner，W3C HTML5 和 5.1 的编辑之一，已经勾勒出一个lt元素的定义。这是他将针对 HTML 5.2 讨论的非官方草案，仅此而已。

回答by Evert

a <div> is a logical division in your content, semantically this would be my first choice if I wanted to group the heading with the list:

<div> 是内容中的逻辑划分，从语义上讲，如果我想将标题与列表分组，这将是我的第一选择：

<div class="mydiv">
    <h3>The heading</h3>
    <ul>
       <li>item</li>
       <li>item</li>
       <li>item</li>
    </ul>
</div>

then you can use the following css to style everything together as one unit

然后您可以使用以下 css 将所有样式作为一个单元一起设置

.mydiv{}
.mydiv h3{}
.mydiv ul{}
.mydiv ul li{}
etc...

回答by Rambobafet

You could also use the <figure>element to link a heading to your list like this:

您还可以使用该<figure>元素将标题链接到您的列表，如下所示：

<figure>
    <figcaption>My favorite fruits</figcaption>    
       <ul>
          <li>Banana</li>
          <li>Orange</li>
          <li>Chocolate</li>
       </ul>
</figure>

Source: https://www.w3.org/TR/2017/WD-html53-20171214/single-page.html#the-li-element(Example 162)

资料来源：https: //www.w3.org/TR/2017/WD-html53-20171214/single-page.html#the-li-element（示例 162）

回答by jpenkethman

Try defining a new class, ulheader, in css. p.ulheader ~ ul selects all that immediately follows My Header

尝试在 css 中定义一个新类 ulheader。p.ulheader ~ ul 选择紧跟在 My Header 之后的所有内容

p.ulheader ~ ul {
   margin-top:0;
{
p.ulheader {
   margin-bottom;0;
}

回答by Jfields

According to w3.org(note that this link is in the long-expired draft HTML 3.0 spec):

根据w3.org（请注意，此链接位于长期过期的 HTML 3.0 规范草案中）：

An unordered list typically is a bulleted list of items. HTML 3.0 gives you the ability to customise the bullets, to do without bullets and to wrap list items horizontally or vertically for multicolumn lists.

The opening list tag must be <UL>. It is followed by an optional list header (<LH>caption</LH>) and then by the first list item (<LI>). For example:

<UL>
  <LH>Table Fruit</LH>
  <LI>apples
  <LI>oranges
  <LI>bananas
</UL>

which could be rendered as:

Table Fruit

• apples
• oranges
• bananas

Note:Some legacy documents may include headers or plain text before the first LI element. Implementors of HTML 3.0 user agents are advised to cater for this possibility in order to handle badly formed legacy documents.

无序列表通常是项目符号列表。HTML 3.0 使您能够自定义项目符号、不使用项目符号以及为多列列表水平或垂直包装列表项。

开头列表标签必须是<UL>. 后面是一个可选的列表标题 ( <LH>caption </LH>)，然后是第一个列表项 ( <LI>)。例如：

<UL>
  <LH>Table Fruit</LH>
  <LI>apples
  <LI>oranges
  <LI>bananas
</UL>

可以呈现为：

餐桌水果

• 苹果
• 橙子
• 香蕉

注意：一些旧文档可能在第一个 LI 元素之前包含标题或纯文本。建议 HTML 3.0 用户代理的实现者迎合这种可能性，以处理格式错误的遗留文档。

回答by Vlad

I put the heading inside the ul. There's no rule that says UL must contain only LI elements.

我把标题放在 ul 里面。没有规定 UL 必须只包含 LI 元素。