SEMANTIC HTML AND ACCESSIBILITY

<header>

What is Semantic HTML ?

Semantic HTML is the language of meaning; it’s a way to write markup for the web in a human- and machine-readable way.

eg. Elements such as <header>, <footer> etc are called Semantic HTML elements because they accurately describe the purpose of the Element and the type of content contained in them. When a browser communicates with code, it looks for some specific information to help with the display. Hence, HTML5 introduced some set of Semantic elements to help both search engines as well as developers.

In a nutshell, Semantic tags define the purpose of the element by using Semantic markup helping the browser understand the meaning of the content instead of just displaying it. Also providing extra level of clarity helping search engines to read the page and find the required information faster.

<section>

The Purpose Of Semantic HTML: The very essence

Structural, Semantic HTML is crucial towards good accessibility practices.

If an assistive device or screen reader scans a web page to get information about the DOM, it might have the functionality that allows the user to select to reader only the headings or links on the page. With HTML5, several Semantic elements representing logical sections or components of the web app or document can be represented, providing web authors the privilege to define various parts of a document while providing access to assistive technologies to use this information to enable alternate ways of viewing and navigating a page.

<Footer>

The importance of Semantic HTML: Accessibility.

Apart from the fact that Semantic HTML is easier to read, it has greater accessibility. Apparently as we have seen above, search engines and assistive technologies are also able to better understand the content and context of a website which implies a better experience for users.

By adding Semantic tags to your document, you’re providing additional information about that document which aids in communication (the page and it’s content). Making sure that the right page are delivered for the right queries.

Importance: Improving SEO Positioning.

Some search engines e.g. Google may use algorithms that analyzes the code of a website and uses the markup and labels to better understand the purpose of the page. In this way, if Semantic markup was used, it’ll facilitate the task to the positioning algorithm helping to reach more users.