Nested elements in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are nested elements in HTML?

Nested elements are HTML tags placed inside other tags. This creates a parent-child relationship, like a box inside another box.

beginner

Why do we use nested elements in HTML?

We use nested elements to organize content logically and structure the page. It helps browsers understand which parts belong together.

beginner

Example: What is the parent element in this code?<br>

<div><p>Hello</p></div>

The <div> is the parent element because it contains the <p> element inside it.

intermediate

Can block elements contain inline elements in HTML?

Yes, block elements like <div> can contain inline elements like <span> or text. This is common for styling parts of text inside a block.

beginner

What happens if you forget to close a nested element properly?

The browser may not display the page correctly because it gets confused about where elements start and end. Always close tags properly to avoid layout issues.

Which of these is a correct example of nested elements?

A &lt;li&gt;&lt;ul&gt;Item 1&lt;/ul&gt;&lt;/li&gt;

B &lt;h1&gt;&lt;h2&gt;Title&lt;/h2&gt;&lt;/h1&gt;

C &lt;p&gt;&lt;div&gt;Text&lt;/div&gt;&lt;/p&gt;

D &lt;ul&gt;&lt;li&gt;Item 1&lt;/li&gt;&lt;/ul&gt;

Option D shows <li> inside <ul>, which is correct nesting. Other options have invalid nesting like a list inside a list item (A), a block element inside a paragraph (C), or a heading inside another heading (D).

What is the child element in this code?<br><section><article>Content</article></section>

A Content

B &lt;section&gt;

C &lt;article&gt;

D None

The <article> is inside <section>, so it is the child element.

Why is nesting important in HTML?

A To organize content and structure the page

B To create animations

C To make the page load faster

D To add colors to text

Nesting helps organize content logically and tells the browser how elements relate.

Which tag can contain other tags inside it?

A Parent element

B Child element

C Text node

D Empty element

Parent elements contain child elements inside them.

What is wrong with this nesting?<br><p><div>Text</div></p>

A Nothing, it's correct

B &lt;p&gt; cannot contain block elements like &lt;div&gt;

C &lt;div&gt; cannot be inside &lt;p&gt; because &lt;p&gt; is inline

D Tags are missing

<p> is a block element that should not contain other block elements like <div> inside it.

Explain what nested elements are in HTML and why they are useful.

Think about how boxes can be inside other boxes.

Describe what can happen if nested elements are not closed properly in HTML.

Imagine forgetting to close a box lid.