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.
Header Tag
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.
Nav Tag
Represents a section of a page whose purpose is to provide navigation links.
Section Tag
Defines the section of documents such as chapters, headers, footers or any other sections. Section tag groups related content together.
Article Tag
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.
Aside Tag
Represents a portion of a document that is not directly related to the document’s main content.
Footer Tag
Represents a footer for its nearest sectioning content or sectioning root element. Meaning you can have as many footer as needed in your document.
Main Tag
Represents the dominant content of the <body> of a document. There should only be one <main> tag per document.
Figure Tag
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.
Dialog Tag
Represents a dialog box or other interactive component, such as a dismissible alert, inspector, or sub-window.
Details Tag
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
Code:
Output:
Of course you will need to add CSS rules to style it, but now we have semantic tags!
Final Thoughts
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.
:)
