What is Semantic HTML and why you should know about it?

Overview

Merriam Webster defines the word Semantic as of or relating to meaning in language.The meaning of the technical term semantic is no different. Semantic HTML means using meaningful tags, elements which will make sense for developer as well as the user. There are many special purpose elements in HTML, which we should use for their intented purpose as much as possible. Let's know why but first lets see some examples of semantic HTML elements.

<form>, <article>, <button>, <footer> etc

Why should we use these?

Why to use Semantic HTML when we can use CSS and Javascript to make any element behave in any way we want? Why should I use <button> to create a button when I can use <div> for creating almost everything including a button.

Look at some points. If we use semantic HTML tags then:

• HTML sematic elements has some suitable styling applied by default.
• Keyboard Acsessibility - User can navigate using tab and can select things by enter or return key on keyboard. This isn't possible when we use <div> instead of <button>.
• Faster site, better for mobile. Semantic HTML is lighter in file size than non-semantic code.
• Easier to make website responsive.
• Good for SEO (Search Engine Optimization). using semantic code can make the website appear in top Search results.
• Easier to develop. Makes code more readable.
• Easier to apply style using CSS and manipulate using JS beacuse there are element names to use as selectors.
• Useful for user using Screenreaders. when we use <heading> instead of some other non-semantic element then
  • Screenreaders read and mark heading as progress through the content, so it will work fine.
  • It will work when it is asked to jump to next or to previous headings
  • It can get list of all the headings

• MDN docs
• W3Schools