HTML DIV- Block Tag

The web page content must be organized to retain users’ attention and focus. We have learnt to organize web page content using paragraphs, headings and tables. It time to use HTML DIV Tag to organize the content. It is also called Division Tag. As the name suggests, it is used to divide a web page into divisions which work as containers of other HTML tags.

HTML DIV tag does not affect the formatting of its contents unless it is stylized using CSS. As such a DIV does not represent anything on the web page. It can be used as a group of HTML elements to apply a common style or formatting. The container defined with DIV can be enhanced with attributes just like all the HTML tags discussed previously.

Features HTML DIV Tag

  • DIV is a paired tag.
  • It is a container tag to create a group of HTML tags and apply same style to all of them.
  • DIV tag can be nested to create a blocked webpage structure to hold different kinds of web page elements  

HTML DIV Tag Attributes

ALIGN

Align attributes is used to align the contents in a block defined with DIV. The values allowed for the ALIGN attribute are LEFT, RIGHT and CENTER. The div tag content will appear LEFT aligned by default.

ID

This attribute is used to give identification to a block with <DIV></DIV> tag. The ID is an alphanumeric string and unique in a webpage.

CLASS

This attribute is used to associate a div element with a class defined in a CSS style sheet at document level.

STYLE

This attribute is used to add inline style to a block. It is given in string with allowed CSS element and value pairs separated by semicolons.

TITLE

Title attribute is used to set tooltip text for a div. When the user rests the mouse cursor on a DIV block a value assigned to TITLE attribute appears in a small outlined box.

Example HTML DIV Tag

<TITLE> Welcome to CSVeda.com </TITLE>
<HTML>
<BODY >
<DIV TITLE="Random text" STYLE="padding:10%; background-color:lightgreen" ALIGN="Justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</DIV>
</BODY>
</HTML>
HTML DIV Tag Example