In HTML, the div elements are used where parts of a document cannot be semantically described by other HTML elements.
Most HTML elements carry semantic meaning – i.e. the element describes, and can be made to function according to, the type of data contained within. For example, a p element should contain a paragraph of text, while an h1 element should contain the highest-level header of the page; user agents should distinguish them accordingly. However, as div have no innate semantic meaning besides the logical grouping of the content, they can be used to specify non-standard presentation or behaviour without superfluous semantic meaning.
Div elements are used purely to imply a logical grouping of enclosed elements.
When they are labeled with class or id attributes, div elements can denote types of information otherwise indescribable with HTML. For example, <div id="author">John May</div> may be used to indicate the author's name in a document.
There are three main reasons to use div tags with class or id attributes:
- Styling with CSS
- Semantic clarity
- Access from code
The judicious use of div is a vital part of HTML and XHTML markup. However, the overuse of these elements, sometimes called divitis (a common mistake of not only beginners), is itself a minor form of tag soup.
Simple Example with Div Tag
<div style="border:2px solid black">
<p>Content of your site</p>