HTML and DIV

The div element gives structure and context to any block-level content in a document. Unlike some other structural elements that have very specific connotations attached to them (the p element, for instance), the author is free to give meaning to each particular div element by virtue of the element’s attribute settings and nested content. Each div element becomes a generic block-level container for all content within the required start and end tags.

For years now the div element in web design and website coding has been used mainly as paragraph within a HTML table, where the table was used a container of the over all layout. As age would pass and web developers critiqued the usage of tables as layout container but instead using tables for what their purpose is, listing tabular data, the correct usage of divs slowly started to appear and over took tables and the usage of div’s as layout container is being used more then ever and correctly.

The div element is a block element and it requires a closing tag, unlike the img tag which is a self closing tag.

What makes the div element more sweet to use when creating web layouts is its simplicity and the easy to use. With the use of CSS we can manipulate and position the div element anywhere in our layout so it suits exactly for our needs and performance.

By default the div element will be presented in 100% width screen wide and without padding or margin. With CSS we can give width, height, padding, margin, border, background color/image, in simple words we can do whatever we want with a div element while structuring our website layout, and unlike with tables as once used to be abused basing the structure of our layout in div will require less codes, and this is a great point not only for the semantically correct usage of all elements but as well from a SEO perspective of view where a layout presented with more content and less codes gets some extra love from search engines.

After this informative article on purpose and usage of DIV element in HTML/xHTML we will follow up with a new article on how to control the div element (and other xhtml/html elements) with the usage of CSS. You can subscribe to our RSS feed to follow our HTML tutorial.