Menu
<nav>: The Navigation Section element The <nav> HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents.
You should be using an unordered list of items ( UL element with LI elements) to be semantically correct about it. This also helps screen readers and other technologies that depend on correct semantics to work.
Yes, absolutely. You can have multiple header , nav , and footer tags sans penalty.
"ul" is the unordered list. The ". nav "part is referring to the name of a class, and the last part "li" refers to the list items of that list. In summary, the statement ul. nav li is targeting all the list items inside the unordered list that has the .
the nav element and the list provide different semantical information:
The nav element communicates that we're dealing with a major navigation block
The list communicates that the links inside this navigation block form a list of items
At http://w3c.github.io/html/sections.html#the-nav-element you can see that a nav element could also contain prose.
So yes, having a list inside a nav element does add meaning.
For me, the unordered lists are extra markup that aren't really required. When I look at an HTML document, I want it to be as clean and easy to read as possible. It's already clear to the viewer that a list is being presented if proper indentation is used. Thus, adding the UL to these a tags is unnecessary and makes for reading the document more difficult.
Although you may gain some flexibility, I believe it's a better idea to not bloat the markup with unsemantic ul classes and to style the a elements in one fell swoop. And you have no excuse: use the :before and :after pseudo-selectors.
Edit: I have been made aware that some ARIA screen readers treat lists differently than simple anchor tags. If your website is geared towards disabled people, I might consider using the list-based approach.
At this point, I'd keep the <ul><li> elements, reason being that not all browsers support HTML5 tags yet.
For example, I ran into an issue using the <header> tag - Chrome and FF worked like a charm, but Opera borked.
Until all browsers support HTML completely, I'd stick them in, but rely on the old ones for backwards compatibility.
It's up to you really. If you usually used an unordered list to markup your navigation menu, then I'd say continue to do so within the <nav> element. The point of the <nav> element is to identify the navigation of the site to a computer reader for example, so whether you use a list or simply links is immaterial.
No, they are equivalent. Remember, HTML 5 is backwards compatible with HTML 4 lists, so you can feel free to use them in the same regard. The trade off is less code for the 2nd version.
If you are concerned about backwards compatibility with respect to browsers, make sure to include this shim to provide functionality of tags such as <nav> and <article>.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With