HTML basics · Lesson 1 of 12 · 7 minutes

HTML basics: Document shell

The doctype selects standards mode; html contains metadata in head and visible content in body.

Open the lab Course map

Mastery 0/3Run itExplain itApply it

Current edit

PreviewNo external resources

Your objectives

Hints are always available. Wrong turns never cost XP.

1
Build document shell
Build this first target: the HTML doctype; <html> (lang="en"). Inspect the structure before checking the lesson.
Hint & worked example
The doctype selects standards mode; html contains metadata in head and visible content in body.
The requested elements, attributes, content, and hierarchy exist outside comments.
```
<!doctype html>
<html lang="en"></html>
```
Common mistake to avoid: A visual appearance alone guarantees the intended HTML meaning.
2
Extend the document shell example
Extend your file to include: the HTML doctype; <html> (lang="en"); <head> inside <html>; <meta> inside <head> (charset="utf-8"); <title> inside <head> containing “Workshop guide”. Inspect the structure before checking the lesson.
Hint & worked example
The doctype selects standards mode; html contains metadata in head and visible content in body.
The requested elements, attributes, content, and hierarchy exist outside comments.
```
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Workshop guide</title></head>
</html>
```
Common mistake to avoid: Replacing semantic elements with generic divs automatically improves accessibility.
3
Verify the complete document shell pattern
Finish the pattern with: the HTML doctype; <html> (lang="en"); <head> inside <html>; <meta> inside <head> (charset="utf-8"); <title> inside <head> containing “Workshop guide”; <body> inside <html>; <h1> inside <body> containing “Workshop guide”; <p> inside <body> containing “Bring a notebook.”. Inspect the structure before checking the lesson.
Hint & worked example
The doctype selects standards mode; html contains metadata in head and visible content in body.
The requested elements, attributes, content, and hierarchy exist outside comments.
```
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Workshop guide</title></head>
<body><h1>Workshop guide</h1><p>Bring a notebook.</p></body>
</html>
```
Common mistake to avoid: A visual appearance alone guarantees the intended HTML meaning.

Understand the pattern

The doctype selects standards mode; html contains metadata in head and visible content in body.

Misconceptions to reject

A visual appearance alone guarantees the intended HTML meaning.
Replacing semantic elements with generic divs automatically improves accessibility.

The preview is a sanitized subset, not a full browser compatibility test.

Worked example and expected result

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Workshop guide</title></head>
<body><h1>Workshop guide</h1><p>Bring a notebook.</p></body>
</html>

The doctype selects standards mode; html contains metadata in head and visible content in body.

Try a variation

Adapt the final example to a different project name while retaining its structure and relationships. A different context still needs a real browser and accessibility check.

Explain it

Which statement correctly explains document shell?Replacing semantic elements with generic divs automatically improves accessibility.The doctype selects standards mode; html contains metadata in head and visible content in body.A visual appearance alone guarantees the intended HTML meaning.

Apply it elsewhere

You reuse document shell in a different project. What must still be verified?The meaning, relationships, and accessible names in the new document.Nothing; passing a single exercise guarantees every future use.Only whether the source code has the same number of lines.

Keep the momentum.

Complete the lab, then explain and apply the pattern.

Next: HTML basics: Page title and language Try an incident drill

Anonymous lesson and mastery progress lasts for this session. Sign in to keep synced lesson XP between sessions; mastery stays device-local. No speed bonus, lost lives, or hint penalties.

Keep learning

MDN: HTML structure