For normal content, a list does not need be enclosed inside a DIV element, since a list is a block-level element. In a previous example there was a normal list and then a list which had the class of tall associated with it ... there might be normal lists and then you might need some specially-formatted lists styled with specific properties, like the tall class. The class is simply attached to the UL or OL tag. This is appropriate for "normal" lists within the 'normal' content of a document.
But when you start containing specific layout areas like a navigation bar or a side bar, then it makes sense to wrap these special areas in a specific DIV element.
The obvious advantage to enclosing special content within a DIV element is that the unique content can then be styled differently from other areas in a document ... a contextual approach.
IDs versus Classes
A quick review of guidelines for using IDs and classes ... a class is used when a set of style declarations will be applied to multiple elements in a single document, and an ID may only be assigned to a single element within a single document. IDs are used to identify unique and specific elements in a document.
If you need to apply styling to multiple instances of a list... as in the "tall" definition within the normal flow, it should be defined as a class.
For specialty areas like navigation bars or side bars, these specialty areas should be defined with an ID as there will only be one top navigation bar and one right sidebar, for example.
We also do this also because an ID has a higher priority than does a class.
This allows you complete control over a specific area of content:
div#sideBar {
color: green;
border: 1px solid green;
margin-left: 3em;
}
div#sideBar ul li {
color: red;
}
A paragraph in the DIV which will be green.
- The list items will be red.
- This DIV is styled differently from the main document..
- The rest of the document does not adhere to the contextual styling of this specialty DIV (and the styled LI elements).
If this were a sidebar, then our sidebar would look different from the main document because it it is contained within a DIV with an ID.
For the following pages I will include a border for the DIV elements to illustrate the display of a specialty list within a DIV. This is a good debugging technique, but of course the border is normally removed when we are ready to deploy the web page.
Summary
DIV elements will be defined for specific areas of our page layout. DIVs allow us to style unique content for specific areas. A DIV for a horizontal navigation bar at the top can be styled independently of a sidebar navigation area... styles for a context.
Lists within a DIV can be styled to accomplish the goal of creating a menu interface.