Header, footer, main in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a header section with a title.

HTML

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

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

AWelcome to My Site

B<h1>My Site</h1>

Cheader

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Putting HTML tags inside the blank instead of plain text

Leaving the blank empty

The <h1> tag inside the <header> should contain the page title text, like "Welcome to My Site".

2fill in blank

medium

Complete the code to add a footer with copyright text.

HTML

<footer>
  <p>[1]</p>
</footer>

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

A<footer>My Company</footer>

B© 2023 My Company

Cfooter

DCopyright

Attempts:

3 left

💡 Hint

Common Mistakes

Using HTML tags inside the paragraph

Leaving the paragraph empty

The footer paragraph should contain the copyright text as plain text, for example, "© 2023 My Company".

3fill in blank

hard

Fix the error in the main section by completing the blank with the correct semantic tag.

HTML

[1]
  <p>This is the main content area.</p>
</main>

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

A<main>

B<section>

C<div>

D<article>

Attempts:

3 left

💡 Hint

Common Mistakes

Using <section> or <div> instead of <main>

Not matching the closing tag

The main content area should start with the <main> tag to be semantically correct.

4fill in blank

hard

Fill both blanks to create a page layout with header and footer sections.

HTML

[1]
  <h2>Site Header</h2>
</header>

<main>
  <p>Page content goes here.</p>
</main>

[2]
  <p>Site Footer</p>
</footer>

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

A<header>

B<main>

C<footer>

D<section>

Attempts:

3 left

💡 Hint

Common Mistakes

Using <section> instead of <header> or <footer>

Mixing up header and footer tags

The first blank should be the opening <header> tag and the second blank the opening <footer> tag to create proper page sections.

5fill in blank

hard

Fill all three blanks to build a simple page with header, main, and footer sections.

HTML

[1]
  <h1>My Website</h1>
</header>

[2]
  <p>Welcome to the main content.</p>
</main>

[3]
  <p>© 2023 My Website</p>
</footer>

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

A<header>

B<main>

C<footer>

D<section>

Attempts:

3 left

💡 Hint

Common Mistakes

Using <section> instead of semantic tags

Incorrect order of tags

The page should start with <header>, then <main>, and end with <footer> for proper semantic structure.