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.
