什么是编码标题/标题的最佳方法 or , Like we have in ?

Question

编码<ul>或<ol>标题/标题的最佳方法是什么？就像我们在<caption>有<table>一样，我们不想让它们变得大胆。

这个可以吗？

<p>heading</p>
<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

或者应该始终使用标题？

<h3|4|5|6>heading</h3|4|5|6>
<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

Answer 1

始终使用标题标签作为标题。线索在名称:)

如果您不希望它们变为粗体，请使用CSS更改其样式。例如：

HTML:

<h3 class="list-heading">heading</h3>

<ul> 
    <li>list item </li>
    <li>list item </li>
    <li>list item </li>
</ul>

CSS

.list-heading {
    font-weight: normal;
}

在HTML5中，您可以使用<section>元素更清楚地关联标题和列表。 （但是，如果没有一些JavaScript，<section>在IE 8及更早版本中无法正常工作。）

<section>
    <h1>heading</h1>

    <ul>
        <li>list item </li>
        <li>list item </li>
        <li>list item </li>
    </ul>
</section>

你可以在HTML 4中做类似的事情：

<div class="list-with-heading">
    <h3>Heading</h3>

    <ul>
        <li>list item </li>
        <li>list item </li>
        <li>list item </li>
    </ul>
</div>

然后风格：

.list-with-heading h3 {
    font-weight: normal;
}

Answer 2

虽然这已经过时了，但我正在为其他可能在以后搜索时找到此问题的人进行更新。

@Matt Kelliher：

使用css：之前和列表的data- *属性是一个好主意，但可以稍微修改以便更容易访问：

HTML：

<ul aria-label="Vehicle Models Available:"> 
    <li>Dodge Shadow</li>
    <li>Ford Focus</li>
    <li>Chevy Lumina</li>
</ul>

CSS：

ul:before{
    content:attr(aria-label);
    font-size:120%;
    font-weight:bold;
    margin-left:-15px;
}

这将生成一个列表，其上方有“header”伪元素，文本设置为aria-label属性中的值。然后，您可以轻松地根据您的需求进行设计。

使用data- *属性的好处是，屏幕阅读器将读取aria-label作为列表的“标签”，这对于您对此数据的预期用途在语义上是正确的。

注意：IE8支持：在属性之前，但必须使用单冒号版本（并且必须定义有效的doctype）。 IE7不支持：之前，但Modernizer或Selectivizr应该为您解决该问题。所有现代浏览器都支持旧版：在语法之前，但更喜欢使用:: before语法。通常，处理此问题的最佳方法是使用旧格式的IE7 / 8外部样式表和使用新格式的通用样式表，但在实践中，大多数只使用旧的单冒号格式，因为它仍然是100％交叉浏览器，即使技术上对CSS3无效。

Answer 3

我喜欢使用css :before和data-*属性列表

HTML：

<ul data-header="heading"> 
<li>list item </li>
<li>list item </li>
<li>list item </li>
</ul>

CSS：

ul:before{
    content:attr(data-header);
    font-size:120%;
    font-weight:bold;
    margin-left:-15px;
}

这将生成一个带有标题的列表，该列表是指定为列表的data-header属性的任何文本。然后，您可以轻松地根据您的需求进行设计。

Answer 4

如何使标题成为具有不同样式的list-element

<ul>
 <li class="heading">heading</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
</ul>

和CSS

ul .heading {font-weight: normal; list-style: none;}

另外，使用重置CSS在ul和li上设置边距和填充。 here's很好的重置CSS。一旦你重置了边距和填充，你可以在列表元素上应用一些边距而不是标题类的边距，以缩进它们。

Answer 5

是否允许使用<caption>？

<ul>
  <caption> Title of List </caption>
  <li> Item 1 </li>
  <li> Item 2 </li>
</ul>

Answer 6

h3绝对是比h2，h1或h6更好的解决方案！

1. 你必须使用特定级别：如果你在h1中，使用h2，如果你在h5中，使用h6（如果你在h6 ......哼，使用strong或em作为例子）。这不是义务，而是可达性问题（Here, green part）。
2. 您不必为列表赋予标题...因为它不存在此元素。所以屏幕阅读器不会使用特殊的东西。

因此，使用Hn可能是最好的解决方案之一，但肯定不是特定的水平。