The Science of Semantic HTML
Why you should be more descriptive when naming HTML elements
Every programmer at one time or another has gotten themselves caught up in a big bowl of <div> soup. Nesting elements inside each other using nothing but div tags. Sure you could use a <span>, but that still tells us nothing about its content. It might work, but we should strive to be more descriptive rather than work with the efficacy.
Intro to HTML
HTML tells the browser how to render the content. It is not technically a programming language, but rather a markup language to help organize content from the internet. Which each new version of HTML, comes new features to help organize the content a little better. It can also help internet searches to be more refined and of a higher caliber.
The release of HTML4 back in 1999 provided developers with more control over the speed and order of which content was rendered. However, its tags were still riddled with divs and the attributes did not differ from each other like they do now.
Semantic HTML
With the release of HTML5, comes semantic tags and sections that deliver a much more descriptive assessment of what the content really is. Instead of using class names or id’s to differentiate, you can already get a sense of what is going on with the tag name itself.
The definition of semantics, put in very simple terms, is the study of meanings. With Semantic HTML, it means using the correct elements for their correct purpose(meanings) as much as you possibly can. If you need a button, then use the <button> element instead of the dreaded <div> or <span>.
Quite an apt name if I do say so myself!
Accessibility
With more people everyday using the internet, it is not unreasonable to think that more people who are disabled are using it as well. Before the update to Semantic HTML, it was quite difficult for people with disabilities to interact with the internet.
Now, we have screen readers that can read the contents of a page out loud or convert to braille and keyboard-only navigation that can let a user tab between buttons on the keyboard instead of the mouse.
As I have gotten older, I rely more and more upon subtitles when I am watching television or movies. I would be quite disheartened if those subtitles were not accurately depicting what is actually being said on the program. Score one for Semantic HTML.
Maintainability
The ability to come back to a block of code and immediately understand what is happening can be invaluable. Maintainability should be something that is always on the mind while trying to write code.
Semantic HTML can promote maintainability by providing that code recognition with just a quick glance. Much easier to see a <header> or an <article> tag and know it’s content as opposed to a routine <div>. It proves to be way more legible and clear with its’ communication.
When it comes to the styling, if the semantic elements are used diligently there should be no problem directly referencing them in CSS. You can style things quickly, easily and without much thought!
Search Engine Optimization(SEO)
Known as the process of enhancing your website to increase its visibility to search engines, SEO can help a website gain a lot more traction. Complicated algorithms comb through the website and rank it according to the properties it contains. If the algorithm cannot properly read those properties, it might be flagged as inferior or low quality.
Therefore, bumping it way down the series of “O’s” in the Google search list. Nobody wants to be found on the 13th “O”.
For example, Google places priority on websites that accessible. Knock two birds out with one stone by using Semantic HTML to provide accessibility, which in turn gets priority from the search engine.
To sum it up…
Semantic HTML not only makes code much more clear and maintainable, it just makes sense. It is much more inclusive and pays off when it comes to SEO. If it is not a habit of yours already, I would highly suggest making it one.
Thanks for reading and I hope you enjoyed the content. Feel free to check out my other blogs or connect with me on my LinkedIn!
