Semantic HTML is a modern standard that specifies how to give HTML elements meaning, or semantics.
It makes your website accessible to screen readers and people with cognitive disabilities.
Semantic HTML can also improve the search engine optimization (SEO) of your website.
The most important thing to know about semantic HTML is the fact that it assigns meanings to tags.
| Tags | Name | Description | Examples |
|---|---|---|---|
| <header></header> | Header | Sets up top navigational links for websites and introductory content in sections. |
Navigation Links, Page Header, Article Titles |
| <nav></nav> | Navigation | Sets up navigation links within a website. | 'Home', 'About Me', 'Posts', 'Contact' |
| <main></main> | Main | States the most important and unique content of the website. There can only be ONE <main></main> element per document. |
Main Articles, Product Store |
| <section></section> | Section | Groups together related content and themes of a website. | Comment Section, Related Articles, Discography |
| <article></article> | Article | Independent content that makes sense when removed from context. |
News Story, Forum Post, Food Recipe |
| <aside></aside> | Aside | Extra, related content to main content, but not required to understand main content. |
Sidebars, Fun Facts, Additional Commentary |
| <footer></footer> | Footer | Defines website footer for a website, document or section. | Contact Information, Copyright, Sitemap |
| <figure></figure> | Figure | Element for photos, videos, audio and other embeded content. | Music, Gifs, Pictures |
| <figcaption></figcaption> | Figure Caption |
Caption for content listed in <figure></figure>. | Photo Caption, Video Caption |