Head and body sections in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start the HTML document with the correct doctype declaration.

HTML

<!DOCTYPE [1]>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>
<body>
  <p>Hello!</p>
</body>
</html>

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

Ahtml

BHTML

CHtml5

Dhtm

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase letters like which is allowed but less common.

Writing which is incorrect.

Omitting the doctype declaration entirely.

The correct doctype declaration for HTML5 is <!DOCTYPE html>. It tells the browser to render the page in standards mode.

2fill in blank

medium

Complete the code to add a title inside the head section.

HTML

<html lang="en">
<head>
  <meta charset="UTF-8">
  <[1]>My Website</[1]>
</head>
<body>
  <h1>Welcome!</h1>
</body>
</html>

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

Asection

Bheader

Ctitle

Dhead

Attempts:

3 left

💡 Hint

Common Mistakes

Using <header> instead of <title>.

Placing the title tag inside the body section.

Omitting the closing tag.

The <title> tag inside the <head> sets the page title shown in the browser tab.

3fill in blank

hard

Fix the error in the code by completing the missing body tag.

HTML

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page</title>
</head>
[1]
  <p>Content here</p>
</body>
</html>

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

A<head>

B<main>

C<section>

D<body>

Attempts:

3 left

💡 Hint

Common Mistakes

Using <head> instead of <body>.

Omitting the opening body tag.

Placing content outside the body tag.

The <body> tag is required to wrap the visible content of the page. It must open before the content and close after.

4fill in blank

hard

Fill both blanks to create a meta tag for responsive design inside the head section.

HTML

<head>
  <meta name=[1] content=[2]>
  <title>Responsive</title>
</head>

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

A"viewport"

B"width=device-width, initial-scale=1.0"

C"description"

D"text/html; charset=UTF-8"

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect name attribute like "description".

Wrong content value causing layout issues on mobile.

Omitting quotes around attribute values.

The meta tag with name="viewport" and content="width=device-width, initial-scale=1.0" makes the page scale correctly on different screen sizes.

5fill in blank

hard

Fill all three blanks to create a basic HTML structure with language, charset, and title.

HTML

<!DOCTYPE html>
<html lang=[1]>
<head>
  <meta charset=[2]>
  <title>[3]</title>
</head>
<body>
  <h1>Welcome!</h1>
</body>
</html>

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

A"en"

B"UTF-8"

CMy Website

D"utf8"

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect charset like "utf8" without dash and uppercase.

Omitting quotes around attribute values.

Leaving the title tag empty.

The lang attribute should be "en" for English. The charset meta tag uses "UTF-8" for encoding. The title tag sets the page title.

Practice

1. What is the main purpose of the <head> section in an HTML document?

easy

A. To hold information for the browser like title and styles, not visible content

B. To display the main content visible to users

C. To create navigation menus

D. To add images and videos to the page

Solution

1. Step 1: Understand the role of the <head> section

   The <head> contains metadata like the page title, links to stylesheets, and scripts, which the browser uses but does not show directly.

2. Step 2: Compare with <body> section

   The <body> holds visible content like text and images, unlike the <head> which is for behind-the-scenes info.

3. Final Answer:

   To hold information for the browser like title and styles, not visible content -> Option A

4. Quick Check:

   <head> = browser info, not visible [OK]

Hint: Head is for browser info, body is for visible content [OK]

Common Mistakes:

• Thinking <head> shows content on the page
• Confusing <head> with <body>
• Believing <head> holds images or text visible to users

2. Which of the following is the correct structure for an HTML document's head and body sections?

easy

A. ......

B. ......

C. ......

D. ......

Solution

1. Step 1: Recall the correct order of HTML tags

   The <html> tag wraps the whole document. Inside it, <head> comes first, then <body>.

2. Step 2: Check each option's tag order

   <html><head>...</head><body>...</body></html> correctly places <head> before <body> inside <html>. Others have wrong order or nesting.

3. Final Answer:

   <html><head>...</head><body>...</body></html> -> Option A

4. Quick Check:

   HTML structure = html > head > body [OK]

Hint: Head always before body inside html tag [OK]

Common Mistakes:

• Placing body before head
• Nesting html inside head or body
• Missing closing tags

3. What will be displayed in the browser when this HTML code runs?

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Welcome!</h1>
  </body>
</html>

medium

A. The text 'My Page' as a heading on the page

B. The text 'Welcome!' as a heading on the page

C. Both 'My Page' and 'Welcome!' as headings on the page

D. No visible text on the page

Solution

1. Step 1: Identify visible content in <body>

   The <body> contains <h1>Welcome!</h1>, which is visible on the page.

2. Step 2: Understand <title> role in <head>

   The <title> sets the browser tab's title, not page content.

3. Final Answer:

   The text 'Welcome!' as a heading on the page -> Option B

4. Quick Check:

   Body content visible, title shown in tab [OK]

Hint: Title shows in tab, body shows on page [OK]

Common Mistakes:

• Thinking title text appears on page
• Expecting both title and body text visible
• Ignoring difference between head and body

4. Identify the error in this HTML snippet:

<html>
  <head>
    <title>Page</title>
  <body>
    <h1>Hello</h1>
  </body>
</html>

medium

A. Using <title> inside <body>

B. Missing closing <html> tag

C. No errors, code is correct

D. Missing closing <head> tag before <body>

Solution

1. Step 1: Check tag closures in the snippet

   The <head> tag is opened but not closed before <body> starts, which is invalid.

2. Step 2: Confirm other tags

   The <html> tag is properly closed, and <title> is correctly inside <head>.

3. Final Answer:

   Missing closing <head> tag before <body> -> Option D

4. Quick Check:

   Head must close before body starts [OK]

Hint: Close head before starting body [OK]

Common Mistakes:

• Forgetting to close head tag
• Thinking title can be inside body
• Ignoring tag nesting rules

5. You want to add a CSS style to change the background color of the page. Where should you place the <style> tag and why?

hard

A. At the end of the <body> section, to load styles last

B. Inside the <body> section, so styles apply only to visible content

C. Inside the <head> section, so styles load before the page content

D. Outside both <head> and <body> sections, for global effect

Solution

1. Step 1: Understand where styles belong

   CSS styles are usually placed inside <style> tags within the <head> so the browser loads them before showing content.

2. Step 2: Evaluate other options

   Placing styles in <body> or outside tags is invalid or causes delayed styling, which is not best practice.

3. Final Answer:

   Inside the <head> section, so styles load before the page content -> Option C

4. Quick Check:

   Styles in head load early for proper display [OK]

Hint: Put styles in head for early loading [OK]

Common Mistakes:

• Placing style tags inside body
• Leaving style tags outside html structure
• Loading styles too late causing flicker