What is Semantic HTML?
Semantic HTML is markup that adds context and explains to the browser how the element should be displayed rather than only explaining the element's presentation. This further shifts the responsibility of an element's presentation onto CSS. For example,
<em> instead of
<em> provide context behind the text.
<i> explain how the text should be presented. (Check out Mozilla's HTML elements reference page for more semantic HTML tags and how they should be used.)
It's usually less work.
If the element is actionable, such as a button, there are accessibility features and functionality baked into the native
<button> element. Using a
This also means it requires less work from developers to make the element accessible or better for search engine optimization (SEO). Assistive technologies can use tags, such as
<main>, to help users more effectively navigate through a site. Search engines consider semantic HTML when ranking a page.
It's easier to read.
Having semantic HTML in your markup means that it will be easier for other developers to read and maintain. It gives each section meaning by describing the type of information the element is expected to contain. Plus, it's easier to see if you've forgotten to close a tag than if you're having to hunt through a mass of
Just use semantic HTML. It's easier for you and for your users. 🎉