HTML Div Tags

The div element is a block level element which allows you to add structure to a document. It is used to lay out pages and create separate blocks of content. The div element supports the global attributes, although the common attributes are class, ID and style.

The div element can contain any HTML element (such as table, paragraph, etc.) as well as nested div elements. The div element comes in pairs.

Sponsored Links

Example

The following creates a simple site structure using the div element:

<style type="text/css">

#wrap-cont{width: 450px;margin: 0 auto;}   

#top{background-color: #f00;height: 20px;}

#left{background-color: #ff6a00;width: 100px;height: 80px;float: left}   

#main-content{height: 80px;background-color: #b6ff00;}   

#demo-footer{clear: both;background-color: #000;height: 20px;}   

</style>


<div id="wrap-cont">

<div id="top">  
</div>    

<div id="left">
</div>

<div id="main-content">
</div>

<div id="demo-footer">
</div>

</div>

Output

The div element does not provide any presentation; you use CSS to customise and position your div. Use div elements for laying out a web page.

Span

The span element is similar to the div but for inline content.  It is commonly used to style  text inline.

Example

<div>

<span style="font-family: 'Arabic Typesetting';font-size: medium;color: Blue;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis fringilla enim, ac ornare purus. Ut feugiat velit non erat.
</span>

</div>

Output

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis fringilla enim, ac ornare purus. Ut feugiat velit non erat.