The Document Is the API

Every HTML file you have ever opened goes through the same pipeline: the browser downloads bytes, parses them into a DOM tree, applies CSS, and paints. Your markup is not a suggestion — it is the input to that machine. Twenty years of web development has proven the same thing over and over: the teams that win are the ones who write HTML like it is a public API.

The minimum real document

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SudoSecurity</title>
  </head>
  <body>
    <header>SudoSecurity</header>
    <main>
      <article>
        <h1>Hello, web</h1>
        <p>Content lives here.</p>
      </article>
    </main>
    <footer>© 2026</footer>
  </body>
</html>

Every line there earns its place. <!doctype html> forces standards mode — omit it and the browser falls back to quirks mode, where layout bugs you cannot explain appear. lang drives screen-reader pronunciation, hyphenation, and even spellcheck. The viewport meta tag is the single line that makes mobile browsers render at device width instead of a scaled-down 980px desktop layout.

Parsing is forgiving — that is the trap

Browsers fix your mistakes silently. Forget a </li> and it is closed for you. Put a <div> inside a <p> and the parser quietly splits your paragraph. This forgiveness is why malformed HTML "works" — and why it is dangerous: screen readers, search indexers, and other parsers are not as forgiving, and the DOM you get is often not the DOM you think you wrote.

Try it yourself

Paste this into the sandbox with Run — it inspects the DOM the same way the browser does:

const tags = ["header", "nav", "main", "article", "section", "aside", "footer"];
console.log("Semantic landmarks:", tags.length);
console.log("Each one announces itself to assistive tech — divs do not.");

Rules of thumb

• One <h1> per page, heading levels never skipped (h1 → h2 → h3, never h1 → h4).
• <header>, <nav>, <main>, <footer> are landmark regions — assistive tech users navigate by them.
• If you cannot name what the element is, it is probably a <div> — and that is a signal, not a default.