Text Content: Headings, Paragraphs & Emojis That Don't Break

When I first learned HTML, I thought <h1> just meant “make it big.” I’d sprinkle them all over the place like Parmesan on pasta. Want bold text? <h1>. Need a new section? Another <h1>. Turns out, that’s like writing a novel with only chapter ones. It’s not just bad style—it’s a nightmare for accessibility, SEO, and anyone trying to maintain your code. The truth is, semantic text structure is what separates the beginners from the developers who get hired. It’s not glamorous, but it’s powerful. So let’s talk text—the right way.

The Holy Hierarchy: <h1> to <h6>

You get one <h1> per page. One. That’s your main headline. The title of your site, your blog post, your product. The big idea. Everything else cascades down from there.

Think of heading tags like a table of contents:

<h1> is your book title.
<h2> is a chapter.
<h3> is a sub-section.
And so on.

It’s not about size; it’s about structure. Screen readers and search engines use these to navigate your content. If you throw <h3>s above <h2>s or skip <h2> altogether, it’s like giving someone a map with missing cities. They’ll get lost.

Here’s how a proper heading structure looks in the wild:

html

          <main>
  <h1>About Me</h1>
  <section>
    <h2>My Background</h2>
    <p>I've been building websites since dial-up. It started with curiosity and a lot of broken pages.</p>
  </section>
  <section>
    <h2>Skills</h2>
    <h3>Languages</h3>
    <p>HTML, CSS, JavaScript, and the occasional regrettable experience with PHP.</p>
    <h3>Tools</h3>
    <p>VS Code, Git, and coffee — lots of coffee.</p>
  </section>
</main>

That’s clean. That’s readable. And if your CSS is solid, it’ll look great too.

Paragraphs, Line Breaks & Lists That Actually Make Sense

Now let’s talk paragraphs. You don’t need to wrap every sentence in a <p>, but for actual blocks of content, <p> is your go-to. It's semantic. It tells the browser, “Hey, this is a paragraph.”

Don't do this:

html

          <div>This is a paragraph.</div>

That’s a crime. A semantic crime. Use the right tag for the job.

What about line breaks? Use <br> when you need a line break inside a paragraph, like in addresses or poetry. Don’t use it just to separate chunks of content. That’s what <p> and <section> are for.

And lists? Lists are beautiful — if used correctly:

<ul> for unordered (bullets)
<ol> for ordered (numbers)
<li> for each item

Lists aren’t just visual. Screen readers announce them as lists. They’re great for navigation, instructions, features — anything that benefits from clarity and structure.

Meet the About Page: Writing About Yourself Without Cringing

Okay, let’s build the About Me page for your portfolio — a real one, with structured content and proper tags.

Add this to the <main> section of your homepage project:

html

          <main>
  <section id="about">
    <h1>About Me</h1>
    <p>Hi, I’m [Your Name], a web developer who loves clean code, weird edge cases, and debugging CSS for hours on end.</p>

    <h2>Why I Code</h2>
    <p>I started coding because I wanted to customize my MySpace profile. No joke. From there, I fell in love with building things that live on the internet.</p>

    <h2>What I Bring</h2>
    <ul>
      <li>HTML that’s actually semantic</li>
      <li>JavaScript that doesn’t make your users cry</li>
      <li>A sense of humor (mostly dry)</li>
    </ul>
  </section>
</main>

Personal, readable, and accessible. And we’re still tracking toward a complete, semantic HTML portfolio site.

What’s Next?

Now that your words are working smarter, it’s time to talk about what users see: images. In the next lesson, we’ll dive into image tags, SVGs, and writing <alt> text that doesn’t make screen readers roll their eyes. Ready? Check out Images, SVGs & Alt Text that Doesn’t Suck.