HTML Fundamentals - The Structure of Web Pages

Comprehensive guide to HTML (HyperText Markup Language), the foundation of every web page. Learn how to structure content, create accessible markup, and build the skeleton of modern websites.

What is HTML?

HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications. It defines the structure and content of web documents through a system of tags and attributes that tell browsers how to display content.

Basic Document Structure

Every HTML document follows this fundamental structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

Key Components

Essential HTML Elements

Structural Elements

Headings - Hierarchical content organization

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<h4>Minor Section</h4>
<h5>Even Smaller Section</h5>
<h6>Smallest Heading</h6>

Paragraphs and Text

<p>This is a paragraph of text.</p>
<br>  <!-- Line break -->

<!-- Text formatting -->
<strong>Bold text</strong>
<em>Italic text</em>
<u>Underlined text</u>
<mark>Highlighted text</mark>
<small>Small text</small>

Semantic Elements

HTML5 Semantic Elements provide meaning to content:

<header>Website header and navigation</header>
<nav>Main navigation menu</nav>
<main>Primary page content</main>
<aside>Sidebar or supplementary content</aside>
<article>Self-contained article</article>
<section>Thematic grouping of content</section>
<footer>Page footer with copyright, links, etc.</footer>

Lists

Ordered Lists - Numbered sequences

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Unordered Lists - Bulleted items

<ul>
    <li>Bullet point</li>
    <li>Another bullet</li>
    <li>Last bullet</li>
</ul>

Definition Lists - Terms and definitions

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

<!-- Basic link -->
<a href="https://example.com">Visit Example</a>

<!-- Links to sections within page -->
<a href="#section2">Jump to Section 2</a>

<!-- Email links -->
<a href="mailto:[email protected]">Send Email</a>

<!-- Links with attributes -->
<a href="page.html" target="_blank" rel="noopener">Open in new tab</a>

<a href="product.html">
    <img src="product.jpg" alt="Product Image">
</a>

Multimedia Content

Images

<!-- Basic image -->
<img src="image.jpg" alt="Description of image">

<!-- Image with dimensions and attributes -->
<img src="photo.jpg"
     alt="Scenic landscape"
     width="400"
     height="300"
     loading="lazy">

<!-- Picture element for responsive images -->
<picture>
    <source srcset="image-large.jpg" media="(min-width: 800px)">
    <source srcset="image-medium.jpg" media="(min-width: 400px)">
    <img src="image-small.jpg" alt="Responsive image">
</picture>

Audio and Video

<!-- Audio element -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Your browser does not support the audio element.
</audio>

<!-- Video element -->
<video controls width="640" height="480">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Your browser does not support the video element.
</video>

Forms and User Input

Basic Form Structure

<form action="/submit" method="post">
    <!-- Form fields go here -->
    <button type="submit">Submit Form</button>
</form>

Common Input Types

<!-- Text input -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<!-- Email input -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<!-- Password input -->
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<!-- Number input with constraints -->
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" max="120">

<!-- Date picker -->
<label for="birthdate">Birth Date:</label>
<input type="date" id="birthdate" name="birthdate">

<!-- Checkboxes -->
<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">Subscribe to newsletter</label>

<!-- Radio buttons -->
<fieldset>
    <legend>Gender:</legend>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label>
</fieldset>

<!-- Select dropdown -->
<label for="country">Country:</label>
<select id="country" name="country">
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="uk">United Kingdom</option>
</select>

<!-- Textarea -->
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

Form Validation

<!-- HTML5 validation attributes -->
<form>
    <input type="text" required pattern="[A-Za-z]{2,}">
    <input type="email" required>
    <input type="url" required>
    <input type="number" min="1" max="100">

    <!-- Custom validation messages -->
    <input type="password" id="password"
           pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
           title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">

    <!-- Submit button -->
    <button type="submit">Submit</button>
</form>

Advanced HTML Features

Tables

Basic Table

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>30</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>25</td>
            <td>London</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">2 people listed</td>
        </tr>
    </tfoot>
</table>

Embedded Content

<!-- iframe for external content -->
<iframe src="https://www.youtube.com/embed/video-id"
        width="560" height="315"
        frameborder="0" allowfullscreen>
</iframe>

<!-- Canvas for dynamic graphics -->
<canvas id="myCanvas" width="600" height="400"></canvas>

Metadata and SEO

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Brief description of the page">
    <meta name="keywords" content="keyword1, keyword2, keyword3">
    <meta name="author" content="Your Name">

    <!-- Open Graph for social media -->
    <meta property="og:title" content="Page Title">
    <meta property="og:description" content="Description">
    <meta property="og:image" content="image-url">

    <title>Page Title - Site Name</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>

Best Practices

Semantic HTML

Accessibility

Performance

Validation

<!-- Always validate your HTML -->
<!-- Visit https://validator.w3.org/ to check your markup -->

<!-- Comment your code -->
<!-- This is a main navigation section -->
<nav class="main-nav">
    <!-- Code continues... -->
</nav>

Compatibility and Browser Support

Cross-Browser Considerations

HTML Versions

Learning Resources

Tools and Validators

HTML forms the structural foundation of every website. Mastering HTML fundamentals is essential for any web developer, providing the framework upon which CSS styling and JavaScript interactivity are built. Focus on semantic, accessible, and well-structured markup to create websites that work for all users.

This guide covers the core concepts of HTML5. For advanced topics like Web Components, Progressive Web Apps, and APIs, explore the recommended learning resources.

Updated: January 15, 2025
Author: Danial Pahlavan
Category: Web Development