Proper indentation in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to properly indent the <h1> tag inside the <header>.

HTML

<header>
[1]<h1>Welcome</h1>
</header>

Drag options to blanks, or click blank then click option'

A(2 spaces)

B(tab)

C(4 spaces)

D(no indent)

Attempts:

3 left

💡 Hint

Common Mistakes

Not indenting at all

Using tabs instead of spaces

Indenting with four spaces is a common practice for HTML to show the <h1> is inside the <header>.

2fill in blank

medium

Complete the code to properly indent the <li> elements inside the <ul>.

HTML

<ul>
  [1]<li>Home</li>
  <li>About</li>
</ul>

Drag options to blanks, or click blank then click option'

A(no indent)

B(2 spaces)

C(tab)

D(4 spaces)

Attempts:

3 left

💡 Hint

Common Mistakes

Using only two spaces

Not indenting the first <li> tag

Indenting list items with four spaces inside the <ul> shows they belong to the list.

3fill in blank

hard

Fix the error in indentation for the <p> tag inside the <section>.

HTML

<section>
[1]<p>This is a paragraph.</p>
</section>

Drag options to blanks, or click blank then click option'

A(2 spaces)

B(4 spaces)

C(no indent)

D(tab)

Attempts:

3 left

💡 Hint

Common Mistakes

No indentation

Using tabs instead of spaces

Two spaces is a common indentation level for elements inside a <section> to keep code neat and readable.

4fill in blank

hard

Fill both blanks to properly indent the <nav> and <a> tags inside the <header>.

HTML

<header>
[1]<nav>
[2]<a href="#">Link</a>
  </nav>
</header>

Drag options to blanks, or click blank then click option'

A(2 spaces)

B(4 spaces)

C(tab)

D(no indent)

Attempts:

3 left

💡 Hint

Common Mistakes

Indenting both tags the same amount

Using tabs instead of spaces

The <nav> is indented two spaces inside <header>, and the <a> tag is indented four spaces inside <nav> for clear structure.

5fill in blank

hard

Fill all three blanks to properly indent the <article>, <h2>, and <p> tags.

HTML

<main>
[1]<article>
[2]<h2>Title</h2>
[3]<p>Content here.</p>
  </article>
</main>

Drag options to blanks, or click blank then click option'

A(2 spaces)

B(4 spaces)

C(6 spaces)

D(tab)

Attempts:

3 left

💡 Hint

Common Mistakes

Indenting all tags the same amount

Using tabs instead of spaces

The <article> is indented two spaces inside <main>, <h2> four spaces inside <article>, and <p> six spaces inside <article> for a clear nested structure.