Understanding Semantic HTML
Before we learn what exactly is Semantic HTML. Let us understand what exactly does semantic and HTML means to get a clear picture in understanding Semantic HTML?
Semantic means the study of relationships between words and how we construct meaning from those words. In Programming, Semantics refers to the meaning of a piece of code — for example “what effect does running that line of JavaScript have and HTML stands for HyperText Markup Language. So Semantic HTML helps to understand for what specific purpose any tag has been used. for example <p> tag is semantic and presentational because people know what paragraphs are and browsers know how to display them.
But why do we need Semantic HTML?
With HTML and a tool to render it (perhaps web browser software, perhaps another user agent), one can create and present a page that lists items for sale. The HTML of this catalogue page can make simple, document-level assertions such as “this document’s title are ‘Widget Superstore’”, but there is no capability within the HTML itself to assert unambiguously that, for example, item number X586172 is an Acme Gizmo with a retail price of €199, or that it is a consumer product. Rather, HTML can only say that the span of text “X586172” is something that should be positioned near “Acme Gizmo” and “€199”, etc. There is no way to say “this is a catalogue” or even to establish that “Acme Gizmo” is a kind of title or that “€199” is a price. There is also no way to express that these pieces of information are bound together in describing a discrete item, distinct from other items perhaps listed on the page.
According to the W3C: “A semantic Web allows data to be shared and reused across applications, enterprises, and communities.” We need Semantic HTML in our code mainly because :
- Search engines will consider its contents as important keywords to influence the page’s search rankings
- Screen readers can use it as a signpost to help visually impaired users navigate a page thus Semantic HTML makes it highly accessible.
- Finding blocks of meaningful code is significantly easier than searching through endless
divs with or without semantic or namespaced classes - Suggests to the developer the type of data that will be populated
- Semantic naming mirrors proper custom element/component naming
How to write Semantic HTML?
One needs to understand the difference between semantic and non-semantic tags before writing Semantic HTML.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.
Many semantic tags come from the analysis of web page markup completed by companies like Google and Opera. What these companies have found is that many websites use id and class attributes to hint at the meaning of the contents of non-semantic elements.
For example, they found lots of divs that looked like this: <div id="nav">, <div id="header">, and <div id="footer">. Findings like these helped the W3C identify and target new semantic tags to include in HTML5 such as: nav, header, footer, article, and aside. We can group the most common and important semantic elements into four categories:
- Document structure tags
- Textual meaning tags
- Media type tags
- Correlation tags
This blog is mainly about the introduction of Semantic HTML. In the next blog, I will walk you through these categories of Semantic elements and how we can use it in our application. Let me know in comments if you have any doubts or suggestions. You can also reach out to me here. Do give it a clap if you like the blog :)
Resources:
