HTML document structure

Minimal document

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Article</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>Frontend course</h1>
      <nav><a href="/about">About</a></nav>
    </header>
    <main>
      <article>
        <h2>HTML basics</h2>
        <p>HTML gives content structure and meaning.</p>
      </article>
    </main>
    <footer>Course materials</footer>
  </body>
</html>

<!doctype html> enables standards mode. The head contains document metadata and linked resources; the body contains the visible document. header, nav, main, article, and footer are chosen for meaning, not because they have a particular default appearance.

Elements and the DOM

An element usually has an opening tag, content, and a closing tag. Attributes add information to an opening tag:

<a href="/articles" class="navigation-link">Articles</a>

The DOM represents the document as nodes: html contains head and body, and elements contain other elements and text nodes. CSS styles this tree; JavaScript manipulation of it belongs to Lecture 2.

Useful content elements include headings (h1–h6), paragraphs (p), links (a), lists (ul, ol, li), images (img), and code (code, pre). Use div and span when no more meaningful element fits.