Nav Elements, not just ul wrappers

A great tip shared by Derek Johnson to make my site more accessible

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

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.

Recent posts View all


How to ignore Bullet in RSpec tests

Using Bullet during a test can pick up mistakes but also has false negatives; here is an easy way to ignore them


How we used Nokogiri to fix a sizing issue in YouTube's oEmbed

At some point, one of our calls to YouTube's oEmbed endpoint was returning videos way too small; we fixed in in our Rails application by using Nokogiri