Why does a browser need HTML?

A page is more than a picture.

A picture tells a sighted viewer where things are. A document tells the browser what things are: a heading, a paragraph, a list, a button, a form. HTML was designed to give information a shared structure that browsers and other tools can understand.

The browser reads HTML and builds the Document Object Model (DOM). It resolves CSS into computed styles, determines sizes and positions, paints visual surfaces, and may composite some layers separately. In parallel, the browser exposes meaningful information through an accessibility tree to assistive technologies. This is a simplified conceptual model; real rendering engines optimize and overlap many stages.

Because structure and presentation are separate, a single document can adapt to a small screen, a print stylesheet, a high-contrast environment, or a screen reader.

Remove the paint in your imagination.

Read the following tiny document as if CSS did not exist. You can still understand the structure, navigate the link, and activate the button. That's the superpower of semantic HTML.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My tiny garden guide</title>
  </head>
  <body>
    <main>
      <h1>Welcome to the garden</h1>
      <p>Learn to grow herbs in a small space.</p>
      <ul><li>Choose a sunny spot</li></ul>
      <a href="tips.html">Read the tips</a>
    </main>
  </body>
</html>

The browser's job, in broad strokes.

The DOM represents the document as nodes. CSS rules match those nodes and affect their appearance and sometimes layout. An accessibility tree exposes useful semantics, names and states; it isn't simply a copy of what appears on screen.

JavaScript can modify the DOM or respond to events, but you don't need JavaScript for ordinary documents, navigation, or even many native interactive elements. Start from the browser's built-in capabilities, then add script where it unlocks real value.

Choose meaning before styling.

• Use a real <h1> for the main title, even if the visual design makes it small.
• Use <nav> for a set of navigation links and <main> for primary content.
• Use <a href> to navigate; use <button> to trigger an action.
• When HTML already provides the behavior, don't recreate it with generic elements and event handlers.

More than what you can see.

Screen readers use accessible names, roles and document relationships to help users understand and navigate a page. Keyboard users rely on focus order. People using zoom or large text rely on content reflowing without information loss. These needs are much easier to support when the document starts with clear structure.

For performance, semantic HTML lets the browser start useful work immediately. A simple link should not wait for a JavaScript bundle to become operational.

Break it, then rebuild.

Break it

Replace the heading with a styled <div> and the link with a clickable <span>. What document structure and keyboard behavior have you lost?

Build it

Write a one-page recipe using one main heading, a list of ingredients, ordered steps, and links to related recipes. Try it without a single class or line of CSS. Then style it without changing the underlying meaning.

Go a little deeper.

• MDN — Introduction to HTML
• WHATWG — HTML Living Standard
• MDN — Accessibility tree
• web.dev — Learn HTML