HTML <div> division Tag Reference

The div HTML tag means division, and is basically a general-purpose box that takes up the full width of the space it's in.

Use it to wrap distinct sections of your page.

The <div> HTML/xHTML tag

The <div> division tag defines content as 'block-level', which means it will stretch to the full width of its containing element, and any content that follows will be forced onto the next line.

It's valid in all current versions of HTML and xHTML, and it should always have a closing </div> tag.

When to use the <div> tag (semantic use)

The <div> division tag is commonly used in conjunction with the id and class attributes and CSS stylesheets, to achieve the desired high-level page structure, effectively splitting the page up into boxes which can then be styled as you wish.

You could use it to define a logical section of your page, whether visible or invisible, such as <div id="leftcolumn">...</div> or <div class="comment">...</div>.

Generally, every major section on the pages we produce are defined as divs, such as header and footer sections and columns. We'll also use divs for repeated discrete blocks, like screenshots and callout boxes.

Example of <div> tag use

<div id="header" class="compact">

    ...header content goes here

</div>

Alternatives to the <div> tag

You may also consider using:

<span>
For inline content (when the content needs to stay on the same line as the preceding content)