HTML Semantic Layout

Semantic elements are tags whose name tells you what the content is.

What Does Semantic Mean?

A <div> says nothing about its content. A <footer> clearly says "this is the bottom of the page". Tags like this are called semantic (meaningful) elements.

Element	Meaning
`<header>`	The top of a page or a section: logo, title
`<nav>`	A block of main navigation links
`<main>`	The main content of the page (only one per page)
`<section>`	A themed group of content, usually with a heading
`<article>`	Content that makes sense on its own: a blog post, a news story, a product
`<aside>`	Side content: tips, related links, ads
`<footer>`	The bottom of a page or section: contact, copyright

Why Use Them?

Search engines understand your page better, which helps SEO.
Screen readers let users jump straight to the navigation or main content.
Developers read the code more easily than a wall of <div> tags.

A Typical Page Layout

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Karachi Food Blog</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; }
header, footer { background: #333; color: white; padding: 12px 20px; }
nav a { color: white; margin-right: 14px; }
.wrap { display: flex; gap: 20px; padding: 20px; }
main { flex: 3; }
aside { flex: 1; background: #f4f4f4; padding: 12px; }
article { border-bottom: 1px solid #ddd; padding-bottom: 10px; }
</style>
</head>
<body>

<header>
  <h1>Karachi Food Blog</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">Recipes</a>
    <a href="#">Contact</a>
  </nav>
</header>

<div class="wrap">
  <main>
    <article>
      <h2>Best Nihari in Town</h2>
      <p>We tried five famous places in one week. Here is what we found.</p>
    </article>
    <article>
      <h2>Easy Chicken Karahi at Home</h2>
      <p>A simple recipe that is ready in thirty minutes.</p>
    </article>
  </main>
  <aside>
    <h3>Tip of the day</h3>
    <p>Always buy fresh tomatoes for karahi.</p>
  </aside>
</div>

<footer>
  <p>Copyright 2026 Karachi Food Blog</p>
</footer>

</body>
</html>

Try it Yourself »

The layout itself (side by side columns) comes from CSS. The semantic tags only describe the parts.

section vs article

An <article> can be taken out and shared on its own, like one blog post. A <section> is a part of something bigger, like the "Fees" part of a course page. They can be nested either way.

Example

html

<article>
  <h2>Web Development Course</h2>
  <section>
    <h3>What you will learn</h3>
    <p>HTML, CSS and JavaScript.</p>
  </section>
  <section>
    <h3>Duration</h3>
    <p>Three months.</p>
  </section>
</article>

Other Useful Semantic Tags

Element	Use
`<figure>` and `<figcaption>`	An image or diagram with its caption
`<time>`	A date or time, like `<time datetime="2026-10-15">15 October</time>`
`<address>`	Contact information

Use <div> only when no semantic tag fits, for example a wrapper that exists just for styling.

Exercise

Which element should hold the main navigation links of a website?