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

Question

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.

Answer 1

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 |.

Answer 2

If you’re producing HTML5, and you don’t mind working around Internet Explorer’s lack of support for the new elements in HTML5, then you should wrap your navigation in a <nav> element.

(Just like you should wrap your paragraphs in a <p> element — that’s what markup is, describing content by wrapping it with tags.)

As for wrapping your navigation list in a <div>, you don’t have to, but it’s often useful for styling purposes.