HTML Div Element

Friday, March 2, 2012

The <div> element is basically used as a container for other elements. When HTML first began, web designers only had two choices with regard to the layout of a webpage. The web designer either used tables or frames to create structure on a page. The div element provides a third option. The div is the best option since this element can contain every just about every other type of html element. For those who learned how to use tables first, the div may be a little more challenging to use. However, if you are new to both divs and tables, using divs will be easier to learn and use mainly because of the flexibility especially when considering styling. Here is an example on how to use a div.

<div style="background: #014DA1; color:#FFFFF;">
 <strong>This is a div!</strong>

This is a div!

Some things to quickly note about the div element. As this is a block-level tag, most browsers will add extra spaces before and after the element, similar to the paragraph element. When possible, use divs instead of tables. Divs load more quickly in browsers, are more flexible with regard to styling.  They are also more SEO friendly so web crawlers can work well with the content within a div. Also, keep in mind that the div element is not a replacement for the paragraph element. Divs are not used for creating paragraphs. They are mainly used to create section within a document.  The div element is also supported in HTML 5.

Div Attributes

The div element supports standard attributes, such as class, id, style, title, dir, and lang. Anything else related to styling should be handled by CSS. We will be covering styling techniques for the div element in the CSS series of articles. You can practice your HTML skills by using our online HTML Editor.

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

HTML CSS and JavaScript Editor HTML CSS: The Complete Reference Creating Web Pages Simplified