如何在语义上将标题添加到列表中 [英] How to semantically add heading to a list

问题描述

这一直困扰着我，我想知道如何正确地做到这一点，是否有共识。当我使用HTML列表时，如何在语义上为列表添加标题？

其中一个选项是：

 < h3>我喜欢的水果：< / h3> 
< ul> 
< li>苹果< / li> 
< li>香蕉< / li> 
< li>桔子< / li> 
< / ul> 
  

但在语义上< h3> 标题与< ul>

没有明确关联。另一个选项是这样的：

< ul>
< li>< h3>我喜欢的水果：< / h3>< / li>
< li>苹果< / li>
< li>香蕉< / li>
< li>桔子< / li>
< / ul>


但这看起来有点肮脏，因为标题并不是真正的列表项之一。 p>

W3C不允许使用此选项：

 < UL> 
< h3>我喜欢的水果：< / h3> 
< li>苹果< / li> 
< li>香蕉< / li> 
< li>桔子< / li> 
< / ul> 
  

为< ul> 的可以只包含一个或多个< li> 的

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

$ b

 < ul> ; 
< lh>我喜欢的水果：< / lh> 
< li>苹果< / li> 
< li>香蕉< / li> 
< li>桔子< / li> 
< / ul> 
  

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

我听说它建议我们像

一样使用< label> ：

 < ul> 
< label>我喜欢的水果：< / label> 
< li>苹果< / li> 
< li>香蕉< / li> 
< li>桔子< / li> 
< / ul> 
  

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

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

  ul li：第一个类型{
 list-style：none; 
 margin-left：-1em; 
 / *其他标题样式* / 
} 
  

恐怖！但至少通过这种方式，我可以控制整个< ul> 标题和全部，通过设计 ul 标签。

执行此操作的正确方法是什么？任何想法？

正如Felipe Alsacreations已经说过的那样，第一种选择很好。

如果您希望确保列表下方没有内容被解释为属于该标题，那么这正是HTML5分段内容元素的用途。因此，例如您可以做

 < h2>关于水果< / h2> 
<节> 
< h3>我喜欢的水果：< / h3> 
< ul> 
< li>苹果< / li> 
< li>香蕉< / li> 
< li>桔子< / li> 
< / ul> 
< / section> 
<！ - 这里的任何内容都是关于水果部分的一部分，但
不属于我喜欢的水果部分。 - > 
  

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?

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>

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:

<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

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

<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

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

<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:

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 ul tag.

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

解决方案

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

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

<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. -->

这篇关于如何在语义上将标题添加到列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！