Generation STEM
Learning LibraryWebsite Development LibraryTeens

HTML basics: semantic structure and the document tree

HTML isn't just text on a page — it's a tree of meaning. Good tags describe what each part is (a heading, a list, a link), which helps browsers, search engines, and screen readers alike.

The big idea

HTML tags nest into a tree that structures a document semantically — using tags that describe meaning, not just appearance.

See it in code

1The basics

Two tags, two jobs. <h1> is the top-level heading; <p> is a paragraph of body text. Almost every page starts about here:

html
<h1>Learn to Code</h1>
<p>A quick guide to getting started.</p>
The simplest valid page — a heading and a paragraph:

That's already valid HTML. The browser renders the tags in order, giving the heading weight and the paragraph plain body text.

2A step further

Content that has an order wants a list. <ol> is an ordered (numbered) list, and each <li> is one step inside it:

html
<h1>Learn to Code</h1>
<p>A quick guide to getting started.</p>

<ol>
  <li>Pick a language</li>
  <li>Build a small project</li>
  <li>Share it</li>
</ol>
A numbered list added under the intro:

<ol> numbers the items for you, and says something a paragraph can't: these steps happen in sequence. That meaning is the whole point of semantic tags.

3In our world

Now wrap it in semantic tags. <article> holds the whole piece, <section> groups the steps, and a <footer> with an <a> adds a link region. The indentation mirrors the tree — children nested inside parents:

html
<article>
  <h1>Learn to Code</h1>
  <p>A quick guide to getting started.</p>

  <section>
    <h2>Steps</h2>
    <ol>
      <li>Pick a language</li>
      <li>Build a small project</li>
      <li>Share it</li>
    </ol>
  </section>

  <footer>
    <a href="https://example.com">More resources</a>
  </footer>
</article>
The rendered structure — a page with real semantic parts:

Semantic tags carry meaning a plain <div> can't. <ol> says 'these steps are ordered', <nav>/<footer> mark page regions, <a href> creates a link. That meaning is what a screen reader announces and a search engine indexes — structure is accessibility.

The same idea, everywhere

Nesting elements into a tree is how every document format works: XML, JSON, even a file system's folders. The 'semantic vs presentational' distinction — describe what something is, style it separately — is a principle that keeps large codebases maintainable.

Try it yourself

Add a <nav> with two links before the article. Then nest a <ul> (unordered list) inside a list item to make a sub-list, and watch the tree deepen.

The common mistake

Using <div> for everything ('div soup'). A <div> is meaningless — it says nothing about content. Reaching for semantic tags (<section>, <article>, <nav>, <button>) makes your page accessible and far easier to style and maintain.

What it unlocks

Structure is the base for styling with CSS, reading and changing the page via the DOM, and building reusable components.

Want the simpler version? Read the Kids version →

Related concepts