Semantic tags are tags that are labeled with words that make sense for their context. In the past we may have simply used <Div> wherever we needed to make a section. In HTML5 we began to utilize tags such as Aside, Section, Header, Article, Footer. While not completely necessary, they allow our code to more legible and easier for another person (or yourself awhile later) to understand how the page is put together.
| Tag | When to use |
| <Header> | Generally used at the top of the page to contain the <h1>. |
| <Article> | Used to create a division that can stand on it's own as a solo topic. |
| <Section> | Usually Section is designated as a smaller part of an article. Not to be thought of as an individual statement, or a complete thought, but rather as a part of a larger thought. |
| <Aside> | Supporting materials to the article, such as supporting images or side links. |
| <Footer> | A section of a page generally used to display some navigation links, copywrite information, disclaimers, and usually will not change as the user navigates throughout the page. |
When using Semantic HTML tags instead of non-semantic tags (i.e. <div class="blueBg">,) It becomes harder to maintain down the road. Imagine if you used "blueBg," and down the road wanted to change the color to red...that would require either using a class designation that makes no sense, or updating all of the tags.