If you know even a little bit of HTML, then you know about the <div> tag.
Now, <div>s are used for CSS styling, JavaScript functionalities, and ARIA for accessibility. And its versatility makes it easier to throw at everything.
However, with the introduction of so many semantic HTML tags, it is not ideal that we keep using the <div> for everything. We also don't have to stop using <div> tags completely. We simply have to know when to use div and when proper semantic tags.
Div-history
HTML 3.0 introduced div to structure the content or divide it into different kinds of containers, sections, etc.
It was a replacement for people using the <table>tag for structuring their content. And it did the job perfectly.
After the next version of HTML was released(HTML 4.0) the <span> tag became replacement of <center> tag. The <div> tags took over the mantel of structuring data on block level while <span> tags did the same for inline content.
And soon, the problem was clear. We had no proper way to programmatically define the semantics of the elements. WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) was introduced to make the web more accessible to people with disability. But non-semantic tags or elements pose a heavy problem.
New age div
Well, it amounts to nothing. Yep, it does not represent anything. It adapts to anything and everything. Even the official docs say that the use of div should be the last resort.
So let's start by eliminating when not to use <div>s.
<div class="button" onclick=handler()>
Why?
</div>
The above is for a button, and anyone can tell it is a clear misuse of <div>. So anything that has a clear definition in HTML docs and has extensible features readily available should not be recreated using <div>. Ex- Buttons, sections, headers, etc.
<body>
<div class="header">
...
</div>
<div id="main">
...
</div>
<div class="footer">
...
</div>
</body>
The above code is also wrong structurally. We can replace the <div>'s with the appropriate elements or specify ARIA to assign any necessary role, state, and property attributes where necessary (Ex- <div role=main>).
When are div's A-ok to use?
<div>s are fine to use under various circumstances. Such as when we use it as a wrapper for a foreign language. Ex-
<div lang=es>
<h3>...</h3>
<p>...</p>
<ul>
<li>...
<li>...
<li>...
...
</ul>
...
</div>
Instead of using it on every single element, we can wrap all of them with a div and assign the lang attribute to it.
Similarly, we can use the tag freely when using it for styling.
<main>
<div class="intro" style="display: flex; ...">
<div style="flex: ...">
<h1>...</h1>
<!-- sub-heading / meta data could go here -->
</div>
<div class="social_links" style="flex: ...">
<!-- social follow links -->
</div>
</div>
<!-- other semantic elements / content go here -->
</main>
A question would have popped right now. Isn't it bad to use <div>s to structure content?
Yes, it is, however, if the accessibility can be ignored and specifically focus on the styling part then it is okay to use <div>s.
Of course, it is not encouraged and the above example requires important details to be more accessible.
When does using <div>tags go out of hand?
Let's see with an example:
According to the above code by Scott Ohara, there are various ways to implement a paragraph. We can create multiple implicit paragraphs whenever we create a new block of text.
This just shows how using semantic HTML doesn't provide free accessibility. We need to do a little extra effort to make it so.
What to do then?
Use semantic HTML whenever possible, use div as a last resort, and certainly don't fret over which one is better. If we look from an accessibility point of view then we do need to go that extra few meters and make it so regardless of what we are using.
Check out the awesome presentation by Eric Bailey: The intersection of performance and accessibility. and the more detailed blog of Scott Ohara: Div Divsiveness.
Let me know if there is any more information that I should keep in mind!👇🏻
Top comments (0)