Andrea's Blogger Templates

One element that can help add structure to a document is the  div element. Many people mistakenly believe that a div element has no semantic meaning. However, div actually stands for division and provides a way of dividing a document  into meaningful areas. So by wrapping your main content area in a div and giving it a class of content, you are adding structure and meaning to your document.

To keep unnecessary markup to a minimum, you should only use a  div element if there is no existing element that will do the job. For instance, if you are using a list for your main navigation, there is no need to wrap it in a div.

It is often difficult to decide if an element should have an ID or class name. As a general rule, classes should be applied to conceptually similar items that could appear in multiple places on the same page, whereas IDs should be applied to unique elements. However, you then get into a debate about which elements are conceptually similar and which elements are unique.

For instance, imagine you have a site that contains primary navigation in the header, page-based navigation at the bottom of the search results page, and tertiary navigation in the footer. Do you give each of these a separate ID like main-nav, page-nav, and footer-nav, or do you give them all a class of nav and style them based on their position in the document? I used to prefer the former approach, as it felt slightly more targeted. However, it comes with its own set of problems. What happens if I decide that I now need search results navigation at the top and the bottom of the search page or that I need two levels of navigation in the footer?

When naming your IDs and classes, it is important that you keep the names as “unpresentational” as possible. For instance, if you want all of your form notification messages to be red, you could give them a class of red. This is fine as long as there are no other red elements on the page. However, say you wanted to style required form labels red as well. You are now forced to guess to which element that class could refer, and things are already starting to get confusing. Imagine how confusing the code could become if you used presentational elements across the whole site? This gets even more complicated if you decide to change the presentation of your form notifications from red to yellow. Now, you either have to go back and change all your class names, or you have an element called red that looks yellow.

Meaningful elements provide an excellent foundation, but the list of available elements isn’t exhaustive. HTML 4 was created as a simple document markup language rather than an interface language. Because of this, dedicated elements for things such as content areas or navigation bars just don’t exist. You could create your own elements using XML, but for reasons too complicated to go into, it’s not very practical.

HTML 5 hopes to solve some of these problems by providing developers with a richer set of elements to work with. These include structural elements like header, nav, article, section, and footer as well as well as new UI features like data inputs and the menu element. In preparation for HTML 5, many developers have started adopting these as naming conventions for their ID and class names.

Meaningful markup provides the developer with several important benefits. Meaningful pages are much easier to work with than presentational ones. For example, say you need to change a quotation on a page. If the quotation is marked up correctly, it is easy to scan through the code until you find the first blockquote element. However, if the quotation is just another paragraph element, it will be a lot harder to find. For a more complicated, but no less realistic example, say that you needed to add an extra column to your homepage. You could simply drop the content in at the right point and then update the widths in your CSS. To do the same in a table-based layout you’d need to add an extra column in your table, change the colspan settings, alter the widths on all the cells, and change the widths of all your shim gifs. In effect, you’d have to change the entire structure of your page to accommodate this simple change.

The early Web was little more than a series of interlinked research documents using HTML to add basic formatting and structure. However, as the World Wide Web gained in popularity, HTML started being used for presentational purposes. Instead of using heading elements for page headlines, people would use a combination of font and bold tags to create the visual effect they wanted. Tables got co-opted as a layout tool rather than a way of displaying data, and people would use blockquote to add whitespace rather than to indicate quotations. Very quickly, the Web lost its meaning and became a jumble of font and table tags. Web designers came up with a name for this kind of markup; they called it tag soup (see Figure below).