Semantic HTML is the part of HTML that helps you organize your website in a maintenance and SEO friendly way. SEO stands for: Search Engine Optimization.
When you adhere to HTML semantics when building a site, that site tend to make it easy for search engines to rank it higher, and of course makes it easy for screen readers to navigate your website.
Here are some of the semantic HTML tags:
1-
The "header" tag is where the introductory content of the page, navigation links, menu and/or search bar go into. Brand logos go in there too!
2-
The "main" tag is where the main content of the page go into.
3-
The "article" tag is where independent self contained content go into. Content that makes sense on it's own. This can be a blog post.
4-
The "section" tag breaks down content into parts. It normally includes a heading. Not a "header" tag.
5-
The "aside" tag is used to add secondary or related content to a post on a page.
Note: the "section" tag can be nested in the "article" tag and the "aside" tag can be nested in either.
6-
The "footer" tag contains information about the page like; contact, links and legal information.
Thank you, and i hope this helps!
Top comments (2)
The tags you list are merely some new semantic tags that were recently added to HTML. The fact is, most HTML tags are semantic... that is the whole point of HTML - to give meaning and structure to plain text in a machine readable way.
You're right about most HTML tags being semantic and yes they give meaning and structure to a webpage.
These new semantic tags are here to build up on the importance of the existing ones, to give even more meaning and structure to a webpage.