Semantic HTML

Definition

The use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely defining its presentation or look.

Explain Like I'm New

You can build an entire website using only `<div>` tags. Visually, it might look perfect. But a blind person using a screen reader won't know where the navigation bar is, and Google's search engine won't know what part of the page is the main article. Semantic HTML uses specific tags like `<nav>`, `<article>`, and `<footer>` so machines understand your website.

Real World Example

Replacing a `<div class="navigation">` with a `<nav>` tag. They look exactly the same to a sighted user, but the `<nav>` tag drastically improves SEO and Accessibility.

Common Use Cases

•Improving SEO rankings
•Making websites accessible for visually impaired users

Interactive Example

Interview Questions

basic

Name three semantic HTML5 tags.

intermediate

Why is it bad practice to use a `<div>` for a button?

Flash Cards

Question

Name three tags.

Click to reveal answer

Answer

`<header>`, `<footer>`, `<article>`, `<section>`, `<nav>`, `<aside>`, `<main>`.

Question

Why not use a div for a button?

Click to reveal answer

Answer

A `<div>` is semantically meaningless. If you style a `<div>` to look like a button, users navigating via keyboard (pressing 'Tab') cannot focus on it, and hitting 'Enter' won't click it. A `<button>` tag has all of this built-in natively.