Header, footer, main in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this HTML structure?

Consider this HTML code:

<header><h1>Welcome</h1></header>
<main><p>Main content here.</p></main>
<footer><p>Footer info</p></footer>

What will the browser display?

HTML

<header><h1>Welcome</h1></header>
<main><p>Main content here.</p></main>
<footer><p>Footer info</p></footer>

A Only the footer paragraph 'Footer info' is visible.

B The main content is hidden and only header and footer show.

C A page with a big heading 'Welcome' at top, a paragraph 'Main content here.' below it, and a footer paragraph 'Footer info' at the bottom.

D The heading and footer are swapped in position visually.

💡 Hint

Think about the natural order of header, main, and footer in HTML.

The header appears first with the heading, then the main content paragraph, then the footer paragraph. This is the normal flow in the browser.

🧠 Conceptual

intermediate

Which semantic element is best for the main content?

You want to mark the main part of your webpage that holds the primary information. Which HTML element should you use?

A <main>

B <footer>

C <header>

D <section>

💡 Hint

The element should represent the main content unique to the page.

The

element is designed to hold the main content of the page, distinct from headers, footers, and navigation.

❓ selector

advanced

Which CSS selector targets only the footer element?

Given this HTML:

<header>...</header>
<main>...</main>
<footer>...</footer>

Which CSS selector will style only the footer?

A footer

B main

C section

D header

💡 Hint

The selector matches the element name you want to style.

The selector 'footer' matches all

elements in the document.

❓ layout

advanced

How to keep footer at bottom of viewport if content is short?

You want the footer to always appear at the bottom of the browser window even if the main content is small. Which CSS approach works best?

A Set footer display to inline-block;

B Set footer position to fixed with bottom: 0;

C Use float: right on footer.

D Use flexbox on body with column direction and main to grow, footer at bottom.

💡 Hint

Think about a layout that stretches main content to fill space pushing footer down.

Using flexbox on the body with column direction and letting main grow fills vertical space, pushing footer to bottom naturally.

❓ accessibility

expert

Which ARIA role best describes the main content for screen readers?

You want to improve accessibility by explicitly marking the main content region for assistive technologies. Which ARIA role should you add to the <main> element?

A role="banner"

B role="main"

C role="contentinfo"

D role="navigation"

💡 Hint

The role should match the main content landmark.

The ARIA role 'main' identifies the primary content area to screen readers, matching the semantic meaning of the

element.