How To Use The Div Element in HTML5
Since the days we broke free from tables to structure our web designs, one HTML element has been the most useful and widely used. The div HTML element is almost guaranteed to appear in the markup of any website that has been built to separate content from design and to current web standards. But standards move on; and the future is not looking rosy for the div.
Take a look at the draft specification for HTML5 and there is our old friend the div. But wait, what does that say below?
Authors are strongly encouraged to view the
divelement as an element of last resort, for when no other element is suitable. Use of thedivelement instead of more appropriate elements leads to poor accessibility for readers and poor maintainability for authors.
That’s right; you’re being told (more or less) to stop using the div. There are far more semantic elements to choose from when you are marking-up your content. Are you creating a blog post? Use the article element. Are you adding content that is only partially related to your main content? Use the aside tag. The div tag has no meaning at all, which, when authoring a document, is not helpful at all to the reader.
But it’s not the end for the div, as it can still be used to group content. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Types of Markup Language</title>
<link rel="stylesheet" type="text/css" href="did-you-know.css" />
</head>
<body>
<section>
<hgroup>
<h1>HTML</h1>
<h2>Markup for Authoring Web Pages</h2>
</hgroup>
<p>You're reading a page made in HTML right now!</p>
<div class="did-you-know">
<p>HTML was invented by Tim Berners-Lee (among others), who also helped create HTTP and URL's.</p>
<p>Tim Berners-Lee now leads the W3C, an organisation that helps develop web standards.</p>
</div>
</section>
<section>
<hgroup>
<h1>XML</h1>
<h2>Markup for Creating Machine Readable Data</h2>
</hgroup>
<p>RSS feeds are an example of commonly used XML.</p>
</section>
</body>
</html>
The div in this example is used to style a part of the document that explains extra facts directly related to the content of the section. (The content is not appropriate for a blockquote, nor is it digressing enough from the section content to use an aside.)
The HTML5 specification goes quite deeply into “sectioning content”, or how to hierarchically structure your HTML document. I won’t go into it too deeply, but this essentially means a properly sectioned document will break up the document by thematically grouping the content into distinct sections. You can even have more than one h1 element (as many as you need) in one web page.
For properly sectioning content, we can use the section and article elements. If we again look at the HTML5 specification, we find more advice on the div in the section section of the document.
> The `section` element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the `div` element instead.
Let’s look at another example of how we may use a div. Take the markup below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Types of Markup Language</title>
<link rel="stylesheet" type="text/css" href="border.css" />
</head>
<body>
<div class="border">
<section>
<h1>HTML</h1>
<p>HTML was invented by Tim Berners-Lee (among others), who also helped create HTTP and URL's.</p>
</section>
<section>
<h1>XML</h1>
<p>RSS feeds are an example of commonly used XML.</p>
</section>
<section>
<h1>XHTML</h1>
<p>XHTML was created to be more interoperable with other data formats and is more strict in its syntax than HTML.</p>
</section>
</div>
<aside>
<h1>Learn more</h1>
<p>You can learn more about how to script HTML at <a href="http://htmldog.com/">htmldog.com</a>.</p>
</aside>
</body>
</html>
This is a similar example as before, except this time the sections are much shorter. Imagine we want to create a design of the three sections in a single row (probably by floating them to the left and giving them a width) within a border, with an aside in the same row but floated right. The easiest way to achieve this is by wrapping the sections in a div. I would suggest that it would make no sense to a reader if we used another section element, as we just want to style the section of content, rather than group it thematically.
As a general rule, I would suggest to consider using a div element if the section you are wrapping does not have a header (h1, h2 etc.). This is because headers should be used to title thematic groups and introduce a reader to the section of content. If your section of content does not have a sensible header, then it’s probably not a thematic group of content.
(As a quick note, the HTML5 specification is still in its draft stage, so some of this may change in the future.)
Authoring HTML is subjective. In most cases there is no single correct answer. Even the examples I have given here could be marked-up differently and still make sense to a reader, but I hope I have shown you that the div element is still a useful part of HTML that can be used in an effective way to achieve your designs.