HTML Fundamentals

A Simple Analogy

HTML is like a building's blueprint. It defines the structure: walls, rooms, doors. But the blueprint itself doesn't look pretty—that's CSS's job. HTML says "this is a header," "this is content," "this is a footer."

What Is HTML?

HTML (HyperText Markup Language) is the standard language for creating web pages. It provides structure and semantic meaning to content.

Why Learn HTML?

Foundation: Required for all web development
Accessibility: Proper markup helps screen readers
SEO: Search engines understand semantic HTML
Structure: Organizes content meaningfully
Interactivity: Forms and inputs enable user interaction

Basic Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>My Page</title>
</head>
<body>
    <header>Header content</header>
    <main>Main content</main>
    <footer>Footer content</footer>
</body>
</html>

Common Elements

| Element | Purpose | |---------|---------| | <h1>-<h6> | Headings (h1 largest) | | <p> | Paragraph | | <ul>/<ol> | Lists (unordered/ordered) | | <a> | Links | | <img> | Images | | <form> | User input | | <button> | Clickable button | | <div> | Generic container | | <nav> | Navigation | | <section> | Thematic grouping |

Semantic HTML

<!-- Good: Semantic -->
<header>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
    </nav>
</header>

<main>
    <article>
        <h1>Blog Post</h1>
        <p>Content here...</p>
    </article>
    <aside>Related links...</aside>
</main>

<footer>Copyright 2025</footer>

<!-- Avoid: Non-semantic -->
<div id="header">
    <div id="nav">
        <a href="/">Home</a>
    </div>
</div>

Forms and Inputs

<form action="/submit" method="POST">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    
    <label>
        <input type="checkbox"> Remember me
    </label>
    
    <button type="submit">Login</button>
</form>

Practical Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Product Page</title>
</head>
<body>
    <header>
        <h1>Product Store</h1>
        <nav>
            <a href="/">Home</a>
            <a href="/products">Products</a>
            <a href="/cart">Cart</a>
        </nav>
    </header>
    
    <main>
        <section>
            <h2>Featured Product</h2>
            <article>
                <img src="product.jpg" alt="Product image">
                <h3>Laptop</h3>
                <p>High-performance laptop</p>
                <button>Add to Cart</button>
            </article>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2025 Product Store</p>
    </footer>
</body>
</html>

Best Practices

Use semantic elements: <header>, <nav>, <main>, <footer>
Alt text for images: Accessibility and SEO
Proper heading hierarchy: h1 → h2 → h3
Label form inputs: Improves accessibility
Mobile viewport: <meta name="viewport">

Related Concepts to Explore

HTML5 features and APIs
Accessibility (a11y) and ARIA attributes
Meta tags and SEO
CSS styling and layout
JavaScript interactivity

Summary

HTML provides structure and semantic meaning to web content. Master semantic elements, forms, and accessibility to build accessible, maintainable websites.