Page structure

Why you need this

Almost every site has the same "skeleton": a header at the top with a logo and menu, the main content in the middle, sometimes a sidebar, and a footer at the bottom with contacts. HTML has semantic tags for these parts — tags with meaning. They look no different from an ordinary block, but:

• a search engine understands where the main text is and where the menu is;
• a blind person can "jump" to the main content with one key;
• the code is easier to read: <nav> is clearer than a nameless block.

The main parts of a page

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

<main>
  <h1>Welcome</h1>
  <p>The main text of the page.</p>
</main>

<footer>
  <p>© 2026 CodeWithMe</p>
</footer>

Result: the logo link and the menu at the top, a heading and text in the middle, a copyright line at the bottom.

Tag	What goes inside
<header>	the header: logo, title, menu
<nav>	the main navigation — a menu of links
<main>	the main content; there is one per page
<footer>	the footer: contacts, copyright, links to the rules
<aside>	side content: a sidebar, ads, «read also»

Sections and articles

Inside <main> the content is split further:

• <section> — a section of the page on one topic. A section usually has its own heading.
• <article> — a self-contained piece that makes sense on its own: a blog post, a news item, a product card, a comment.

How to choose? Ask yourself: "Could I cut this piece out and publish it on another site?" If yes, it's an <article>. If it's just a part of the page, it's a <section>.

<main>
  <section>
    <h2>Reviews</h2>
    <article>
      <h3>Anna</h3>
      <p>A great course!</p>
    </article>
    <article>
      <h3>Timur</h3>
      <p>Everything is clear the first time.</p>
    </article>
  </section>
</main>

Result: a «Reviews» section with two reviews in it, each with its own heading.

<header> and <footer> can also live inside an article — for example, an article header with the author and date.

A date: <time>

A person reads a date as «October 31», but a program prefers 2026-10-31. <time> gives both:

<p>Published <time datetime="2026-10-31">October 31</time></p>

Result: the page shows «Published October 31».

<div> and <span> — blocks without meaning

Sometimes you need a wrapper just to group elements and style them in CSS later. There are "empty" tags for that:

• <div> — a block container (on a new line, full width);
• <span> — an inline container (inside text).

<div class="card">
  <p>Price: <span class="price">$9.90</span></p>
</div>

Result: it looks like an ordinary paragraph. <div> and <span> have no meaning — they are "hooks" for CSS (we will cover the class attribute in topic 9).

The rule: first look for a suitable semantic tag, and use <div> when there isn't one.

How it works inside

The browser shows <header>, <main>, <section> and <div> the same way — as ordinary blocks. The difference is visible not to the eye but to programs: a screen reader builds a "landmark map" of the page from these tags, and a person can say "go to navigation" or "go to the main content".

Common mistakes

1. Everything made of <div>. "Div soup" works, but it is silent for search engines and screen readers.
2. Two <main>s. There is one main content per page.
3. A <section> without a heading. If there is no heading and none is needed, it's probably just a <div>.
4. <nav> for any links. <nav> is for the main navigation blocks, not for every link in the text.
5. Choosing a tag for its look. A semantic tag is chosen by meaning; the look is set in CSS.

Cheat sheet

Tag	Meaning
<header>	the header of a page or article
<nav>	the navigation menu
<main>	the main content, one per page
<section>	a topical section with a heading
<article>	a self-contained entry: post, news, card
<aside>	side, secondary content
<footer>	the footer
<time datetime="…">	a date/time
<div> / <span>	a block / inline wrapper without meaning