A page structure that does some of the work for you

Write the document first

Start with a title, a language, and a viewport declaration. These are small details with visible consequences: the title identifies the browser tab, the language helps assistive technology, and the viewport declaration lets a mobile browser use the device width.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Field notes — Small Systems</title>
</head>
<body>
  <header>
    <a href="/">Small Systems</a>
    <nav aria-label="Main navigation">
      <a href="/guides/">Guides</a>
      <a href="/about/">About</a>
    </nav>
  </header>
  <main>
    <article>
      <h1>Field notes</h1>
      <p>A few things learned while building for the web.</p>
      <h2>Start with a readable document</h2>
      <p>The layout can come later.</p>
    </article>
  </main>
  <footer>Small Systems</footer>
</body>
</html>

Use headings to describe the outline

The h1 names the page. An h2 introduces a section within it; an h3 belongs inside that section. Choose the level for the relationship between ideas, then use CSS for the visual size. A heading should remain useful when read without the paragraphs around it.

Choose links and buttons deliberately

A link moves to a location. A button performs an action. Use an anchor with an href for navigation and a real button for opening a dialog or submitting a form. Native elements already provide keyboard behavior that a clickable div would need to recreate.

Read the page without its stylesheet

Remove the CSS temporarily. If the order still makes sense, the links are understandable, and the headings tell a coherent story, the document has a useful foundation. Styling should support that structure rather than compensate for missing meaning.