CodePath - HTML & CSS Learning Platform

What is Semantic HTML?

A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: `<div>` and `<span>`. Examples of semantic elements: `<form>`, `<table>`, and `<article>`.

Common Semantic Tags

Modern HTML5 introduced tags like `<header>`, `<footer>`, `<nav>`, `<section>`, `<article>`, and `<aside>` to define different parts of a webpage.

<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>
<footer>...</footer>

Try it yourself:

HTML

<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>
<footer>...</footer>

CSS

Result