Semantic Elements
The <h1> element is a semantic element, which gives the text it wraps around the role (or meaning) of “a top level heading on your page.”
A great deal of web content can be made accessible just by making sure the correct Hypertext Markup Language elements are used for the correct purpose at all times.
By default, most browser’s user agent stylesheet will style an <h1> with a large font size to make it look like a heading (although you could style it to look like anything you wanted).
Some of the benefits from writing semantic markup are as follows:
- Search engines will consider its contents as important keywords to influence the page’s search rankings (see SEO)
- Screen readers can use it as a signpost to help visually impaired users navigate a page (accessibility)
- Finding blocks of meaningful code is significantly easier than searching through endless divs with or without semantic or namespaced classes
- Suggests to the developer the type of data that will be populated
- Semantic naming mirrors proper custom element/component naming
These are some of the roughly 100 semantic elements available:
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>