Search within TutorialsPark

HTML Div Element


Div element is used to create structure and give meaning to HTML elements.


Block and Inline

BLOCK: Block level elements appear as a block i.e they appear on new line every time forcing line breaks.

Eg: <h1>, <ol>, <table>, <p>, <div> etc.

INLINE: Inline elements appear immediately near any content and do not start on new line.

Eg: <b>, <em>, <img>, <a> etc.


What is Div Element?.

1. The Div element does not have a specific usage or meaning,they are used to group related objects together(like text, graphic etc).

2. Formatting can be applied to the Div element using the attributes class,id and CSS style rules, all objects within a Div inherits its properties.

Syntax of Div Element.

Note- The Div element is a high level element and should be used to contain other low level elements (paragraphs, scripts etc ).


Div Element: id and class attribute.

1.The id attribute is used to assign a unique identifier to each div element.It can be used only once per page to identify a single element.

2.The id attribute is generally used while applying CSS style rules to Div blocks , also it may be used by Javascript while working with Div element.

3.Similar to id attribute a class attribute is used to categorize or classify elements.But unlike id attribute you can make any no of classes.

Give it a TRY! » Note- An element may have both id and class attribute at the same time.


Layout using Div element .

1.Below is a layout using div elements only, it has six(6) div elements Box, head,left-menu,text, right-bar and foot.

2.Also, we made some basic use of CSS properties like float, align etc

Example:Creating layouts using Div elements.

Give it a TRY! »


Span Element.

1.The span element like div element has no meaning of its own,its usually used with some attributes like id,class.

2.Usually used to contain a section of text to differentiate it from the surrounding text,mostly inline elements.

Example:A Basic demo of Span Element

Give it a TRY! » Note: Div is a semantic container while span is for phrases and text.



Related Examples

Related Tags