Learn HTML and CSS: Nesting

Nesting and the tree

"My nephew says HTML is a tree," says Maggie. "All I see is text." Time to show Maggie that tree.

Elements inside elements

An element can contain other elements. That's called nesting. The element around them is the parent, the elements inside are its children.

That's how a tree grows: <main> contains a heading and a list, and the list contains the flavours. A bulleted list is <ul>, each item in it an <li>. An <li> always belongs in a list: it's a child of <ul>.

An element runs until its closing tag. So what opens last closes first: first </li>, then </ul>, then </main>.

Indenting your code makes the tree visible. The browser doesn't care, but you will.

Under the page is the tree as the browser sees it: every element indented under its parent.

index.html

1<main>2  <h2>Our flavours</h2>3  <ul>4    <li>Vanilla</li>5    <li>Pistachio</li>6    <li>Strawberry</li>7  </ul>8</main>

ijssalon.example

Try it yourself

Under the title, add a chapter Cups with a list of the sizes Small, Medium and Large below it.

1<main>2  <h1>Cold Comfort</h1>3</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8f0;5  color: #3b2a1a;6}7header {8  padding: 24px 16px;9  background: #ffd6e0;10}11.logo {12  display: inline-block;13  margin: 8px 0 0;14  padding: 6px 18px;15  border-radius: 999px;16  background: #ffffff;17  font-size: 28px;18}19.slogan {20  margin: 8px 0 0;21}22main {23  padding: 8px 16px 24px;24}

ijssalon.example

Ready for more?

The full lesson has 6 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

Elements inside elements

An element can contain other elements. That's called nesting. The element around them is the parent, the elements inside are its children.

An element runs until its closing tag. So what opens last closes first: first </li>, then </ul>, then </main>.

Indenting your code makes the tree visible. The browser doesn't care, but you will.

Under the page is the tree as the browser sees it: every element indented under its parent.

index.html

1<main>2  <h2>Our flavours</h2>3  <ul>4    <li>Vanilla</li>5    <li>Pistachio</li>6    <li>Strawberry</li>7  </ul>8</main>

ijssalon.example

Try it yourself

Under the title, add a chapter Cups with a list of the sizes Small, Medium and Large below it.

1<main>2  <h1>Cold Comfort</h1>3</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8f0;5  color: #3b2a1a;6}7header {8  padding: 24px 16px;9  background: #ffd6e0;10}11.logo {12  display: inline-block;13  margin: 8px 0 0;14  padding: 6px 18px;15  border-radius: 999px;16  background: #ffffff;17  font-size: 28px;18}19.slogan {20  margin: 8px 0 0;21}22main {23  padding: 8px 16px 24px;24}

ijssalon.example