First HTML page - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare the document type for an HTML5 page.

HTML

<!DOCTYPE [1]>

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

AHTML

Bhtml

CHtml5

Dhtm

Attempts:

3 left

💡 Hint

Common Mistakes

Writing the doctype in uppercase letters.

Using older doctype declarations like XHTML.

Forgetting the exclamation mark.

The correct declaration for HTML5 is <!DOCTYPE html>. It tells the browser to use HTML5 rules.

2fill in blank

medium

Complete the code to start the HTML document with the root element.

HTML

<[1] lang="en">

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

Abody

Bhead

Chtml

Ddiv

Attempts:

3 left

💡 Hint

Common Mistakes

Using <head> or <body> as the root.

Forgetting to close the <html> tag.

The root element of an HTML document is <html>. It wraps all the content.

3fill in blank

hard

Fix the error in the code to properly include the page title inside the head.

HTML

<head>
  <title>[1]</title>
</head>

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

Atitle

BMy First Page</head>

C<My First Page>

DMy First Page

Attempts:

3 left

💡 Hint

Common Mistakes

Adding extra closing tags inside the title.

Using angle brackets around the title text.

The <title> tag should contain only the text for the page title, no extra tags or closing tags inside.

4fill in blank

hard

Fill both blanks to create a paragraph inside the body with the text 'Hello, world!'.

HTML

<body>
  <[1]>[2]</[1]>
</body>

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

Ap

BHello, world!

Cdiv

DHello world

Attempts:

3 left

💡 Hint

Common Mistakes

Using <div> instead of <p> for paragraphs.

Missing the comma in the text.

The paragraph tag is <p>. The text inside should be exactly 'Hello, world!'.

5fill in blank

hard

Fill all three blanks to create a complete minimal HTML page with a title and a heading.

HTML

<!DOCTYPE [1]>
<[2] lang="en">
<head>
  <title>[3]</title>
</head>
<body>
  <h1>Welcome!</h1>
</body>
</[2]>

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

Ahtml

CMy Page

Dhead

Attempts:

3 left

💡 Hint

Common Mistakes

Using head as the root element.

Forgetting to close the html tag at the end.

The doctype is html, the root element is html, and the title text is 'My Page'.

Practice

1. What is the purpose of the <!DOCTYPE html> declaration at the start of an HTML page?

easy

A. It tells the browser to use the latest HTML standard.

B. It adds a visible title to the page.

C. It creates a link to an external CSS file.

D. It inserts an image into the page.

Solution

1. Step 1: Understand the role of <!DOCTYPE html>

   This declaration tells the browser which version of HTML to use when rendering the page.

2. Step 2: Identify the correct purpose

   The <!DOCTYPE html> specifically signals the browser to use the latest HTML standard (HTML5).

3. Final Answer:

   It tells the browser to use the latest HTML standard. -> Option A

4. Quick Check:

   DOCTYPE = browser standard [OK]

Hint: DOCTYPE always sets HTML version for the browser [OK]

Common Mistakes:

• Thinking DOCTYPE adds visible content
• Confusing DOCTYPE with CSS or images
• Skipping DOCTYPE and causing rendering issues

2. Which of the following is the correct basic structure of an HTML page?

easy

A.

B.

C.

D. <html>

Solution

1. Step 1: Check the order of tags

   The correct HTML page starts with <!DOCTYPE html>, then <html>, inside it <head> and <body>, and ends with </html>.

2. Step 2: Match the correct option

   <!DOCTYPE html><html><head></head><body></body></html> follows this correct order and nesting of tags.

3. Final Answer:

   <!DOCTYPE html><html><head></head><body></body></html> -> Option C

4. Quick Check:

   DOCTYPE, html, head, body order [OK]

Hint: Remember: DOCTYPE, html, head, then body [OK]

Common Mistakes:

• Placing <head> inside <body>
• Missing DOCTYPE declaration
• Incorrect tag nesting order

3. What will the browser display when rendering this HTML code?

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This is my first page.</p>
</body>
</html>

medium

A. A page with a big heading 'Welcome' and a paragraph 'This is my first page.'

B. Only the title 'My Page' is shown on the page body.

C. The page shows the code as text on the screen.

D. The page is blank with no visible content.

Solution

1. Step 1: Identify visible content tags

   The <h1> and <p> tags inside <body> define visible content on the page.

2. Step 2: Understand title vs body content

   The <title> sets the browser tab name, not page body content.

3. Final Answer:

   A page with a big heading 'Welcome' and a paragraph 'This is my first page.' -> Option A

4. Quick Check:

   Body tags show content, title shows tab name [OK]

Hint: Content inside <body> shows on page, title shows in tab [OK]

Common Mistakes:

• Confusing <title> with visible page content
• Expecting code tags to display code as text
• Thinking empty body means content from head shows

4. Find the error in this HTML snippet:

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
</head>
<body>
  <h1>Hello</h2>
  <p>Paragraph here.</p>
</body>
</html>

medium

A. The <title> tag is missing.

B. The paragraph tag is self-closing incorrectly.

C. The <body> tag is not closed.

D. The closing tag for the heading is incorrect.

Solution

1. Step 1: Check tag pairs for matching

   The heading starts with <h1> but closes with </h2>, which is a mismatch.

2. Step 2: Confirm other tags are correct

   The <title>, <body>, and <p> tags are properly opened and closed.

3. Final Answer:

   The closing tag for the heading is incorrect. -> Option D

4. Quick Check:

   Matching tags must open and close the same [OK]

Hint: Opening and closing tags must match exactly [OK]

Common Mistakes:

• Closing tags with wrong numbers (h1 vs h2)
• Forgetting to close body or head tags
• Misusing self-closing tags for paragraphs

5. You want to create a simple HTML page with a header, a navigation menu, main content, and a footer. Which semantic tags should you use to organize these parts correctly?

hard

A. <head>, <menu>, <section>, <bottom>

B. <header>, <nav>, <main>, <footer>

C. <header>, <sidebar>, <article>, <footer>

D. <top>, <nav>, <content>, <footer>

Solution

1. Step 1: Identify semantic tags for page sections

   The standard semantic tags for page layout are <header> for the top section, <nav> for navigation menus, <main> for main content, and <footer> for the bottom section.

2. Step 2: Compare options to correct tags

   <header>, <nav>, <main>, <footer> lists all correct semantic tags for these parts. Other options use incorrect or non-standard tags.

3. Final Answer:

   <header>, <nav>, <main>, <footer> -> Option B

4. Quick Check:

   Use semantic tags for clear page structure [OK]

Hint: Use header, nav, main, footer for page sections [OK]

Common Mistakes:

• Using non-existent tags like <top> or <bottom>
• Confusing <head> with visible header
• Using <menu> instead of <nav>