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.
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
Recommended Books & Training Resources