• Semantics replace named <div> tags

• Names chosen based off common Ids​

​The New Way

• Everything was a <div> tag​

• IDs added to <div> tags​

​The Old Way

​The History of Semantics

​Why use Semantic Tags?

• Better Search Engine Optimization (SEO)

• Easier to organize

• Works more effectively with content management systems (CMS)

​<article>

• Specifies self-contained content.

• Good for blog posts, articles, or other large​ bodies of text

​<header>

• ​Container for introductions or navigation links

• Usually has ​one or more <h1>-<h6> elements

• Logo/icon

• ​Any author information

​<nav>

• Only conta​ins navigation

​<footer>

• Information in the foot of the web page

• Copyright

• Site maps​

​<main>

• Contains the primary content of the website​

​<section>

• ​A group of similar content, usually with a heading

​<figure>

• Used to place a referenced image in an article

• Graphs

• Photo examples​

​<figcaption>

Adds a caption to the figure.​

Subject | Subject

Some text here about the topic of discussion

​<details>

• Additional information t​he user can show or hide

• Usually hidden

• One of the few semantic tags with an action​

​<summary>

Text where <details> are anchored​