HTML Introduction

HTML Introduction: Building the Skeleton of the Web

Every website you visit—from simple blogs to complex web applications—relies on HTML as its core foundation. HTML (HyperText Markup Language) defines the structure and layout of web content, telling browsers how to display text, images, forms, and interactive elements.

Mental Model / Visual Flowchart

flowchart LR
    A["HTML (Structure)"] --> B["Browser Engine"]
    C["CSS (Styles)"] --> B
    D["JavaScript (Logic)"] --> B
    B --> E["Interactive Web Page"]

Think of a web application like a house:

• HTML is the wooden or steel frame, walls, doors, and room layout.
• CSS is the paint, interior styling, and decorations.
• JavaScript is the electrical wiring, plumbing, and smart appliances that respond to actions.

Without HTML, browsers have no structure to display or render.

Core Syntax & Document Structure

HTML uses tags enclosed in angle brackets (<tagname>) to mark up content. Most tags come in pairs: an opening tag <tag> and a closing tag </tag>.

Here is the standard document skeleton every web page starts with:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <header>
        <h1>Welcome to Web Development</h1>
    </header>
    <main>
        <p>HTML organizes text, links, and media into readable structures for browsers and search engines.</p>
    </main>
</body>
</html>

Key Components Breakdown

1. <!DOCTYPE html>: Tells the browser to render the page using the modern HTML5 standard.
2. <html>: The root container for all elements on the page.
3. <head>: Holds invisible page metadata, page titles, character encodings, and external stylesheet links.
4. <body>: Holds all visual content displayed to the user (headings, paragraphs, images, buttons).

Best Practices

• Never omit <meta charset="UTF-8">: Without proper character encoding, special characters (like emojis or foreign accents) render as broken symbols.
• Use Lowercase Tags: Always write tag names in lowercase (<p>, <div>). While HTML is case-insensitive, lowercase is the universal industry convention.
• Always Include <!DOCTYPE html>: Omitting the doctype forces browsers into "quirks mode," causing unpredictable layout rendering bugs across browsers.

Self-Check Challenge

Create your own index.html file in VS Code or your preferred code editor, add a main heading (<h1>) and a short introduction paragraph (<p>), then open it directly in your web browser to test!