Web designers use it nearly every day, but not many actually know what the div tag means and where it should be used. This article aims to de-mystify the div tag, explain when and where it should be used and compare it with the similar span tag.
The Short Answer
div—tag (or element), abbreviation of division. A generic container for blocks of content, such as images and paragraphs of text. Can be uniquely identified by an id to hook into a CSS style sheet.
The Long Answer
div, an abbreviation for ‘division’, is an HTML tag (otherwise known as an element). Used to create containers around groups of content on Web pages, it is usually given a unique id to distinguish it from other div elements on the same page.
Example:
Welcome to our Company!
The above example shows a simple site header, with a logo and introductory heading text. Notice that it is uniquely identified by the id, this is used to format the div using CSS, as shown by the following example.
Example:
#header {
width: 790px;
background-color: #efefef;
}
This will make the header have a width of 790 pixels and with a light grey background colour, view the attached HTML file to see how this code fits into a page. Not the prettiest page in the world, but should get the point across. Right click anywhere on the page and select Source (Opera), View Page Source (Firefox), or the equivalent in your browser of choice, to see the source code for the page.
Handily, elements inside uniquely named div’s can be targetted using CSS. For example we might want to make the header text smaller and indented so it lines up with the text of the logo. The second attached HTML file contains the complete code so far.
Example:
#header h1 {
text-indent: 10px;
font-size: 1.4em;
}
This only formats h1 tags inside the header area, not any other h1 elements on the same page. To format all of them remove the #header. div tags are the building blocks of a page, they are the foundation everything else rests on. We can expand the example above to create a simple, but complete, page using div’s to create the structure.
Example:
Welcome to our Company!
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc rhoncus
ultrices elit. Nullam condimentum ornare tellus. Aliquam tellus est,
fringilla sed, dapibus quis, facilisis non, erat.
Quisque aliquam, mauris vitae tristique ultricies, purus metus porttitor
ante, ac malesuada sem massa sed ipsum. Vivamus sapien. Sed fringilla
hendrerit eros.
A div named content has been added, along with a footer, everything is wrapped in a div named wrapper. This makes it easier to add rules that apply to all the sections of the page, e.g. all elements could be constrained to a width by setting the width of just the wrapper. The complete example page (along with some expanded CSS) is available in the third attached HTML file.
What’s the Difference Between a span and a div ?
The span tag is inline, whilst the div is a block level element. What that means for designers is span tags are used within text, whereas div tags are used to contain blocks of other elements like img or p.
Example:
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
This could be used to replace the first letter of a paragraph with a fancy graphic, once again using CSS. Notice that the tag is embedded in the text.
Looking Ahead to HTML5
In HTML5 div elements are declared too generic, the creators aim to replace them with tags like the following:
section;
The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a header, possibly with a footer.
header;
The header element represents the header of a section.
nav;
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
This is just a small sample of what is to come, don’t get too excited just yet though, browsers (most notably the infamous Internet Explorer) will have to support the new elements before they can be used. This will take a number of years, particularly since the specification is still in the draft stages.
Discussion
To discuss, ask questions or comment on this article please see the Webmaster Sun Forum discussion on How to use Div ?.
