Understanding the DIV tag

What Is A DIV?

In HTML, the tag <div> stands for division. It is a generic tag, with no default appearance of its own. It was introduced into the language to facilitate the use of Cascading Style Sheets.What DIVs let us do is format blocks of content.

Examine the following HTML:

<div class=  “content”>

<h1>In Ligula </h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque ut mi. Cras ut justo. Maecenas cursus, pede eu
congue sodales, nisi arcu luctus sem, dictum venenatis
nisl orci nec ipsum. In lacus risus, ultrices sit amet,
tincidunt vitae, bibendum et, mauris. </p>

<p>Phasellus libero purus, facilisis sed, rhoncus id, gravida
eget, elit. In tempus, pede non tincidunt blandit, tortor
mi pharetra metus, sit amet scelerisque purus purus vitae
augue. Nunc vel eros. In hac habitasse platea dictumst.
In ligula. Fusce tempor dui eget diam. </p>

<h2>Nunc A Mauris</h2>

<p> Curabitur tincidunt tortor non est. In turpis massa,
molestie quis, faucibus vitae, sodales non, augue. Fusce
venenatis neque sit amet mi. Suspendisse ac dolor sed est
placerat mattis. </p>

<p> Ut tempor. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Nunc a mauris. </p>


This is just such a block of content: an h1, an h2, and some paragraphs.Without DIVs, if I wanted to set a margin on this block, I’d have to put margins on the H1, H2, and P tags.

With DIVs I just need to put a margin on the style #content. What’s more, I can also give the DIV a border, padding, background color, background image, etc.

Moreover, using contextual/descendent selectors I can style h1 material that’s in the content div so that it looks different from h1 material in other parts of the page: .content h1.

A DIV has no semantic connotations. By this I mean that it isn’t a tag that conveys any meaning about its contents. Rather, it is simply a generic box.

On the other hand, a number of HTML5 block-level tags —such as article, section, aside, header, footer, figure & nav — do in fact come with semantic value attached.

Why is this important? Well, remember that HTML is more than something for designers to prettify. It is, more importantly, a meta-language. A meta-language is a language describing language.

Much of these new tags attendant meaning is implicit in their names. So when a search engine sees an article tag, it has a better sense of it being a complete chunk of content.

Similarly, when assistive devices—such as screen reader software for the visually impaired—see nav tags, they have important clues about the purpose of the content contained therein.

In short, if you can use a more specific tag than a DIV, do so, but there are still plenty of uses for DIVs.

For more information on the HTML5 Sectioning Elements, this is a good article from Treehouse.com.


2 thoughts on “Understanding the DIV tag

  1. Pingback: Publishing: Electronic Communications « wrmf.ca

  2. Pingback: Basic CSS Layout: An Introduction to Chinese Film « wrmf.ca

Comments are closed.