1st Principles
Menu

Web · 28 min read

HTML, CSS, and JavaScript

The three native web languages: structure (HTML), presentation (CSS), and behavior (JavaScript), and why separating them remains a useful discipline.

Why this exists

A web page is not one blob of 'website stuff.' Browsers expect structured documents, style rules, and optional programmable behavior.

HTML, CSS, and JavaScript evolved as the three native layers of that deal. Frameworks come and go on top; these three remain the substrate the browser actually understands.

Separating structure, presentation, and behavior is not fashion. It is how accessibility, caching, and team specialization stay tractable.

Axioms & primitives

  1. 01HTML defines structure and meaning of content.
  2. 02CSS defines presentation and layout for that structure.
  3. 03JavaScript defines behavior and can mutate structure and style at runtime.
  4. 04The browser parses these into an internal model (DOM/CSSOM) and renders frames.
  5. 05Progressive enhancement: useful content should survive without perfect CSS/JS when possible.
  6. 06Semantics in HTML are for machines and humans, not only for visual look.

Learning objectives

After this lesson you should be able to:

  • Assign a concern to HTML, CSS, or JS for five concrete page features.
  • Explain what the DOM is relative to the HTML source file.
  • Describe why inline styles and inline scripts everywhere hurt caching and maintenance.
  • Give one accessibility reason to prefer semantic HTML over div soup.
  • Sketch how a browser goes from bytes to pixels at a high level.

Progressive depth

Read the layers in order for a full explanation. Or open the layer you need.

01

Intuition

When you View Source on a simple page, you see tags describing headings, paragraphs, and links. That is HTML: the meaning and structure.

A separate stylesheet says how large the heading is and how columns wrap on a phone. That is CSS.

A script may validate a form or fetch new data without a full reload. That is JavaScript. The browser is the runtime that binds all three.

02

Formal shape

HTML documents are trees of elements with attributes. Semantic elements (header, nav, main, article, button) communicate role. Forms encode keyed user input.

CSS applies rules via selectors, cascade, and specificity. Layout systems (flow, flexbox, grid) position boxes. Media queries adapt to viewport conditions.

JavaScript event loops handle user input, timers, and network callbacks. It can rewrite the DOM/CSSOM, which triggers style and layout work.

Delivery: browsers fetch HTML, discover CSS/JS/image URLs, and pipeline those fetches (see browsers lesson). Content-Type and MIME sniffing rules matter for security.

03

Worked examples

Article page: HTML carries the article text; CSS sets typography and reading measure; JS might power a progress bar. The article should remain readable if JS fails.

Button: use <button> for actions, not a clickable <div>. Screen readers and keyboard users get correct behavior for free.

Critical CSS versus bulky bundles: shipping megabytes of JS for a marketing page is a performance bug with architectural roots.

XSS: untrusted strings inserted into HTML without escaping become code. Templating discipline is a security boundary.

04

Edge cases

Shadow DOM and web components encapsulate structure/style but add mental overhead.

CSS-in-JS and utility frameworks change where styles live; the browser still ends up with CSSOM rules.

Hydration mismatches in SSR apps are what happens when server HTML and client JS disagree about the initial tree.

Accessibility trees are derived from semantics and ARIA; fighting the browser with role spaghetti is usually a losing battle.

Mental models

  • Skeleton, clothes, muscles

    HTML is the skeleton, CSS the clothes, JS the muscles that move things. Mixing all three into one file is possible and usually miserable.

  • Blueprint vs paint vs robotics

    Blueprint (HTML) says what rooms exist. Paint (CSS) says how they look. Robotics (JS) says what happens when you press buttons.

  • Live model

    The DOM is a live object graph. JS edits the model; the renderer updates pixels.

Common misconceptions

  • Myth

    HTML is a programming language just like JavaScript.

    Reality

    HTML is a markup language for structure. It does not have general control flow; JS does.

  • Myth

    CSS is only colors and fonts.

    Reality

    CSS controls layout, responsive rules, animations, and increasingly container-driven design.

  • Myth

    If it looks right, the HTML is fine.

    Reality

    Div soup can look right and still break accessibility, SEO, and maintainability.

  • Myth

    JavaScript is required for any web page to be useful.

    Reality

    Many documents and forms work with HTML first. JS enhances; it need not be the only path.

Exercises

Work these without looking up answers first. Check yourself against the intent notes.

  1. Exercise 01

    For a search box, list what belongs in HTML, CSS, and JS respectively.

    What good looks like

    HTML: form/input/label. CSS: layout/visual focus. JS: suggestions/async submit. Mentions label association.

  2. Exercise 02

    Why might putting all CSS inline in every HTML page hurt a site that has many pages sharing a look?

    What good looks like

    No shared cacheable stylesheet; duplication; harder consistency; larger HTML every navigation.

  3. Exercise 03

    A page looks perfect but keyboard users cannot reach the menu buttons implemented as divs. What foundation was skipped?

    What good looks like

    Semantic interactive elements / accessibility; use button/a with real focus semantics.

Sources & further reading

External references. Prefer primary documents and clear explainers.

Go deeper on your own

These picks go past the foundation in this lesson. Use them when you want a primary spec, official docs, or a longer walkthrough.