10 Semantic Tags Introduced in HTML5
Every website should use semantic tags to improve accessibility and SEO.
What is a semantic tag?
It is just a tag that has a specific meaning.
Although we commonly use <div> tag, in reality we should only use it whenever no semantic tags are available.
For example, if you are writing the main content of a website, wouldn’t it be more meaningful to wrap it inside a <main> tag over an empty meaningless <div>?
The answer is yes, of course we should use semantic tags!
Use semantic tag and attributes!
Why should I use semantic tags?
There are two major reasons to use semantic tags:
- Accessibility: We should always strive to make our work accessible for all users. At least most of them.
- Search Engine Optimization [SEO]: It simplifies the work of the search engine because it enhances communication. Using semantic tags in the right way makes the work easier for theses engines, so they reward you with a better ranking.
Represents a container for introductory content of any section of your section. You can use it as many times as you want as long as it represents the introductory content of something.
Represents a section of a page whose purpose is to provide navigation links.
Defines the section of documents such as chapters, headers, footers or any other sections. Section tag groups related content together.
Represents a self-contained composition in a document, page, application, or site, which is independently distributable or reusable. It is valid to have many <article> tags in a single document.
Represents a portion of a document that is not directly related to the document’s main content.
Represents a footer for its nearest sectioning content or sectioning root element. Meaning you can have as many footer as needed in your document.
Represents the dominant content of the <body> of a document. There should only be one <main> tag per document.
It is used to add self-contained content like illustrations, diagrams, photos or codes listing in a document. The figure, its caption, and its contents are referenced as a single unit.
Represents a dialog box or other interactive component, such as a dismissible alert, inspector, or sub-window.
Creates a disclosure widget in which information is visible only when the user clicks the “arrow”. Within this tag you can specify the text that the user will see before activating the “open” state.
Bringing All Together
Of course you will need to add CSS rules to style it, but now we have semantic tags!
Although it is impossible to make a website 100% accessible, I think we have the responsibility to make our work accessible to most people.
This is just one of the first steps. There is so much more that we need to think in order to achieve this requirement.
In conclusion, you need semantic tags for accessibility and SEO reasons.
Hopefully, in that order.
HTML elements reference - HTML: HyperText Markup Language | MDN
This page lists all the HTML elements, which are created using tags.
HTML | Tag - GeeksforGeeks
Section tag defines the section of documents such as chapters, headers, footers or any other sections. The section tag…