Introduction to HTML

How this HTML track works

58 lessons — documents → text & links → forms → media → APIs & accessibility.
Playground — iframe_html: edit markup, click Run, preview in the iframe.
MCQs — check yourself after each lesson; read explanations, not just the correct letter.
Next — CSS, then JavaScript for interactivity.

Install on your device (macOS, Linux, Windows)

Lessons run in your browser on this site—install a modern browser and optional editor for local projects.

macOS

Use Safari (preinstalled) or install Google Chrome / Firefox.
Optional editor: VS Code (brew install --cask visual-studio-code).
Open DevTools with ⌥⌘I (Chrome/Edge) or ⌥⌘C (Safari Web Inspector).

Linux

Install Chromium or Firefox: sudo apt update && sudo apt install -y chromium-browser firefox (Debian/Ubuntu; package names vary by distro).
Fedora: sudo dnf install -y chromium firefox.
Optional editor: VS Code from code.visualstudio.com or sudo snap install code --classic.

Windows

Install Microsoft Edge or Chrome.
Optional editor: VS Code (winget install Microsoft.VisualStudioCode).
Open DevTools with F12 or Ctrl+Shift+I.

Verify: Open any lesson playground and click Run—output appears without installing a compiler.

HTML (HyperText Markup Language) is the standard markup language for documents meant to be interpreted by web browsers. It does not “program” behavior by itself—it describes structure and meaning so software can build an internal tree called the document object model (DOM), apply CSS for presentation, and run JavaScript for interactivity.

What “hypertext” and “markup” mean

Hypertext means documents link to other documents (and fragments) via URLs—you navigate a network of pages rather than a single linear file.
Markup means you wrap content in elements denoted by tags (<p>, <a>, …). Tags communicate roles: paragraph, link, section, table cell, and so on.

The rendering pipeline (big picture)

The browser (or crawler) receives HTML as text bytes.
The HTML parser builds the DOM tree according to the living standard’s rules.
CSS selectors match nodes; cascade computes final styles.
JavaScript may mutate the DOM, fetch data, or respond to events.

This curriculum treats HTML as the foundation: get semantics and accessibility right first; styling and scripting layers sit on top.

Minimal valid document skeleton

Every serious page should declare HTML5 doctype, language, UTF-8, and separate machine metadata (head) from human-visible content (body):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <p>Hello, world.</p>
  </body>
</html>

<!DOCTYPE html> selects standards mode.
lang helps pronunciation, hyphenation, and translation tools.
charset early avoids mojibake when bytes are interpreted as UTF-8.
title appears in tabs, bookmarks, and often search results.

Rendered miniature page

This box shows only what typically lives in <body>; your full document still needs DOCTYPE, html, head, and meta charset—see the skeleton above or the iframe editor.

Hello, world.

The DOM is not always your source file

Browsers parse HTML with strict algorithms. Invalid nesting forces the parser to repair the tree—implicitly closing tags, moving nodes—so DevTools DOM can differ from your editor buffer. Problems show up inconsistently across reader mode, print, bots, RSS, or email ingestion.

What many developers misunderstand

Frameworks output DOM: React/Vue/Svelte components still boil down to HTML elements; div soup in JSX is div soup on the wire.
Headings encode structure—not font size: pick heading levels for outline semantics; typography is CSS territory.
Broken JS/CSS shouldn’t orphan content: ship meaningful HTML text first; scripting layers enhance.
Accessibility is markup work: lang, visible labels, landmarks, descriptive links—none of those are magically fixed by frameworks.

Why “mostly valid HTML” quietly hurts teams

Harder onboarding: undocumented parser fixes confuse juniors during code review.
Tooling flakes: integrations (search, previews, sanitizers) may interpret malformed trees differently.
Bug reports blaming CSS often originate from malformed HTML collapsing margins or breaking flex/grid item expectations.

How this track is organized

You will move from documents and text to links, images, tables, forms, embedded media, graphics, then Web APIs and accessibility. Each lesson builds prerequisites for the next; the HTML reference desk supplements memorization with lookups.

Mindset for professional markup

Semantics first: pick the element that matches meaning, then style it.
Progressive enhancement: critical reading works without JavaScript.
Validate: periodic checks with an HTML validator catch stray tags and invalid nesting.

Important interview questions and answers

Q: What is the purpose of ``?
A: It forces standards mode so browsers use modern layout/parsing behavior instead of legacy quirks mode.
Q: Why is semantic HTML important in interviews and production?
A: It improves accessibility, SEO, maintainability, and reduces ARIA/JS work by using native element behavior.
Q: What is the difference between `head` and `body`?
A: `head` stores metadata/resources for the document, while `body` contains user-visible content.

Challenge

Validate your first page

Add lang on <html>.
Include meta charset and a <title>.
Run the playground and confirm the preview renders.

Done when: the iframe shows your skeleton with visible title semantics.

Interview prep

What is the DOM in one sentence?: A tree of nodes the browser builds from HTML, which CSS and JavaScript can query and change.
Why declare <code>lang</code> on <code><html></code>?: It sets pronunciation, hyphenation, and translation behavior for assistive tech and search engines.