Login - Jit4All

What is the difference between <div> and <main> ?

<div> is a plain container with no meaning. <main> tells the browser, screen readers, and search engines: "this is the central content of the page."

Every webpage is made of boxes. For years, developers wrapped everything in <div> tags — and it worked visually. But a page full of <div> tags is like a building with no signs: hard for visitors to navigate and impossible for assistive technology to understand.

HTML5 introduced semantic elements: tags whose names describe their purpose. <header>, <nav>, <main>, <article>, <aside>, and <footer> do exactly the same layout job as <div> — but they carry meaning that browsers, screen readers, and search engines can act on.

A screen reader user navigating by landmarks jumps straight to <main> to skip the menu. A search engine weights content inside <article> more heavily than content inside a generic <div>. A developer reading your code six months later understands the structure at a glance. Semantic HTML serves all three.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>
<body>

  <header>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h1>Post Title</h1>
      <p>Post body…</p>
    </article>
    <aside>
      <!-- Related links, author bio -->
    </aside>
  </main>

  <footer>
    <!-- Copyright, contact links -->
  </footer>

</body>
</html>

<header> — sits at the top of the page. Contains your logo and site-wide navigation. You can also place a <header> inside an <article> for that article's own heading area.

<nav> — wraps blocks of navigation links. Use it for your main menu and for breadcrumb trails. Do not use it for every group of links — only for major navigation sections.

<main> — use it exactly once per page. Everything the page is "about" goes here. Do not nest <main> inside <header>, <footer>, or <aside>.

<article> — self-contained content that could be lifted out and still make sense on its own: a blog post, a news story, a product card. It can have its own <header> and <footer>.

<aside> holds content tangentially related to the main content — sidebars, pull-quotes, related links. <footer> closes the page or a section with copyright info, contact links, or legal text.

Screen readers announce landmark regions. Users jump directly to <main> or <nav> without hearing every link read aloud first.

Search engines give more weight to content inside semantic elements. An <article> with an <h1> outranks the same text buried in nested <div> tags.

Paste your HTML into ChatGPT and ask: "Does this page use semantic elements correctly?" It will spot missing <main> tags, misused <div> containers, and heading hierarchy problems. But always read the suggestion — AI sometimes recommends <section> where a plain <div> is fine, or misses a missing <nav>.

Create a new file called page.html. Add the full DOCTYPE and <html>, <head>, <body> skeleton.

Inside <body>, add a <header> containing a <nav> with three links: Home, About, Contact.

Add a <main> section. Inside it, place an <article> with an <h1> and two <p> tags of placeholder text.

Add an <aside> next to the article with a short "Related links" list. Close the page with a <footer> showing a copyright line.

Open the page in Chrome, press F12, go to the Accessibility panel, and confirm that all landmark regions — header, navigation, main, footer — are listed.

Using <div> for everything. If an element is navigation, use <nav>. If it is the page footer, use <footer>. Reserve <div> for purely visual grouping that has no semantic meaning.

Multiple <main> elements on one page. There must be exactly one. Two <main> tags confuse screen readers and invalidate your HTML.

Skipping heading levels — jumping from <h1> straight to <h4>. Headings must follow order: h1 → h2 → h3. Skipping levels breaks screen reader navigation and hurts SEO.

Putting the site-wide <header> or <footer> inside <main>. They belong outside as siblings of <main>, not children of it.

Using semantic tags for visual styling only — for example, using <h2> just to get big bold text. Use it because that content IS a second-level heading. Control appearance with CSS, not with tag choice.

Structure any webpage using <header>, <nav>, <main>, <article>, <aside>, and <footer> — and explain why each one is better than a plain <div>.