Semantic Tags

​Semantic Tags

• 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​

Multiple Choice

What is the difference between <nav> and <header>?

• There's no difference

• <nav> contains navigation only

• <header> contains navigation only

• <nav> goes above <header>

​<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​

Multiple Choice

Where could you find information on Semantics?

• W3Schools

• Ms. Lewis

• A Google search

• All of the above

Multiple Choice

Is it Semantics or Semantic Tags?

• Semantics

• Semantic Tags

• Both are correct

Multiple Choice

If you use <details> which semantic tag do you need to use with it?

• <section>

• <figure>

• <main>

• <summary>

• <header>

Multiple Choice

You have a news article that needs to go into an HTML page. Which semantic tag should it go between?

• <article>

• <section>

• <figure>

• <details>

Multiple Choice

You have a main page for a news website. You need to make something so all of the articles have thumbnails with a picture, a headline, and a bit of text. Which semantic tag do you choose?

• <main>

• <article>

• <summary>

• <section>