Chapter 1: What is HTML?

An introduction to HTML as the structural layer of the web, and why semantic markup matters.

Dania Rifki

It seems that your browser JavaScript is disabled, LibDoc is set to fallback mode with reduced features.

HTML (HyperText Markup Language) is the language that gives a web page its structure and meaning. It doesn't control how things look (that's CSS's job) and it doesn't control how things behave (that's JavaScript's job). HTML simply says: "this is a heading," "this is a paragraph," "this is an image of a painting."

Think of it as three layers, each with a distinct job:

HTML is the sketch, the wireframe, the composition before any rendering. CSS is the color, the type, the spacing, the visual treatment. JavaScript is the interaction, the dynamic response.

If you stripped away all the CSS from any website, you'd be left with a plain document of text, images, and links. That document should still make sense on its own. It should still have a clear hierarchy, a logical reading order, and meaningful structure. That is what good HTML gives you.

Want to know what "good structure without any styling" actually looks like? Here's the portfolio page from Chapter 8, rendered with construct.css, a tool that draws visible boxes around every semantic HTML element. Every <header>, <main>, <section>, <article>, and <footer> gets a labeled outline, making invisible structure visible. We'll come back to this at the end of the guide.

View the portfolio structure demo

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolio Structure - construct.css Demo</title>
  <link rel="stylesheet" href="../construct.css/modern-normalize.css">
  <link rel="stylesheet" href="../construct.css/construct.css">
  <link rel="stylesheet" href="../construct.css/construct.boxes.css">
</head>

<body>
  <header>
    <h1><a href="/">Jane Doe</a></h1>
    <nav aria-label="Primary">
      <a href="/work">Work</a>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  </header>

  <main>
    <section id="selected-works" aria-label="Selected Works">
      <h2>Selected Works</h2>

      <article>
        <figure>
          <img src="https://placehold.co/1200x800/3a506b/ffffff?text=Harbor+Study"
            alt="Oil study of fishing boats at dawn, warm light on calm water" width="1200" height="800" loading="lazy"
            decoding="async">
          <figcaption>Harbor Study No. 3 - Oil on panel, 30 x 40 cm, 2025</figcaption>
        </figure>
      </article>

      <article>
        <figure>
          <img src="https://placehold.co/1200x900/1c2541/ffffff?text=Night+Garden"
            alt="Dense garden foliage rendered in deep blues and violets with specks of white" width="1200" height="900"
            loading="lazy" decoding="async">
          <figcaption>Night Garden - Acrylic on canvas, 100 x 75 cm, 2024</figcaption>
        </figure>
      </article>
    </section>

    <section id="about" aria-label="About">
      <h2>About</h2>
      <p>I'm a painter based in Stockholm, working primarily in oil and acrylic. My work explores the boundary between
        observation and memory.</p>

      <details>
        <summary>Exhibition history</summary>
        <dl>
          <dt>2025</dt>
          <dd>Galleri Nord, Stockholm - Solo show</dd>
          <dt>2024</dt>
          <dd>Open Studio, Malmö - Group exhibition</dd>
        </dl>
      </details>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 Jane Doe</p>
    <nav aria-label="Social media links">
      <a href="https://instagram.com/janedoe">Instagram</a>
    </nav>
  </footer>
</body>

</html>

Enable

Open

Enable

Width: -px
Height: -px

Why "semantic" HTML matters

The word semantic means "relating to meaning." When we talk about semantic HTML, we mean choosing elements based on what the content is, not what we want it to look like.

For example, you might want some text to appear big and bold. You could wrap it in a generic element and style it with CSS. But if that text is actually a heading, you should use a heading element. Why?

Accessibility: Screen readers and assistive technologies rely on HTML to understand the page. A heading element tells a screen reader "this is a heading." A styled <div> tells it nothing.
Search engines: Search engines read the HTML structure to understand what a page is about.
Your future self: Meaningful markup is easier to read, maintain, and style.

The good news is that choosing the right element is usually intuitive. You already know the difference between a heading and a paragraph, between a navigation menu and a footer. HTML just asks you to make that explicit.