按字母顺序排列的列表的语义 HTML

Question

我需要写一个简单的按字母顺序排列的单词列表，如下所示：

A
- Andorra
- Angola
- Antigua and Barbuda
- Argentina

B
- Bahamas
- Bahrain
- Bangladesh
- Barbados

（依此类推）

是否可以使用有序列表来保持我的 HTML 语义，然后使用 CSS 清除样式？

Answer 1

CSS 不影响语义。您可以以任何您想要的方式设置 ol 的样式（不带任何列表指示器显示它、使用项目符号而不是数字、在一行中显示它、视觉上隐藏它等），它一直是 ol, 并保持其语义。

除非页面明确说明条目按字母顺序排序，否则使用 ul 而不是 ol 可能是合适的。 ol 只有在不同的顺序会改变含义时才必须使用。

因此，如果字母顺序的唯一指示符是标题（"A"、"B" 等），您可以使用 ul:

<section>
  <h2>List of …</h2>

  <section id="a">
    <h3>A</h3>
    <ul>
      <li>Andorra</li>
      <li>Angola</li>
    </ul>
  </section>    

  <section id="b">
    <h3>B</h3>
    <ul>
      <li>Bahamas</li>
      <li>Bahrain</li>
    </ul>
  </section>    

</section>

然而，有人可能会争辩说，像 "A" 这样的标题意味着条目是按字母顺序排序的（而不是以开头 "A"）。在这种情况下，应该使用 ol。

按字母顺序排列的列表的语义 HTML

Semantic HTML for alphabetical list

html

css

semantic-markup

html-lists