Are you a professional web developer, or are you a web development student? Regardless of your status, if the concept of HTML Semantics coding is new to you, then this article will help you understand it.
What HTML Semantics is
To help you put what HTML Semantics is in perspective, let me first of all explain what the world Semantics mean.
Semantics simply means the branch of linguistics and logic that focuses in meaning, either of a word or phrase.
With regards to web development however, HTML Semantics refers to the meaning of an HTML element/tag which is used to markup a page content.
Am I speaking too much grammar? Alright, lets learn with examples.
See also: Parsing HTML in Bash
HTML Semantics Examples.
Example 1: Page Layout3
If you look at this web page, you will notice that it is made up of 2 sections. The 1st section is the left section where you are reading this article content from. The 2nd section is the right section that contains links to other articles in this blog.
Now, as a web developer, you can create these 2 sections using the
<div> tag. You can also create it using the
<table> tag. And it will appear exactly the way it does here, or sometimes even better.
However, if you do, your coding will not be Semantically correct. Because both the
<div> tag and the
<table> tag is not meant for marking up sections.
So, for your coding to the HTML Semantically complaint, you need to use the
<section> tag or the
<aside> tags instead.
Example 2: Assigning Headers
You will notice that the Example 2 and Example 1 have the same font size, which is slightly smaller than the HTML Semantic Examples header above.
Most, web developer will achieve this by wrapping these headers in a
<font> tag and using the
size attribute to specify the size.
Or they can also do it using the
<div> tag and then using CSS to style it.
Well, if you do it that way, it might still appear the same. However, it will not be Semantically correct.
The HTML Semantically correct way to do it is by using the <h2> tag for the HTML Semantic Examples line, and then the <h3> tag for both the Example 1: Page Layout and Example 2: Assigning Headers line.
See also: Dark Mode for HTML Form Controls
Why HTML Semantics is important.
Reason 1: Access to your Webpage
As you may have noticed from the 2 examples above, whether your code is HTML Semantically correct or not, it might appear the exact way you want it to.
However, when you are building a webpage that will be available to the public, you should know that not only those that can see (the sighted) will have access to it. Visually impaired or blind people might also have access to it.
In this case, these visually impaired people will not be using the traditional web browser you are using. They will be using a web browser that has the ability to read the content of the webpage to them.
So, if your HTML is not semantically correct, these special browser will have difficulty knowing which of webpage content is more important and which is less important. Which they should read first, which they should read second and so on.
See also: What Are HTML Entities
Reason 2: It Improve Search Engine Ranking
Believe it or not, but the fact is, there is no web search engine company that employs someone or a group of people that will read through webpages before they are added to their search engine index/database. This job is done by a robot.
If you do not utilize HTML Semantics while creating your webpage, search engine robots/crawler will have difficulty understanding the content of the page, which will lead to poor search engine ranking (SEO).
Thus, the exposure your website or webpage will get will be limited.
Reason 3: Site Maintenance
If you create a webpage that is HTML Semantically complaint, it will make it much easier, if in the future either yourself or another web developer have to conduct maintenance on the site.
This is because, the person conducting the maintenance will not have to be constantly switching between the code view and the display view before they will understand what a line of code is meant for.
How to Code HTML that is Semantically Correct.
In HTML5 which is the current version of HTML as of when am writing this article, there is an HTML tag for virtually every content you want to put in a webpage.
This does not mean you have to go back to school to learn all the HTML5 tag that is in existence. No. That is not what being a good web developer entails.
Rather, while coding, if you are unsure about whether a tag you are about to use for a web content is meant for that purpose, then look it up on your favourite search engine. When you do, you will see the appropriate tag for the content you are about to markup using HTML.
HTML Semantics is not an HTML element, tag or attribute. Rather, it is a coding principle or practice which ensures that both humans and machines will be able to read your HTML document (webpage), without the purpose of the page contents being misinterpreted.
Do you find this article helpful? Your Friend might too. So, please Share it with them using the Share button above.
Will you like to get notified when I post new updates? Then Follow me on any of my social media handles: Google News, Telegram, WhatsApp, Twitter, Facebook, Pinterest.
You can also drop your email address below if you wish to be notified by mail.