HTML Structure

Lesson 4

Every HTML page has a skeleton

An HTML document is organized into a few important parts. The browser reads the setup in the head and displays the content from the body.

Document type
The html root element
Head metadata
Visible body content
Containers with div

Starter file

A clean HTML document

The document starts with <!DOCTYPE html>. After that, the <html> element wraps the full page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My page</title>
</head>
<body>
    <h1>Hello HTML</h1>
    <p>This content is visible in the browser.</p>
</body>
</html>

Head

The head prepares the page

The <head> element stores information the browser needs before showing the page. This includes the title, character encoding, viewport settings, favicons, stylesheets, and some scripts.

<head>
    <meta charset="UTF-8">
    <title>HTML Structure</title>
    <link rel="stylesheet" href="styles.css">
</head>

Body

The body holds what users see

The <body> element contains headings, paragraphs, images, links, buttons, forms, and other visible content.

<body>
    <header>Page intro</header>
    <main>Main lesson content</main>
    <footer>Copyright information</footer>
</body>

Containers

Use div when no semantic tag fits

The <div> element is a generic container. It is useful for grouping content, but semantic elements like <header>, <main>, <section>, and <footer> should be used when they describe the content better.

Good semantic choice

<section>
    <h2>Lesson topic</h2>
</section>

Generic wrapper

<div class="card">
    <p>Reusable card content</p>
</div>

Checkpoint

Build the skeleton first

Before adding details, create the doctype, html, head, and body. That structure gives every lesson page a stable base.