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.

Practice

1. Which HTML element is best used to contain the main content unique to a webpage?

easy

A. <section>

B. <header>

C. <footer>

D. <main>

Solution

1. Step 1: Understand the purpose of <main>

   The <main> element is designed to hold the main content that is unique to the page, excluding repeated content like headers or footers.

2. Step 2: Compare with other elements

   <header> is for top parts like titles or menus, <footer> is for bottom parts like contact info, and <section> is a generic container but not specifically for main content.

3. Final Answer:

   <main> -> Option D

4. Quick Check:

   Main content = <main> [OK]

Hint: Main content always goes inside <main> tag [OK]

Common Mistakes:

• Using <section> instead of <main> for main content
• Putting main content inside <header> or <footer>
• Confusing <main> with <article>

2. Which of the following is the correct syntax to create a footer section in HTML5?

easy

A. Contact us at [e-mail]

B. Contact us at [e-mail]

C. Contact us at [e-mail]

D. Contact us at [e-mail]

Solution

1. Step 1: Identify the correct HTML5 footer tag

   The correct tag for footer content is <footer>. Tags like <foot>, <bottom>, and <end> do not exist in HTML5.

2. Step 2: Confirm the syntax

   The syntax <footer>...</footer> correctly wraps footer content.

3. Final Answer:

   <footer>Contact us at [e-mail]</footer> -> Option B

4. Quick Check:

   Footer tag = <footer> [OK]

Hint: Footer tag is exactly <footer> in HTML5 [OK]

Common Mistakes:

• Using non-existent tags like <foot> or <bottom>
• Misspelling the footer tag
• Using <div> without semantic meaning

3. What will be the visual order of content in the browser for this HTML snippet?

<header>Site Title</header>
<main>Welcome to our website</main>
<footer>Contact info</footer>

medium

A. Site Title at top, Welcome message in middle, Contact info at bottom

B. Contact info at top, Site Title in middle, Welcome message at bottom

C. Welcome message at top, Contact info in middle, Site Title at bottom

D. All content mixed randomly

Solution

1. Step 1: Understand semantic order of header, main, footer

   The <header> appears first and is shown at the top, <main> is the main content in the middle, and <footer> is at the bottom.

2. Step 2: Visualize the content placement

   Content inside <header> shows "Site Title" at top, <main> shows "Welcome to our website" in the middle, and <footer> shows "Contact info" at the bottom.

3. Final Answer:

   Site Title at top, Welcome message in middle, Contact info at bottom -> Option A

4. Quick Check:

   Header top, main middle, footer bottom [OK]

Hint: Header top, main center, footer bottom visually [OK]

Common Mistakes:

• Assuming footer appears at top
• Confusing main content position
• Thinking order is random without CSS

4. Identify the error in this HTML snippet:

<header>Welcome</header>
<main>Content here</main>
<footer>Footer info<footer>

medium

A. The header tag is not closed

B. The main tag is missing

C. The closing tag for footer is incorrect

D. There is no footer tag

Solution

1. Step 1: Check each tag for proper opening and closing

   The <header> and <main> tags are correctly opened and closed. The <footer> tag is opened but closed incorrectly as <footer> instead of </footer>.

2. Step 2: Identify the specific error

   The footer closing tag is missing the slash, causing invalid HTML.

3. Final Answer:

   The closing tag for footer is incorrect -> Option C

4. Quick Check:

   Footer closing tag must be </footer> [OK]

Hint: Closing tags need a slash, e.g. [OK]

Common Mistakes:

• Forgetting slash in closing tags
• Confusing opening and closing tags
• Assuming missing tags instead of wrong closing

5. You want to create a webpage with a header containing a navigation menu, a main section with an article, and a footer with copyright info. Which is the best semantic HTML structure?

hard

A. Menu
Article content
© 2024 Company

B. Menu
Article content
© 2024 Company

C. Menu
© 2024 Company
Article content

D. Menu
Article content
© 2024 Company

Solution

1. Step 1: Use semantic tags for each part

   The header should contain the navigation menu inside <nav>. The main content should be inside <main> with an <article>. The footer should have copyright info inside <footer>.

2. Step 2: Check each option for correct semantic structure

   <header><nav>Menu</nav></header> <main><article>Article content</article></main> <footer>© 2024 Company</footer> uses correct semantic tags: <header><nav></nav></header>, <main><article></article></main>, and <footer>. Other options misuse tags or use generic <div> instead of semantic elements.

3. Final Answer:

   <header><nav>Menu</nav></header> <main><article>Article content</article></main> <footer>© 2024 Company</footer> -> Option A

4. Quick Check:

   Header-nav, main-article, footer correct semantic [OK]

Hint: Use header-nav, main-article, footer for semantic clarity [OK]

Common Mistakes:

• Using <div> instead of semantic tags
• Placing main content inside footer
• Nesting main inside article incorrectly