Headers, Navs, and the Art of Not Nesting a <div> in a <div>

You ever try to design a webpage using nothing but <div> tags? Yeah, me too. When I first started, I thought the more <div>s, the better. I ended up with a mess that made me want to pull my hair out. That’s the problem with using <div>s for everything: you’re not just building a page, you’re building a structure that’s hard to maintain, hard to read, and pretty much impossible to make accessible.

We’re developers, right? We don’t do things the hard way. Modern HTML has the tools to make our lives easier, and those tools are called semantic tags. These tags aren’t just for decoration; they make the code more meaningful, better for search engines, and more accessible for users. Let’s dive into those tags and see how they can shape your site.

The Big 5: `<header>`, `<main>`, `<footer>`, `<nav>`, `<section>`

Alright, here’s the deal: every modern HTML page should be built using these core elements. Think of them like the essential components of a house. Without them, the whole structure is flimsy. You wouldn't leave out the walls just because you think "any old frame will do," right? Here’s how these tags work:

1
<header>: This is where your page starts. It’s usually where you put things like your site’s logo, a navigation bar, or a hero section. It’s the top of your page, your introduction to the world.
2
<nav>: The navigation tag. It’s specifically for your menus and links. Don’t bury them in <div>s — let the browser know where the links are. Plus, this is great for accessibility tools (like screen readers) that use these landmarks to help users navigate.
3
<main>: This is the core content of your page. If you have a homepage, the <main> tag contains your main content (not the header or footer). It’s super important for SEO and accessibility.
4
<footer>: As the name suggests, this goes at the bottom of your page. It’s where you might put things like copyright info, contact details, and your social links.
5
<section>: This is like a subsection within the main content. Think of it like a chapter in a book. If you’re writing an article or listing multiple projects, you can break it up into sections. It’s clean, it’s tidy, and it makes sense.

Here’s an example of how these tags come together:

html

          <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Awesome Portfolio</title>
  </head>
  <body>
    <header>
      <h1>Welcome to My Portfolio</h1>
      <nav>
        <ul>
          <li><a href="#about">About Me</a></li>
          <li><a href="#projects">My Work</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section id="about">
        <h2>About Me</h2>
        <p>This is where I tell you all about my journey into web development...</p>
      </section>
      <section id="projects">
        <h2>Projects</h2>
        <p>Here’s where you can see all the amazing things I’ve built...</p>
      </section>
    </main>
    <footer>
      <p>&copy; 2025 My Portfolio. All Rights Reserved.</p>
    </footer>
  </body>
</html>

Why “Just Use `<div>`” Is Developer Sin

Let me be blunt: don’t just use `<div>` tags for everything. Yes, I’ve done it too. When I was starting out, I’d throw a bunch of <div>s in there, thinking they were magic. But the problem is that a <div> is nothing more than a container — it doesn’t tell the browser anything about the content inside it. It’s like using a cardboard box for your shoes, your dinner, and your laptop. It works, but it’s a mess.

Instead, use semantic tags. Here’s why:

Clarity: Semantic tags give structure. A `<header>` is a header. A `<footer>` is a footer. No need for guessing. Accessibility: Screen readers and other assistive technologies rely on semantic HTML to help users navigate the page. Without these tags, you're essentially making it harder for others to use your site. SEO*: Search engines love semantic HTML because it helps them understand what’s important on your page. A <section> is a section. A <footer> is the footer. Google will thank you for using them properly.

The bottom line? Stop the div soup. Trust me, your code will thank you.

Let’s Build: Your Homepage Skeleton

Now that you’re equipped with the right semantic tags, let’s start building. Here’s the basic structure for your homepage, using all the tags we just talked about. This is going to be the skeleton for the project we’re building together.

html

          <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Portfolio</title>
  </head>
  <body>
    <header>
      <h1>Welcome to My Portfolio</h1>
      <nav>
        <ul>
          <li><a href="#about">About Me</a></li>
          <li><a href="#projects">My Work</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section id="about">
        <h2>About Me</h2>
        <p>Welcome to my portfolio! Here's a little about me...</p>
      </section>
      <section id="projects">
        <h2>My Projects</h2>
        <p>Check out my work below...</p>
      </section>
    </main>
    <footer>
      <p>&copy; 2025 My Portfolio. All Rights Reserved.</p>
    </footer>
  </body>
</html>

What’s Next?

Now that your homepage is starting to take shape, let’s talk about text content. How do you structure your headings? What makes a good paragraph? We’ll dig into that in the next lesson, where we’ll cover how to properly structure your text content with headings, paragraphs, and even how to include emojis (without breaking anything). Check out Text Content: Headings, Paragraphs & Emojis That Don’t Break to dive into the details.

Your homepage is looking solid — let's make sure the text hits all the right notes.