Is it necessary to wrap navigation (ul tag) in div or nav tag?

css, html, navigation

Solution

No, it's certainly not necessary to wrap a `<ul>` navigation with an outer `<div>`. In most of the cases that I have seen, people use it just because they have the habit of wrapping everything up in a `div` (divitis).

However, in some cases, it does become necessary to wrap a `div` around a navigation list. For example, when you want to apply multiple backgrounds - one on the div and the other on ul, controlled - padded/margined - on their own.

An extra div can also be used for structuring your document properly.

As for the html5 `<nav>` tag, think of it as semantically defining that part of your code, so that anyone reading the code - be it human or bot (search bot for example) - can know exactly that the part inside `<nav>` tag is going to be (or at least supposed to be) navigation, no matter whether the navigation then is achieved through `<ul>` or it's just plain ol' simple links separated by the pipe symbol `|`.

Problem

I’ve seen some people wrap their navigation (`<ul>` tag) inside a `<div>`, and the `<div>` just has margin/padding CSS properties applied to it. We can just style the navigation without a `<div>` and put the margin and padding on the `<ul>` tag. So it is necessary to put the `<ul>` tag inside the `<div>`, or is it just personal preference/favor? And for HTML5 which has been implemented in some browsers, is it necessary to put the `<ul`> tag used for navigation in a `<nav>` tag? Like e.g. the Smashing HTML5 demo page.

Original source