1. Courses
  2. Modern Web Development
  3. Lecture 2
Lecture 2 of 1417 min3D modelFree lecture

HTML and the DOM

HTML describes the structure and meaning of a page; the browser turns it into the DOM, a live tree that JavaScript can read and change. Explode a real page layout into 3D to see the tree hidden inside it.

In this lecture you will

  • Write well-structured HTML with elements, attributes and nesting
  • Choose semantic elements that describe meaning, not appearance
  • Explain the DOM as a tree of nodes and how it relates to the HTML source
  • Apply basic accessibility practices that come from good structure

Every web page — whether hand-written or generated by a framework such as React — ends up as HTML in the browser. HTML’s job is not how things look (that’s CSS) or how they behave (that’s JavaScript), but what they are: a heading, a navigation menu, an article, a button.

Elements, attributes and nesting

An element usually has an opening tag, content and a closing tag. Attributes add information, and elements nest inside each other:

<article class="post">
  <h1>Release notes</h1>
  <p>Version 2.4 adds <a href="/docs/export">CSV export</a>.</p>
  <img src="/export.png" alt="Export button in the toolbar">
</article>

Here the article contains a heading, a paragraph and an image, and the paragraph contains a link. That containment is the key to everything else in this lecture.

Say what things are: semantic HTML

HTML offers elements that describe the role of content:

header / footer
Introductory and closing content for a page or a section.
nav
A block of major navigation links.
main
The primary content of the page — one per page.
article / section / aside
A self-contained piece, a thematic grouping, and related side content.
h1 … h6
Headings that form the outline of the page — don’t skip levels just for style.
button / a
button performs an action; a (link) navigates somewhere. Choosing the right one matters.

Browsers, search engines and assistive technologies such as screen readers all rely on these meanings. A page built entirely from anonymous div elements may look the same, but it communicates far less.

The DOM: the page as a tree

As the browser parses HTML, it builds the Document Object Model — a tree of objects in memory. Each element becomes a node; nesting becomes parent–child links. The DOM, not the HTML file, is what the browser renders and what JavaScript manipulates.

Explore the tree hidden inside an ordinary page layout. Each plate is an element, raised according to how deeply it is nested.

3D modelA web page, exploded by nesting depthDrag to rotate
Loading 3D model…
  1. The page you seeA familiar layout: a header with navigation, an article with a heading, text, an image and a button, a sidebar of cards, and a footer.
  2. Pull the layers apartRaise each element by its nesting depth. body sits at the bottom; header, main and footer sit on it; everything else stacks above its parent.
  3. Parents contain childrenFollow one branch: body → main → article → p. Each element lies entirely inside its parent — exactly as it is nested in the HTML.
  4. Every box is a nodeLabel every element and the page becomes a tree you can read — the same tree developer tools show in the Elements panel.
  5. The DOM is liveJavaScript adds a new card to the sidebar. The DOM gains a node, and the browser lays out and paints it — no page reload needed.

The parser is also forgiving. It never rejects a page: it repairs broken or incomplete HTML as it goes, so the tree it builds is not always what the source seems to say. Type some HTML, or try the examples, and see the tree your own browser builds:

InteractiveHTML in, DOM outPick an example or edit the HTML
Loading visual…

Your browser parses the HTML into a separate, inert document: scripts in it never run. When a selector or script behaves oddly, compare the DOM in developer tools with the HTML you wrote — they often differ.

Inspecting and changing the DOM

Open developer tools (right-click → Inspect) on any page and you can browse this tree live, edit it and watch the page update. JavaScript does the same with a small set of methods:

const aside = document.querySelector('aside');
const card = document.createElement('div');
card.className = 'card';
card.textContent = 'New: CSV export is live';
aside.append(card);   // the page updates immediately

We will use these methods properly in lecture 4.

Structure is accessibility

Around one in six people lives with some form of disability, and many rely on keyboards, screen readers or magnification. Most accessibility wins come directly from good HTML:

  • One h1, then headings in order — screen-reader users navigate by headings.
  • alt text on images that carry meaning; empty alt="" on purely decorative ones.
  • A label for every form field, linked with for and id.
  • Real buttons and links instead of clickable divs, so keyboard and assistive technology work automatically.

Here is the same page built twice. It looks identical, but switch versions and press Tab to feel the difference:

InteractiveSame look, different pageSwitch versions, then press Tab
Loading visual…

Browsers turn semantic elements into an accessibility tree of landmarks, headings and focusable controls. The div version gives assistive technology nothing but a stream of text. Test your own pages with the keyboard alone, and with the accessibility panel in developer tools.

Next: how CSS decides the size and position of every one of those boxes.

Key takeaways

  • HTML elements nest inside each other; the browser turns that nesting into the DOM tree.
  • Semantic elements such as header, nav, main, article and button tell browsers, search engines and assistive technology what content is.
  • The DOM is live — JavaScript can add, remove and change nodes, and the page updates.
  • Good structure is the foundation of accessibility — headings, labels, alt text and real buttons.

Check your understanding

3 questions · answers explained

Q1Why is a button element better than a clickable div for an action like “Delete”?

A native button comes with keyboard support, focus handling and the right accessibility role built in. A div needs all of that added by hand — and usually some of it gets forgotten.

Q2In the DOM, what is the relationship between a main element and a p element nested inside an article inside it?

Nesting in HTML becomes parent–child relationships in the DOM tree. The p’s parent is article, whose parent is main — so p is a descendant of main.

Q3What happens on the page when JavaScript appends a new element to the DOM?

The DOM is the live model the browser renders from. Changing it triggers the rendering pipeline for the affected parts, so the new element appears. The original HTML file is unchanged.