beginner Step 1 of 15

Introduction to HTML

HTML & CSS

Introduction to HTML

HTML (HyperText Markup Language) is the foundation of every web page. It defines the structure and content of web documents using a system of tags and attributes. Every website you visit — from simple blogs to complex web applications — is built on HTML. Understanding HTML is the essential first step in web development, as CSS styles and JavaScript behavior are both applied to HTML elements. HTML5, the current version, introduced semantic elements, multimedia support, and APIs that make the web more powerful and accessible.

HTML Document Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="My first web page">
    <title>My First Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
            <a href="/contact">Contact</a>
        </nav>
    </header>

    <main>
        <section>
            <h2>About This Page</h2>
            <p>This is a paragraph of text. HTML uses <strong>tags</strong>
               to define the structure of content.</p>

            <ul>
                <li>HTML defines structure</li>
                <li>CSS defines presentation</li>
                <li>JavaScript defines behavior</li>
            </ul>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>

    <script src="app.js" defer></script>
</body>
</html>

Common HTML Elements

<!-- Headings (h1 through h6) -->
<h1>Main Heading</h1>
<h2>Subheading</h2>

<!-- Paragraphs and text formatting -->
<p>This is a <strong>bold</strong> and <em>italic</em> paragraph.</p>
<p>This has a <a href="https://example.com">link</a> inside it.</p>

<!-- Images -->
<img src="photo.jpg" alt="Description of the photo" width="600">

<!-- Lists -->
<ul>  <!-- Unordered list -->
    <li>Item one</li>
    <li>Item two</li>
</ul>

<ol>  <!-- Ordered list -->
    <li>First step</li>
    <li>Second step</li>
</ol>

<!-- Divisions and spans -->
<div class="container">Block-level container</div>
<span class="highlight">Inline container</span>

Pro tip: Always include the lang attribute on the <html> tag for accessibility and SEO. Use the alt attribute on every image for screen readers. The meta viewport tag is essential for mobile-responsive websites. Validate your HTML at validator.w3.org to catch errors.

Key Takeaways

HTML defines the structure of web pages using elements (tags) with attributes.
Every HTML document needs <!DOCTYPE html>, <html>, <head>, and <body> elements.
Use semantic elements (<header>, <main>, <footer>, <nav>) for better accessibility and SEO.
Always include alt text on images and lang on the html element.
HTML provides the structure, CSS provides the styling, and JavaScript provides the behavior.

arrow_back Back to HTML & CSS Next: Text and Typography arrow_forward