This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović
Did you know that there are 112 elements in HTML?!
<div id="appRoot">
<div>
<div>
<div>
<div class="heading">Heading</div>
<div class="content">
<div>
<div>
<div class="list">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>The markup above is something I see a lot on websites I audit professionally or when I just look under the hood of a website because I’m curious to see how it’s structured. The div is by far the most popular element, which is absolutely fine, but it's often being used in favor of other elements that would fit better. This overuse is nothing new, but the rise of JavaScript (JS) frameworks has amplified it.
It would be a bit too easy to only blame JS frameworks, there are several reasons we use divs so much:
- Poor knowledge of HTML elements
- Lack of understanding why
- Insufficient CSS skills
- Default styles
- JS frameworks
- We don't care enough about the page
- Some elements are hard to style
Poor knowledge of HTML elements
It's hard to use something you don't know exists. As someone who teaches HTML, I know that universities don't put enough emphasis on teaching semantic HTML. They teach syntax, basic structure and the ~20 most important elements and attributes, and that's pretty much it.
Did you know that there are 112 elements in HTML? Paul Foster built this fantastic HTML memory test. Try it, you'll be surprised how much you don't remember and know. (Heads up: His test lists 115 elements because it includes svg, math, and the deprecated rb element.)
See the Pen HTML Tags Memory Test by Paul (@plfstr) on CodePen.
Lack of understanding why
Having spoken with many developers at workshops, meetups, and conferences, I believe that most know that semantic HTML is important, but only a few know why.
For accessibility! Duh!
Of course, for accessibility, but most people don't know why you need a sound document outline or landmarks, or what the advantages of a button button over a div button are. If I don't know which consequences my choices have on users, why would I bother using anything else but the div?
JS frameworks
Some JavaScript frameworks require that you wrap components in a single element. If no semantic element fits, devs use the div. I believe they got used to the div so much that they began using it all the time. It's common to see invalid code like this:
<ul>
<div>
<li>Item 1</li>
<li>Item 2</li>
</div>
</ul>The number of wrapper divs can be reduced, though, because most frameworks don't require you anymore to wrap your components in HTML elements. React supports fragments, wrapper elements that don't add extra nodes to the DOM, and Vue supports multi-root components in version 3.
Insufficient CSS skills
A pattern I've noticed among students who start my beginner HTML and CSS course with previous knowledge of HTML is that they wrap almost everything in a div. When I ask them why, they usually say that they're adding them in case they might need them later. I know CSS pretty well and usually when I look at a design, I can tell if I will need extra elements for styling. Even if I miss something, it's much better to add some divs later than wrapping everything preemptively. Pro tip: Start with pen and paper and sketch out the structure of your site before you write a line of code. I usually use a combination of drawing boxes and writing Emmet pseudo code. If you make mistakes, you're making them on paper, which is easier to fix than changing actual code later.
By the way, you can get pretty far without using a single div. Just take a look at the source code of Erik’s website.
Default styles
divs are so much easier to style than buttons.
That might have been true in the past, but it's not anymore. Here's what you need to remove the default styles of a button.
button {
all: initial;
}If you want to reset everything, but inherit font styling, you need 2 more lines.
button {
all: initial;
font: inherit;
color: inherit;
}We don't care enough about the page
Many devs don't build pages anymore, they build components. I do that, too, because it makes sense as soon as your site reaches a certain level of complexity. Also, frameworks and pattern libraries think in terms of components which kind of forces you to do that, too.
The problem with working on small pieces is that it's easy to ignore the big picture. We can conceive, design, and develop components, but the end results for users is usually a whole page. A component with 2 or 3 divs might not look bad, but if I nest it in 5 other components, I might end up with 15 divs that don't do anything but increase complexity and file size.
Some elements are hard to style
Yes, some elements are hard to style. To make our designers or customers happy, we don't use the default select element, but we write a complex component that consists of a bunch of divs with aria roles and a lot of JS. Sometimes have to do that, but sometimes it's better to just live with the fact that you can't style option elements and use the native component that comes with all the functionality and accessibility by default.
So?! What's the point of this post?
Honestly, I don’t know. I started writing and here we are. I guess I just needed to get these thoughts out of my head. If there’s one thing you can take away from this post, it’s that while HTML might not be the most complex frontend language, it’s the most important language with the biggest impact on users. Learning how to write HTML is not as hard as learning to write JavaScript, but learning how to write it in a way that it best possibly benefits users also takes time. The least we can do is to familiarize ourselves properly with the elements and attributes it provides us with.
This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2021-09-02T12:38:54+00:00) Element diversity. Retrieved from https://www.scien.cx/2021/09/02/element-diversity/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.