Semantic HTML

HTML has both semantic tags and non-semantic tags. Semantic tags use words that help you understand the purpose of that tag, instead of a non-semantic tag that uses a word unrelated to what's going on.

Specifically, **semantic **means "of or relating to meaning in language" according to the trusty Merriam Webster Dictionary.

Practically, an example of semantic vs. non-semantic is:

• <div> is non-semantic. It doesn't really explain what's going on here. It's just a div.
• <header> is semantic. This tag explains what it's purpose is: it's a header and will contain header information at the top of the page.

Semantic tags are good for SEO and accessibility. Browsers are able to interpret these semantic tags for screen-readers and other software to help make the web as accessible as possible.

Semantic tags that are common are below (along with their meaning):

<header>: usually contains navigation links or header tags at the top of the page.

<nav>: usually contains a nav bar of some sort (lists)

<main>: contains the main content of a page. This can contain article tags, header tags, and others.

<footer>: contains the information at the bottom of a page. Contact information, bottom navs, copyright, terms of use, site map.

<section>: group related content inside of a main div. Usually done by topic.

<article>: contains content that makes sense on it's own. This can be a single article, post, write-up. This would be inside a section.

<aside>: contains information that is not needed but can enhance the information presented in an article or section.

<figure>: you can insert an img inside here.

<figcaption>: inside the figure element, you can insert a caption for the image.

<audio>: plays audio files. It can use the "autoplay" and "controls" attributes to enhance it.

<source>: goes inside the audio element, and you can use the "src" attribute to specify an audio source.

<video>: used for displaying videos. Can take the "src" and "controls" attributes.

<embed>: used to embed content into a site, including audio, gifs, and videos. It can also take the "src" attribute.

In general, it is good to use semantic HTML tags when you can. It assists other devs, helps accessibility software do it's job better, and overall makes the code look cleaner and easier to read.