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 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 of how to use a div:
<div style="background: #014DA1; color:#FFFFF;">
<strong>This is a div!</strong>
</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.