Nav Elements, not just ul wrappers

In a recent tweet my good buddy Derek Johnson pointed out an example of nav element usage that I could apply to my homepage.

@tosbourn - Check the last example for <nav> at https://html.spec.whatwg.org/multipage/sections.html#the-nav-element. I was thinking your home page is a good candidate for that.
Derek Johnson (@derekjohnson) September 12, 2014

To quote the article;

A nav element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose

I had never considered this use case before, it makes perfect sense!

I don’t want to speak on behalf of all developers (the time will come when I will, don’t worry) but personally speaking I have been following the letter of most of the HTML5 element’s specs but not really the spirit of them. I have learned one or two uses for each one and stuck rigidly to those.

When I think of the nav element I almost immediately think of the collection of unordered links at the top of my site. This is thinking visually about markup and it is short sighted.

The way I should be thinking is with the information, I should be asking what information am I conveying and what is the appropriate way to represent that information. It shouldn’t matter if that information is at the top of my page or in the middle of an article.

If I had thought like that from the start my homepage would never have been a paragraph element, I wasn’t conveying a paragraph of text, I was conveying links in long form.

I can hear some say, but Toby, who cares, the paragraph element works for a block of text just fine.

So does a div element, doesn’t mean you should start using them instead of p elements.

Semantics are important, they are what tells machines (browsers/screen readers/website scrapers/etc) how to interpret the data you have presented them with.

Thanks so much to Derek for showing me this.