Using html5 NAV TAG

I started using html tags on my pages and I am trying to determine what the proper use of the NAV tag is. I read the documentation and it seems that I should be fine with what I have, but I noticed that most other developers have their own β€œnavigation” blocks in the tags β€œul” β€œli”. I am using a div.

My question is: what are the pros and cons of using "ul" "li" tags, not divs?

And will the next work with nav?

<nav> <div id="navBar"> <div id="navItem1"><a></a></div> <div id="navItem2"><a></a></div> <div id="navItem3"><a></a></div> <div id="navItem4"><a></a></div> </div> </nav> 
+4
source share
3 answers

The code you posted is not the best practice. It should be:

 <nav> <ul> <li><a></a></li> <li><a></a></li> <li><a></a></li> <li><a></a></li> </ul> </nav> 
Tags

<ul> and <li> better than using div tags, and are almost always used for menus. Using ul and li s, you do not litter your code with WAY too many identifiers.

+7
source

Lists (ul, ol) may have additional meaning in accessible browsers (screen readers, etc.), but divs may not. This makes it easier for these users to use your site, and one of the list of reasons is preferable for the menu.

In addition, as others have said, list tags give content some context (menus are lists of links), while divs have no context.

+3
source

custom, the navigation bar is considered a list of links, so ul-li. there is no real difference, just common practice

what you do is fine, far-fetched, maybe I would replace the div # navBar with nav # navBar to reduce the invalidation rate

+1
source

All Articles