I'm working on a simple navigation bar for my website that includes a logo and a series of links. Given that it's a list of links, would it be better to use an ordered list (<ol>) for semantic purposes, or is a basic <div> the way to go? Here's a comparison of the two options I'm considering:
1) Using <ol>:
```html
<ol className="flex items-center gap-x-8">
<li><a href="/">Features</a></li>
<li><a href="/">Customer Stories</a></li>
<li><a href="/">Pricing</a></li>
<li><a href="/">Blog</a></li>
</ol>
```
2) Using <div>:
```html
<div className="flex items-center gap-x-8">
<a href="/">Features</a>
<a href="/">Customer Stories</a>
<a href="/">Pricing</a>
<a href="/">Blog</a>
</div>
```
Which one makes more sense from a semantic standpoint?
1 Answer
Since you’ve got a list of items that are closely related, it’s definitely better to use a list. You really want to avoid using a <div> unless there's no other more fitting block-level element. When in doubt, just check MDN for guidelines!
Related Questions
Cloudflare Origin SSL Certificate Setup Guide
How To Effectively Monetize A Site With Ads