Semantic HTML

Definition

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

Explain Like I'm New

Instead of building a webpage out of 100 `<div>` tags, Semantic HTML uses tags that actually describe what the content is: `<header>`, `<nav>`, `<main>`, `<article>`, and `<footer>`. This helps Google understand your site and helps Screen Readers navigate it.

Real World Example

Replacing `<div className='heading'>Title</div>` with `<h1>Title</h1>`.

Common Use Cases

•SEO Optimization
•Accessibility

Terminal Output

bash / terminal

// BAD <div className='nav'> <div className='link'>Home</div> </div> // GOOD <nav> <a href='/'>Home</a> </nav>

Interview Questions

basic

Why is a `<button>` better than a `<div onClick={...}>`?

intermediate

Why shouldn't you have multiple `<h1>` tags on a page?

advanced

How do Semantic HTML elements interact with the Accessibility Tree?

Flash Cards

Question

Why is button better than div?

Click to reveal answer

Answer

A `<button>` automatically receives keyboard focus when tabbing, and automatically triggers its `onClick` when the user presses the 'Enter' or 'Space' key. A `<div>` does none of this unless you write hundreds of lines of custom code to recreate it.