Lesson

HTML Introduction

5 min reading

Free Course

HTML Introduction: Building the Skeleton of Web Pages

HTML (HyperText Markup Language) defines the structure and meaning of content on a web page. Every website relies on HTML to tell web browsers how to display headings, paragraphs, links, images, and forms.

Think of a website as a building. HTML forms the walls, doors, and floor plan. CSS applies the paint, typography, and layout spacing. JavaScript adds interactive behavior like form validation, menus, and live updates.

flowchart LR
    A["HTML (Document Structure)"] --> B["Browser Parser"]
    C["CSS (Visual Styling)"] --> B
    D["JavaScript (Interactivity)"] --> B
    B --> E["Rendered Web Page"]

How Browsers Read HTML Documents

When you open a web address, the browser downloads an .html file from a server. It reads the markup from top to bottom and builds an internal tree called the Document Object Model (DOM).

Each HTML tag creates a node in that tree. Screen readers and search engines also read this structure to understand which text is a main heading, a navigation menu, or body copy.

Your First HTML5 Page

Every modern web page starts with a standard HTML5 skeleton. Save this code in a file named index.html and open it in any browser:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
</head>
<body>
    <header>
        <h1>Welcome to HTML5</h1>
    </header>
    <main>
        <p>HTML organizes text, links, and media into a clear page structure.</p>
    </main>
</body>
</html>

The DOCTYPE html line switches the browser into modern standards mode. Inside the root html element, the head holds metadata like character encoding and the browser tab title, while body holds everything visitors see on screen.

Common Mistakes to Avoid

Skipping the DOCTYPE declaration: Missing DOCTYPE pushes older browsers into quirks mode and breaks box sizing.
Forgetting meta charset="UTF-8": Without UTF-8 encoding, currency symbols, accents, and emojis can turn into broken characters.
Using uppercase tag names: Write lowercase tags like body and p to match modern HTML5 team conventions.