Semantic HTML

Semantics refers to the meaning of an item. Semantic HTML refers to specifying elements that gives meaning around text. For example, you could specify a top level heading with the <h1> tag which is known as the top level tag.

<h1>This is a top level heading</h1>

With HTML you can defined the style with any, so for example to replicate the above tag in the browser you can use a different set of tag and style attributes.

<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>

This will render it to look like a top level heading, but it has no semantic value.

Benefits from writing semantic markup:

• 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
• Finding blocks of meaningful code is significantly easier than searching though 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