Semantic HTML

Semantic HTML tags tell you what they contain. They are elements intended to hold specific information: the article tag is semantic, for example, but the div tag is not.

I'm trying to write more semantic HTML for two main reasons:

1. Structure. Semantic HTML defines the purpose of each element, which should make it easier to read my own HTML. This also lets me style my pages functionally and consistently: if I want all my asides to appear in a certain way then I format the aside element.
2. Readability. Someone reading my HTML might be doing so using a screen reader, and screen reader shortcuts depend on correct use of semantic HTML. I don't use screen readers, but I do use reader mode in my browser: again, this relies on semantic HTML.

Using semantic HTML tags is not the same thing as writing semantic HTML. Tags can always be misused: you could use tables as layout elements, for example.

• Never use tables for layout

Semantic HTML can maybe be summarised thus:

A place for everything, and everything in its place.

Resources

• https://www.semrush.com/blog/semantic-html5-guide/
• https://thomasorus.com/what-is-semantic-html.html
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element