The <div> tag is the most versatile and widely used HTML element. The <div> itself does not represent anything, but at the same time, it allows developers to turn it into almost anything. This is done through the use of CSS (for styling), JavaScript (for functionality) and ARIA (for making content accessible).
This versatility allows <div> tags to be used for many different purposes, but unfortunately, this permissiveness can easily lead to abuse. When the <div> tag isn’t used sparingly, the result can be <div> soup, content lacking semantic meaning, interactive elements that aren’t accessible, or some combination of these bad things.
Gross violations when using <div> are relatively easy to detect (more on this below). But we’ve gotten to the point where one might call a “content inaccessibility pattern” a completely correct use of a <div>, or at least an example of a slight deviation from the correctness. In such situations, they say that “someone should use a semantic HTML element instead of <div>“.
What is a Div?
The <div> element (from the English division – section, section) is a universal block element and is intended for grouping document elements in order to change the appearance of the content through styles. To do this, add the class or id attribute with the name of the class or identifier.
As with other block-level elements, the content of the <div> always starts on a new line, followed by a line break.
What is Divitis?
Divitis refers to the over-use of the div tag for purposes other than dividing a page into meaningful sections. These include:
- wrapping elements in a div in order to insert class and/or id attributes for styling with CSS
- manipulating page structure to accomplish specific visual goals
- using a div tag to mark-up items that don’t seem to match any other HTML element
The end result is a document full of nested div tags reminiscent of the old method of nesting tables.
This practice stems from a misunderstanding of the purpose of the div tag. Many web designers seem to think of it as an all-purpose tag. They use it to solve display problems and accomplish specific visual goals. This sometimes occurs because of a lack of understanding of HTML and CSS selectors.
An obvious example of incorrect use of <div>
The most common example of how not to use <div> is when using this element to create interactive content like “links” or “buttons”: Click me!
<div class=button onclick=foo()> Click me! </div>Without delving into special details (you can read the article about role=button on MDN), I can say that <div> is, by its nature, not an interactive element. Styling alone is not capable of turning a <div>, for example, into a button. Even adding a click event handler does not allow you to meet all the conditions necessary to recreate an available button.
But someone can go all out, creating their own div-button element and equipping it with full-fledged keyboard support mechanisms. Such an element can represent itself as a button and in various states characteristic of buttons (a button can be, for example, disabled, pressed, expanded). Its creator can also work on making it function well in Windows high contrast mode. If someone really decides to do all this, we wish him good luck. But all this will require much more effort than using the standard <button> element. However, if you make a div-button well, then there will be nothing completely incompatible with life. Really?
Element <div> and incorrect description of the document structure
Now, if we talk about structural content containers, you can quickly determine whether a <div> is used instead of a more semantic element by looking at the visual representation of such an element. Another way is to analyze the HTML code, class names, or IDs used for elements (if only more or less understandable names are used for all this): … …
<body>
<div class=header>
...
</div>
<div id=main>
...
</div>
<div class=footer>
</div>
</body> Although this example is extremely simplified, there are sites created these days whose markup resembles the above code. Examples of incorrect use of <div> have been described above, which are easy to find and fix. This can be done by replacing the <div> elements with other, more appropriate elements (like ). You can, if necessary, use ARIA to assign role, state, aria-* attributes to elements (for example — <div role=main>).
How to Avoid it
There are a number of coding strategies you can use to cut down on extra divs:
- Make full use of available HTML tags. Think about the semantics of the document you are designing. What is that navigation menu? It’s a list, so mark it up as one. What is that bit of instruction text? It’s not really a paragraph but that’s the closest HTML tag available. It’s definitely not a division. (For more help on understanding semantic mark-up try Andy Clarke’s Transcending CSS).
- Consider whether a container div is really necessary. In some cases we add a div out of habit, or an assumption that it is needed to access the inner contents using CSS.
- Make full use of CSS selectors. You don’t always need a containing div with a speicfic class or ID in order to apply CSS effects to certain elements.
- Reconsider your browser support standards. It may not be necessary for your design to look exactly the same in every browser. Consider building in extras for browsers that support them rather than using hacky work-arounds (and extra divs), to get the look you want. This is the principle of progressive enhancement Is it really necessary to add that container div so everything lines up perfectly in Internet Explorer 6? Perhaps not.
- Reconsider your design choices. This is a tough one but it’s worth thinking about. Is it worth creating a long-term maintenance mess to get a specific look?
Examples. <Div> elements that are fine
Let’s analyze a couple of examples of perfectly acceptable use of <div>.
To begin with, let there be a set of paragraphs or other elements containing text in a language that differs from the main language of the document (web page). Here<div> can be used with the lang attribute containing the appropriate language tag. In this <div>, you can include all the content in another language, this will indicate that this language is used in the document quite deliberately.
<div lang=fr>
<h3><font color="#3AC1EF">▍...</font></h3>
<p>...</p>
<ul>
<li>...
<li>...
<li>...
...
</ul>
... </div>Here, applying a <div> container with the lang attribute is much easier than applying this attribute to every element included in this container. In addition, if we proceed from the assumption that this content is something special, used only on a specific page, it turns out that the use of <div> is permissible here without any questions. We will come back to this a little later…
The next example, where there are no problems in using <div>, is structuring the content for styling purposes:
<main>
<div style="display: flex; ...">
<div style="flex: ...">
<h1>...</h1>
<!-- sub-heading / meta data could go here -->
</div>
<div style="flex: ...">
<!-- social follow links -->
</div>
</div>
<!-- other semantic elements / content go here -->
</main>Here <div> elements are used as containers for <h1> elements and other content available in the initial part of the article and preceding its main part. Here, a flex layout is used to place the content (to simplify the example, style attributes are applied here).
Here you may think that this is not such a good example, since the use of <div> for structuring content is, it seems, not very correct. Maybe it would be worth using more available elements here?
In some cases, these remarks make sense. As already mentioned, the <div> element is often used incorrectly, so anyone who looks at the previous example may quite naturally have similar thoughts. But in order to fully evaluate these examples, we need a more complete understanding of the context in which the corresponding code is used. All of this, in the end, is tied to the availability of content.
New developments in HTML 5
First, let’s look at the tags that are used first, in other words, the main ones:
- <header> — This tag sets the top of the site, or header. It may include a menu, logo, and other elements that are used at the top of the site.
- <section> — This tag is set for important sections of the site, such as articles, or important points you want to highlight.
- <article> — Usually this tag contains a variety of entries on the site, news, documents. For example blog posts.
- <aside> — is set for the side columns of the site (Sitbar). It doesn’t matter where it will be located on the left or right.
- <footer> — this tag should include the bottom of your site (footer)
- <hgroup> — This tag includes groups of site headers, such as <h2>.
- <nav> — this tag includes all navigation on the site (menu).
I would like to say that all of these tags must be closed, for example if it is tag
it must have a closing tag </article> and so on.
Of course not only tags in HTML5 have changed, but roughly speaking doctype has changed abruptly. This is what it looks like in HTML4:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">And here’s what it looks like in the new way:
<!doctype html>Layout (new)
Before we start the layout, between the tags <head> и </head> you need to insert a simple code for IE, as this “super” browser does not understand the new tags:
<!--[ifIE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->Also, be sure to make all the new tags block. Just add this code anywhere in your CSS file:
footer, nav, header, section, aside {display: block}New developments in CSS 3
In CSS 3, many new types of selectors are available. As mentioned above, making full use of CSS selectors will reduce the need for extra divs. CSS 3 selectors include:
- Attribute selectors – select based on an element’s attributes; includes the ability to match whole or partial words (e.g. attribute value starts with a given string).
- Psudo-classes – in addition to the :link, :visited, :hover etc. pseudo-classes provided for links, CSS 3 defines a whole slew of other types of pseudo-classes. For example:
- :first-child (the first child element)
- :nth-child() (enables you do do a calculation to find every n elements in a series, or use keywords to find “even” and “odd” elements )
- Pseudo-elements – these allow you to target pieces of content that aren’t defined by their own structural mark-up. This differs from pseudo-classes, in that pseudo-classes target existing structural elements defined in the HTML code. Pseudo-elements in CSS 3 include:
- ::first-line (the first line)
- :: first letter (the first letter)With these elements you can probably imagine creating effects traditionally seen in printed books or magazines.
- Combinators – these are ways of combining selectors to target particular examples. They include:
- Child combinators, separated by > (e.g. body > p finds any paragraphs that are immediate children of the <body> tag)
- Adjacent sibling, separated by + (e.g. h2 + p finds any paragraphs that immediately follow an h2 tag)
- General sibling, separated by ~ (e.g. h2 ~ p finds any paragraphs that are siblings of an h2 tag)
Many of these are currently quite well supported, and can often be used instead of adding additional structural mark-up.
For a simplified explanation of CSS3 selectors, try 456 Berea Street’s CSS 3 Selectors Explained. To find out which browsers support a particular selector, check When can I use…. For general information and updates on CSS 3, visit CSS3.info.
