代码之家 › 专栏 › 技术社区 › viam0Zah

如何标记HTML列表的标题

semantic-markup html

viam0Zah · 技术社区 · 14 年前

<caption> 对于桌子, <figcaption>

在HTML3.0中, there was an element <LH> 但现在已经不赞成了。

Lorem ipsum悲哀的坐着amet, 献祭精英。纳拉埃吉特·埃尼姆·内克·梅特斯·费吉亚特·波特。悬而未决在福西布斯奥奇卢克图斯等primis 乌尔特里斯库里亚;莫比 nisl suscipit rutrum中的vitae erat。

我喜欢的水果:

阿纳纳斯

覆盆子

香蕉

在mauris vel diam eleifend 再见。欧盟内奎姆项目智者的生活水平阿库姆桑 vitae nisl eleifend aliquet公司。梅塞纳斯再见普鲁斯麦格纳。

4 回复 | 直到 14 年前

schot 14 年前

看起来你想要一个HTML5的答案。如果你所有的列表都有标题,我会用 <dl> (现在的意思是描述列表)使用单个 <dt> <dd> 的:

<dl>
    <dt>Fruits I love:</dt>
    <dd>Ananas</dd>
    <dd>Strawberry</dd>
</dl>

<ul> / <ol> <hX> 的。包装 <高x> <div> 要保留语义:

<div class="list">
    <h2>Fruits I love:</h2>
    <ul>
        <li>Ananas</li>
        <li>Strawberry</li>
    </ul>
</div>

Mickel 14 年前

我会使用一个常规的标题,最好是在低于您以前使用的一个水平。

Ms2ger 14 年前

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget enim nec metus feugiat porta. Suspendisse convallis dictum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vitae erat in nisl suscipit rutrum.</p>

<p>Fruits I love:</p>
<ul>
  <li>Ananas</li>
  <li>Raspberry</li>
  <li>Banana</li>
</ul>

<p>In in mauris vel diam eleifend adipiscing. Proin id neque quam, eu mattis ipsum. Nulla facilisi. Sed id sapien eget mi cursus placerat vel sed justo. Integer vel pellentesque magna. Donec quis nisi lacus, accumsan rhoncus leo. Quisque tempor metus vitae nisl eleifend aliquet. Maecenas adipiscing purus magna.</p>

figcaption 适用于其他情况:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget enim nec metus feugiat porta. Suspendisse convallis dictum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vitae erat in nisl suscipit rutrum.</p>

<p>I love <a href=#fruits>some fruits</a>!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget enim nec metus feugiat porta. Suspendisse convallis dictum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vitae erat in nisl suscipit rutrum.</p>

<p>In in mauris vel diam eleifend adipiscing. Proin id neque quam, eu mattis ipsum. Nulla facilisi. Sed id sapien eget mi cursus placerat vel sed justo. Integer vel pellentesque magna. Donec quis nisi lacus, accumsan rhoncus leo. Quisque tempor metus vitae nisl eleifend aliquet. Maecenas adipiscing purus magna.</p>

<figure id=fruits>
  <figcaption>List 1: Fruits I love</figcaption>
  <ul>
    <li>Ananas</li>
    <li>Raspberry</li>
    <li>Banana</li>
  </ul>
</figure>

Community Rick James 7 年前

使用HTML5,如 schot pointed out
使用HTML3,正如您注意到的:)
<h3>Things I love</h3>

<h4>The list</h4>
<ul>
<li>Ananas</li>
<li>Raspberry</li>
<li>Banana</li>
</ul>

<h4>Elaborated description</h4>

<p>Lorem ipsumâ¦</p>

如果您使用Firefox,我建议您使用HeadingMap以清楚地看到页面结构:

HeadingsMap :: Add-ons for Firefox