Semantic HTML Elements vs. Non-Semantic HTML Elements — a Quick, Simplified Summary
In your early days learning HTML, you will come across the term semantic HTML elements. The term may seem like something complex to some, but it really isn’t. It is a straightforward term, and in this article, I simplify what it means by comparing it with non-sematic HTML.
Semantic HTML Elements vs. Non-Semantic HTML Elements
The word ‘semantic’ basically means the meaning of words or symbols. Going by this, Semantic HTML Elements are simply HTML Elements with meaning.
Since semantic HTML elements are HTML elements that have meaning, does that make non-semantic HTML elements meaningless? No, it doesn’t.
Think of non-semantic HTML elements as common nouns like the word ‘man’. Then think of semantic HTML elements as proper nouns — people’s names.
If you were trying to come up with a list of 5 men, and your list looks like this:
1. Man
2. Man
3. Man
4. Man
5. Man
It would be confusing or meaningless because there are billions of men in the world.
But if you have a list of 5 people that looks like this:
1. Adam Young
2. David Rosenberg
3. Cristiano Ronaldo
4. Steve Harvey
5. Robert Downey Jr.
This has more meaning. Less than a billion people bear these names, so this list is less confusing.
The same applies to your HTML code. If your HTML code contains only non-semantic HTML elements, you will have something like this:
<!DOCTYPE html><html lang=”en”>
<head><meta charset=”UTF-8"><meta http-equiv=”X-UA-Compatible” content=”IE=edge”><meta name=”viewport” content=”width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><div></div><div></div><div></div><div></div><div></div></body>
</html>
If I keep using div to represent block-level elements in the code block above, it would start losing meaning as the code gets larger. Every block-level element will look the same even though they represent different things. Consequently, whoever is reading the code may be unable to readily tell the roles of each element apart.
On the flip side, if I used semantic elements for the same code block, it would look like this:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><nav></nav><main></main><section></section><article></article><blockquote></blockquote></body>
</html>
In this code block, we have the same number of block-level elements as the non-semantic code block. However, unlike the non-semantic code block, anyone reading the code can readily tell what each element represents.
Conclusion
Semantic elements are more precise than non-semantic elements. They represent specific types of HTML contents, and this makes them more meaningful to whoever is reading the HTML code.
