HTML document structure - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

HTML

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

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

Ahtml

BHTML5

CHtml

DHTML

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase or mixed case like HTML or Html instead of lowercase html.

Forgetting the exclamation mark or angle brackets.

The correct doctype declaration for HTML5 is <!DOCTYPE html> with lowercase html.

2fill in blank

medium

Complete the code to set the language of the HTML document to English.

HTML

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

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

Alang

Blanguage

Cxml:lang

Dlocale

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'language' or 'locale' instead of 'lang'.

Forgetting to put the attribute on the html tag.

The lang attribute on the <html> tag tells browsers and assistive technologies the language of the page.

3fill in blank

hard

Fix the error in the head section by completing the meta tag for responsive design.

HTML

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="[1]">
  <title>My Page</title>
</head>

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

Awidth=device-width; initial-scale=1.0

Bwidth=device-width, initial-scale=1.0

Cwidth=device-width initial-scale=1.0

Dwidth=device-width: initial-scale=1.0

Attempts:

3 left

💡 Hint

Common Mistakes

Using spaces or semicolons instead of commas between properties.

Missing the initial-scale property.

The viewport meta tag content must separate properties with commas, like width=device-width, initial-scale=1.0.

4fill in blank

hard

Fill both blanks to create a semantic HTML5 document structure with header and main sections.

HTML

<[1]>
  <h1>Welcome</h1>
</[2]>
<main>
  <p>This is the main content.</p>
</main>

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

Aheader

Bfooter

Chead

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Using head instead of header for visible page content.

Using footer or section incorrectly.

The header element is used to group introductory content or navigation links. It must be closed with </header>.

5fill in blank

hard

Fill all three blanks to create a complete HTML5 document with language, charset, and title.

HTML

<!DOCTYPE [1]>
<html [2]="en">
<head>
  <meta charset="[3]">
  <title>Sample Page</title>
</head>
<body>
</body>
</html>

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

Ahtml

Blang

CUTF-8

DHTML

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase 'HTML' in doctype.

Using 'language' instead of 'lang'.

Using wrong charset values like 'utf8' or missing hyphen.

The doctype is html, the language attribute is lang, and the charset is UTF-8 for modern HTML documents.

Practice

1. Which tag defines the root of an HTML document?

easy

A. <body>

B. <head>

C. <title>

D. <html>

Solution

1. Step 1: Understand the role of the root tag

   The root tag wraps the entire HTML content and tells the browser this is an HTML document.

2. Step 2: Identify the root tag

   The <html> tag is the root element that contains all other tags like <head> and <body>.

3. Final Answer:

   <html> -> Option D

4. Quick Check:

   Root tag = <html> [OK]

Hint: Root tag is always <html> wrapping the whole page [OK]

Common Mistakes:

• Confusing <head> as root instead of <html>
• Thinking <body> is the root tag
• Using <title> as root tag

2. Which of the following is the correct way to declare the document type for HTML5?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall the HTML5 doctype declaration

   HTML5 uses a simple doctype declaration to tell browsers to use modern standards.

2. Step 2: Identify the correct syntax

   The correct syntax is exactly <!DOCTYPE html> with uppercase DOCTYPE and lowercase html.

3. Final Answer:

   <!DOCTYPE html> -> Option A

4. Quick Check:

   HTML5 doctype = <!DOCTYPE html> [OK]

Hint: DOCTYPE is uppercase, html lowercase, no version number [OK]

Common Mistakes:

• Writing DOCTYPE in lowercase
• Adding version number like HTML5
• Missing exclamation mark

3. What will the browser display when opening this HTML snippet?

<!DOCTYPE html>
<html>
<head>
  <title>Test Page</title>
</head>
<body>
  <h1>Hello</h1>
  <p>Welcome to the page.</p>
</body>
</html>

medium

A. Only the title 'Test Page' is shown on the page

B. An empty page with no visible content

C. A page with a heading 'Hello' and a paragraph 'Welcome to the page.'

D. An error message because of missing tags

Solution

1. Step 1: Analyze the body content

   The body contains an <h1> with 'Hello' and a <p> with 'Welcome to the page.'

2. Step 2: Understand browser rendering

   Browsers display the content inside the <body> tag as visible page content. The <title> appears in the browser tab, not on the page.

3. Final Answer:

   A page with a heading 'Hello' and a paragraph 'Welcome to the page.' -> Option C

4. Quick Check:

   Body content visible = heading + paragraph [OK]

Hint: Page shows body content, title shows in tab only [OK]

Common Mistakes:

• Thinking <title> shows on the page
• Expecting error from correct tags
• Ignoring body content

4. Identify the error in this HTML structure:

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

medium

A. Missing <title> tag inside <head>

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

C. Extra <body> tag inside <head>

D. DOCTYPE declaration is incorrect

Solution

1. Step 1: Check tag nesting

   The <head> tag is opened but never closed before <body> starts, which breaks structure.

2. Step 2: Confirm correct closing tags

   Proper HTML requires closing <head> before starting <body>. Missing </head> causes parsing issues.

3. Final Answer:

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

4. Quick Check:

   Head must close before body starts [OK]

Hint: Always close <head> before starting <body> [OK]

Common Mistakes:

• Forgetting to close <head>
• Placing <title> outside <head>
• Misplacing DOCTYPE

5. You want to create a valid HTML5 page with a header, main content, and footer. Which structure is correct?

hard

A.

My Page

Site Header
Main content here
Site Footer

B.

My Page
Site Header

Main content here
Site Footer

C.

My Page

Main content here
Site Footer
Site Header

D.

My Page

Site Header
Site Footer

Solution

1. Step 1: Check for required tags and order

   Valid HTML5 requires <!DOCTYPE html>, <html> with lang attribute, <head> with meta charset and title, and <body> with semantic sections.

2. Step 2: Verify semantic tags and placement

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <title>My Page</title>
   </head>
   <body>
     <header>Site Header</header>
     <main>Main content here</main>
     <footer>Site Footer</footer>
   </body>
   </html>

   correctly places <header>, <main>, and <footer> inside <body> and includes meta charset and lang attribute.

3. Final Answer:

   The complete valid HTML5 structure with lang, meta charset, title, header, main, footer -> Option A

4. Quick Check:

   Valid HTML5 = DOCTYPE + lang + meta + semantic tags [OK]

Hint: Use semantic tags inside <body> with proper <head> metadata [OK]

Common Mistakes:

• Placing <header> inside <head>
• Missing lang or meta charset
• Incorrect order of semantic tags