Semantic HTML
This last couple of weeks has all been about semantic HTML and the ability within HTML5 to focus on more readable and more maintainable code - improving SEO reach, improving accessibility, and making your code more consistent.
As a previous student of HTML4 and XHTML 1.0 I remember battling long pages filled with DIVs and SPANs and learning to read blocks of structured yet confusing code where the slightest bracket out of place caused inline havoc!
Delighted to see the big steps forward taken by the W3C in defining new “semantic” rules for elements and tags in HTML5 which make both programmatic navigation and content navigation more intuitive.
Semantic HTML tags provide very precise information to web crawlers/bots like Google to clearly understand which content is crucial, which is a subsidiary, which is given for navigation and many other things. It is imperative to make Google understand what roles the different parts of your web page is playing, and by adding Semantic HTML tags to your pages, you can explain this clearly to the algorithms reading your code.
CSS
Another benefit of making your code more legible and abstracting out common element usage is that it makes it allows for much more powerful, yet easier to implement, CSS functionality - the lipstick and eyeliner of modern website design!
Semantic tags give you a lot of styling options for your content. Maybe now you prefer your content displayed in the default browser style, but a few days later, you may decide to add a grey background and then, you want to define monospaced font family for your samples. You can quickly implement all these things with Semantic HTML markup which can be successfully applied to CSS.
What’s new?
HTML was originally created as a markup language to describe documents on the early internet. As the internet grew and was adopted by more people, its needs changed.
Where the internet was originally intended for sharing scientific documents, now people wanted to share other things as well. Very quickly, people started wanting to make the web look nicer.
Because the web was not initially built to be designed, programmers used different hacks to get things laid out in different ways. Rather than using the <table></table> to describe information using a table, programmers would use them to position other elements on a page.
As the use of visually designed layouts progressed, programmers started to use a generic “non-semantic” tag like <div>. They would often give these elements a class or id attribute to describe their purpose. For example, instead of <header> this was often written as <div class="header">.
As HTML5 is still relatively new, this use of non-semantic elements is still very common on websites today.
Elements such as <header>, <nav>, <section>, <article>, <aside>, and <footer> act more or less like <div> elements. They group other elements together into page sections. However where a <div> tag could contain any type of information, it is easy to identify what sort of information would go in a semantic <header> region.
Thumbs-up for Semantic HTML
Easier to read - as a web programmer you can be reading through hundreds or thousands of lines of code. The easier it is to read and understand that code, the easier it makes your job.
Greater accessibility - Search engines and assistive technologies (like screen readers for users with a sight impairment) are also able to better understand the context and content of your website, meaning a better experience for your users.
Consistency - When creating a header using non-semantic elements, different programmers might write this as <div class="header">, <div id="header">, <div class="head">, or simply <div>. There are so many ways that you can create a header element, and they all depend on the personal preference of the programmer. By creating a standard semantic element, it makes it easier for everyone.
Enjoying the transition from HTML4 to HTML5 and learning the new semantic representations of elements and tags. hasn’t been straightforward but it has been logical. I have not found expression yet where I wished they hadn’t changed it from HTML4 - in every case it seems to me to be a progression.
