A Detailed Guide on HTML Semantics
By Mohit Joshi, Community Contributor - April 25, 2023
Developers are now shifting to rapid-paced web development and often ignore that their HTML code is lagging behind due to less usability of semantic HTML. The standard HTML syntax may result in an exact-looking webpage, but it also severely degrades other aspects, such as your website’s search engine ranking, cross-platform compatibility, and more. Let’s examine and comprehend HTML semantic syntax in this tutorial in order to better understand how it may help your website be more widely accessible worldwide.
Read More: How to build a website using HTML and CSS
What does Semantic in HTML mean?
When constructing an HTML script, the term “semantic” refers to the meaning of the text. Semantics, to put it simply, is the use of HTML tags that accurately reflect the content they contain. For instance, using the <div> tag doesn’t suggest the content it will carry, however using the <p> tag suggests it can be used to hold paragraph information.
The purpose of using semantic tags in HTML is to organize your script based on the meaning of the HTML element rather than how it looks. Additionally, using semantic tags could provide a non-technical individual with enough information to understand why a piece of content was placed where it was.
Why write semantic HTML?
Maintaining the organization and architecture of the webpage is made easier by using semantic HTML. In exchange, this provides a number of advantages, including SEO, Accessibility, Compatibility, and Code maintainability. Let’s clarify each benefit in detail.
1. Search Engine Optimisation (SEO): HTML semantic elements are now included in Google’s algorithms. Because search engines utilize HTML to decipher the content and goal of a webpage, its placement of semantic keywords has an impact on the webpage’s ranking.
2. Accessibility: What good is your content if it can’t be accessed by everyone? It is easier for persons with disabilities to navigate your website if you have appropriately laid up a foundation of semantic HTML. Additionally, adding ARIA (Accessible Rich Internet Applications) features may help move the goal of integrating users of assistive technology (AT) forward by leveraging Semantics to make clear the structure of a web application.
3. Browser Compatibility: HTML semantic tags also make sure that your code can be integrated with future technologies. Additionally, because each browser interacts with semantic elements differently, semantic elements make it simple to utilize larger coverage of your website across platforms.
Types of HTML Semantic Tags
You might have come across websites that have their HTML like <div id=”footer”> to denote different parts of the webpage, however, semantics keep the task handy and straightforward.
Some of the most commonly used semantic HTML tags include
- <header> – define the header of a document or a section
- <nav> – define a section of navigation links
- <main> – define the main content of a document
- <section> – group related content together
- <article> – define an independent, self-contained piece of content
- <aside> – define content that is tangentially related to the surrounding content
- <footer> – define the footer of document
- <figure> – group multimedia content with a caption
- <figcaption> – provide a caption or description for multimedia content
- <time> – define a date or time.
Read More: How to test HTML code in a browser
Difference between HTML Syntax and Semantics
Semantic elements are simpler to read and comprehend, even if you have some technical knowledge. Additionally, it makes use of assistive technologies and search engine ranking factors.
Now, let’s compare between normal HTML syntax and syntax that includes semantic HTML elements. In this example, we shall create a basic website with a header, a navbar, a body of some text, and a footer.
<!DOCTYPE html> <html> <title>Online HTML Editor</title> <head> </head> <body> <div class="header"> <div class="logo"> <img src="logo.png" alt="Company Logo"> </div> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </div> <div class="main"> <div>It is a paragraph</div> </div> <div class="footer"> © My website | 2023 </div> </body> </html>
Now, let’s create an HTML script replacing the normal syntax with semantic syntax.
<!DOCTYPE html> <html> <title>Online HTML Editor</title> <head> </head> <body> <header> <div class="logo"> <img src="logo.png" alt="Company Logo"></div> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> <section> <p>It is a paragraph</p> </section> <footer> © My website | 2023 </footer> </body> </html>
As you can see, the output is unchanged, but the hidden advantages will affect the website’s expansion. The semantic syntax is easier to read and understand.
Also Read: How to test Browser Compatibility for HTML5
Best Practices for using HTML Semantics
We now know how crucial it is to use HTML semantic tags, but let’s look at some best practices to boost the usefulness of the web pages we structure using them.
- Be precise: When placing material inside a semantic tag, utilize the tag’s appropriate semantic category. For the bottom of the page, use the tag “footer,” for instance.
- Use non-semantic tags sparingly: You must take care to avoid using non-semantic tags as much as possible. This benefits you by giving you a website that is as effective as possible.
- Logic is key: To imitate logic in the content hierarchy, use appropriate headings like “h1” and “h4“. Keep in mind the role characteristics for significant tags like “banner,” “main,” “navigation,” and more to precisely define the purpose of the tag.
Read More: How to approach cross-platform testing
Summing it Up
After learning about the advantages of using semantic tags, you might feel compelled to do so the next time you’re writing an HTML file. Semantic tags unquestionably have so many advantages that anyone who does not use them will soon fall behind since they will not be able to leverage as many people.
The most appropriate action is to choose one HTML tag and use it throughout the script if you’re unsure which one corresponds to the piece of material. In order to illustrate the distinction between the semantics of HTML and the standard HTML syntax, we also used a coding example above.
The preceding and later might appear the same, but when you publish your webpage, they will significantly change in terms of search engine ranking, accessibility, and cross-platform compatibility.
With tools like BrowserStack Live you can test the Cross Browser compatibility of your HTML semantics on 3000+ real devices and browsers for more accurate and comprehensive testing. It allows you to test under real user conditions and ensure to cover real wold conditions such as Geolocation Testing, Localization Testing, Network Throttling, etc.