HTML Story

HTML Story Prologue

starting, story content, references

0.0 Prologue

HyperText Markup Language (HTML) is the foundation of every web page. It provides the structural skeleton on which CSS applies visual style and JavaScript adds behavior. Mastering HTML means understanding its element vocabulary, attribute system, document structure, and rendering model.
Why HTML?
  1. HTML is parsed by every browser on every platform — the same markup renders on Windows, macOS, Linux, iOS, and Android.
  2. HTML is declarative: you describe what content is present, not how to draw it. The browser handles rendering.
  3. Semantic HTML communicates meaning to screen readers, search engines, and developer tools — not just visual layout.
  4. Well-structured HTML is accessible by default, supporting keyboard navigation and assistive technologies without extra effort.
  5. HTML integrates naturally with CSS for styling and JavaScript for interactivity; mastery of HTML makes both disciplines easier.
This story covers HTML from document structure through semantic markup, forms, media, and metadata. It does not cover CSS or JavaScript, which are addressed in their own stories.

0.1 Getting Started

You need only a text editor and a browser to write HTML. No compiler, no build system.
  1. Choose an editor:
    VS Code with the Live Server extension (ritwickdey.liveserver) reloads your page in the browser on every save.
  2. Create a minimal page: 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello, HTML!</h1>
  </body>
</html>
  3. Open Browser DevTools:
    Press F12 and explore the Elements panel to see the live DOM tree. Right-click any element to inspect, edit, or delete it in place.

0.2 Story Content

Each chapter is a single web page covering one area of HTML. Pages are accessible from the Pages list at the lower right. Chapters:

  1. Prologue

    Motivation, story layout, and getting started.

  2. Structure

    DOCTYPE, html, head, and body — the skeleton every HTML document shares.

  3. Text Content

    Headings, paragraphs, inline elements, lists, and preformatted text.

  4. Links

    Anchor elements, URL types, link targets, and navigation patterns.

  5. Media

    Images, responsive images, video, audio, and embedding with iframe.

  6. Tables

    Table structure, column groups, spanning cells, and captions.

  7. Forms

    Form structure, input types, labels, grouping, and constraint validation.

  8. Semantic Elements

    Document sections, content sectioning, and text-level semantics.

  9. Head & Metadata

    Title, meta tags, charset, viewport, linking resources, and script loading.

  10. Attributes

    Global attributes, boolean attributes, data-* custom attributes, and ARIA.

  11. DOM

    DOM API, node traversal, element relationships, and the full API by interface.

  12. Models

    Page model, flow model, and box model - how browsers structure and render HTML.

0.3 References

Reference Description
MDN HTML Reference Comprehensive documentation for all HTML elements and attributes.
HTML Living Standard The official HTML specification maintained by WHATWG.
web.dev: Learn HTML Concise modern HTML lessons from the Chrome team.
w3schools HTML Tutorial Quick reference with interactive examples - beginner to intermediate.
htmlreference.io Visual reference for every HTML element with usage notes.