Semantic HTML for alphabetical list

Question

I need to write a simple alphabetical list of words like this:

A
- Andorra
- Angola
- Antigua and Barbuda
- Argentina

B
- Bahamas
- Bahrain
- Bangladesh
- Barbados

(and so on)

Is it ok to use an ordered list to keep my HTML semantic and then clear the styling using CSS?

Answer 1

CSS doesn’t affect the semantics. You can style an ol in any way you want (display it without any list indicator, use bullets instead of numbers, display it in one line, visually hide it, etc.), it keeps being an ol, and it keeps its semantics.

Unless the page explicitly says that the entries are sorted alphabetically, using an ul instead of an ol might be appropriate. ol must only be used if a different order would change the meaning.

So if the only indicator of the alphabetical order are the headings ("A", "B" etc.), you could use 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>

However, one could argue that a heading like "A" implies that the entries are sorted alphabetically (instead of just starting with an "A"). In that case, ol should be used.