DOCTYPE declaration in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare the document type for HTML5.

HTML

<![1] html>

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

ADOCTYPE

Bdoctype

CDocType

DDoc

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'doctype' instead of uppercase 'DOCTYPE'.

Misspelling the word or using 'DocType'.

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

2fill in blank

medium

Complete the code to start a basic HTML5 document with the correct DOCTYPE declaration.

HTML

[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'

A<!DOCTYPE HTML5>

B<!DOCTYPE html>

C<!doctype html>

D<!DOCTYPE html5>

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'doctype' which may cause quirks mode.

Adding 'HTML5' which is not part of the official declaration.

The DOCTYPE declaration must be exactly <!DOCTYPE html> to ensure the browser uses HTML5 standards.

3fill in blank

hard

Fix the error in the DOCTYPE declaration to make it valid HTML5.

HTML

<![1] html>

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

Adoctype

BDOCTYPE5

CDOCTYPE

DDOCTYPE html

Attempts:

3 left

💡 Hint

Common Mistakes

Including 'html' inside the blank.

Using lowercase 'doctype'.

Adding extra text like 'DOCTYPE5'.

The DOCTYPE declaration must be exactly <!DOCTYPE html>. Adding extra words or lowercase causes errors.

4fill in blank

hard

Fill both blanks to complete the minimal HTML5 document with correct DOCTYPE and language attribute.

HTML

[1]
<html [2]>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>
<body></body>
</html>

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

A<!DOCTYPE html>

Blang="en"

Clang="fr"

D<!doctype html>

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase DOCTYPE.

Using wrong language code like 'fr' when English is expected.

The DOCTYPE declaration must be <!DOCTYPE html> and the lang attribute should be set to "en" for English.

5fill in blank

hard

Fill all three blanks to create a valid HTML5 document with DOCTYPE, language attribute, and meta viewport tag.

HTML

[1]
<html [2]>
<head>
  <meta charset="UTF-8">
  <meta [3]>
  <title>Responsive</title>
</head>
<body></body>
</html>

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

A<!DOCTYPE html>

Blang="en"

Cname="viewport" content="width=device-width, initial-scale=1.0"

Dlang="es"

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase DOCTYPE.

Wrong language code like 'es' instead of 'en'.

Missing or incorrect viewport meta tag.

The DOCTYPE must be <!DOCTYPE html>, the language attribute set to English lang="en", and the viewport meta tag to make the page responsive.

Practice

1. What is the purpose of the <!DOCTYPE html> declaration in an HTML document?

easy

A. It creates a comment in the HTML code.

B. It adds a title to the webpage.

C. It links the CSS stylesheet to the HTML file.

D. It tells the browser to use the latest HTML version to render the page.

Solution

1. Step 1: Understand the role of DOCTYPE

   The DOCTYPE declaration informs the browser about the HTML version to use for rendering.

2. Step 2: Identify the correct purpose

   Only It tells the browser to use the latest HTML version to render the page. correctly states that it tells the browser to use the latest HTML version.

3. Final Answer:

   It tells the browser to use the latest HTML version to render the page. -> Option D

4. Quick Check:

   DOCTYPE declares HTML version = A [OK]

Hint: DOCTYPE tells browser HTML version; always first line [OK]

Common Mistakes:

• Thinking DOCTYPE adds page title
• Confusing DOCTYPE with CSS linking
• Assuming DOCTYPE creates comments

2. Which of the following is the correct syntax for the DOCTYPE declaration in HTML5?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall HTML5 DOCTYPE syntax

   HTML5 uses a simple, short DOCTYPE: <!DOCTYPE html>.

2. Step 2: Compare options

   <!DOCTYPE html> matches the correct HTML5 syntax exactly; others are either older versions or incorrect.

3. Final Answer:

   <!DOCTYPE html> -> Option A

4. Quick Check:

   HTML5 DOCTYPE = <!DOCTYPE html> [OK]

Hint: HTML5 DOCTYPE is always simple: [OK]

Common Mistakes:

• Using old DOCTYPE from HTML4
• Omitting the exclamation mark
• Adding version numbers like html5

3. What will happen if you omit the DOCTYPE declaration at the top of an HTML5 document?

medium

A. The page will display an error message.

B. The page will not load at all.

C. The browser will render the page in quirks mode, causing inconsistent layout.

D. The browser will automatically add the correct DOCTYPE.

Solution

1. Step 1: Understand browser behavior without DOCTYPE

   Without DOCTYPE, browsers enter quirks mode, which can cause layout issues.

2. Step 2: Evaluate options

   The browser will render the page in quirks mode, causing inconsistent layout. correctly describes quirks mode; options A, B, and C are incorrect because the page still loads without error but may render inconsistently.

3. Final Answer:

   The browser will render the page in quirks mode, causing inconsistent layout. -> Option C

4. Quick Check:

   Missing DOCTYPE triggers quirks mode = D [OK]

Hint: No DOCTYPE means quirks mode, causing layout problems [OK]

Common Mistakes:

• Thinking page won't load without DOCTYPE
• Assuming browser fixes missing DOCTYPE automatically
• Expecting error messages in browser

4. Identify the error in this HTML snippet:

<html>
<!DOCTYPE html>
<head></head>
<body>Hello</body>
</html>

medium

A. DOCTYPE declaration must be the very first line before <html> tag.

B. DOCTYPE declaration should be inside the <head> tag.

C. DOCTYPE declaration should be written as without exclamation mark.

D. There is no error; this is correct syntax.

Solution

1. Step 1: Check DOCTYPE placement rules

   DOCTYPE must be the very first line in the document, before the <html> tag.

2. Step 2: Analyze the snippet

   Here, DOCTYPE is placed after <html>, which is incorrect, so DOCTYPE declaration must be the very first line before <html> tag. is correct.

3. Final Answer:

   DOCTYPE declaration must be the very first line before <html> tag. -> Option A

4. Quick Check:

   DOCTYPE first line before html tag = C [OK]

Hint: DOCTYPE always goes before <html> tag at top [OK]

Common Mistakes:

• Placing DOCTYPE inside <html> or <head>
• Omitting the exclamation mark in DOCTYPE
• Assuming DOCTYPE can be anywhere

5. You want to create a valid HTML5 page that works well on all modern browsers. Which of these is the best complete starting template including the DOCTYPE declaration?

hard

A.

Page Title

B.

Page Title

C.

Page Title

D.

Page Title

Solution

1. Step 1: Check DOCTYPE and language attribute

   <!DOCTYPE html> Page Title uses correct DOCTYPE and includes lang="en" for accessibility.

2. Step 2: Verify meta tags for charset and viewport

   <!DOCTYPE html> Page Title includes charset and viewport meta tags, important for modern responsive pages.

3. Step 3: Compare other options

   Page Title places DOCTYPE after , which is wrong. <!DOCTYPE html5> Page Title uses invalid DOCTYPE <!DOCTYPE html5>. <!DOCTYPE html> Page Title lacks lang and viewport meta tag.

4. Final Answer:

   <!DOCTYPE html> Page Title -> Option B

5. Quick Check:

   Valid DOCTYPE + lang + meta tags = A [OK]

Hint: Start with and add lang + meta tags [OK]

Common Mistakes:

• Placing DOCTYPE after <html>
• Using invalid DOCTYPE like
• Forgetting lang attribute or viewport meta