Module 01 HTML ● Beginner → Intermediate ~ 45 min read

HTML5: The Foundation of the Web

HTML is the skeleton of every website on earth. Before you can style or animate anything, you need to understand how to structure content correctly — from the very first line of code to professional semantic markup.

1. The Document Structure

Every HTML file follows a specific "boilerplate" or skeleton. Without these tags, the browser might struggle to render your page correctly.

Declaration

<!DOCTYPE html>

Tells the browser you're using HTML5. Always the first line.

Root Element

<html>

Wraps every other element on the page.

Metadata

<head>

Contains the page title, CSS links, and SEO data — invisible to the user.

Visible Content

<body>

Everything the user sees: text, images, buttons, and forms.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>My first paragraph of content.</p>
</body>
</html>

💡 Pro Tip

Always add lang="en" to your <html> tag. It helps screen readers pronounce content correctly and improves your Google ranking.

2. Essential Text Tags

Text is the core of the web. These tags give your content hierarchy and meaning — not just visual style.

Headings — The Hierarchy

There are six levels of heading, from <h1> (most important) to <h6> (least important). A page should have only one <h1> — it tells Google what the page is about.

html

<h1>Main Page Title (use once)</h1>
<h2>Major Section Heading</h2>
<h3>Sub-section Heading</h3>
<p>This is a paragraph of text.</p>
<p>This is <strong>bold (important)</strong> text.</p>
<p>This is <em>italic (emphasized)</em> text.</p>

Lists — Ordered and Unordered

Organizing data into lists makes content readable. You have two main types:

Ordered List

<ol>

Numbered list (1, 2, 3...). Use for steps and instructions.

Unordered List

<ul>

Bulleted list. Use for features, links, and general items.

html

<!-- Ordered (numbered) -->
<ol>
    <li>Learn HTML</li>
    <li>Learn CSS</li>
    <li>Learn JavaScript</li>
</ol>

<!-- Unordered (bullets) -->
<ul>
    <li>Fast performance</li>
    <li>Responsive design</li>
</ul>

3. Links, Images & Containers

Hyperlinks — <a>

The anchor tag is what makes the "Web" a web — it connects pages together. The href attribute tells the browser where to go.

html

<!-- External link (opens in new tab) -->
<a href="https://google.com" target="_blank">Visit Google</a>

<!-- Internal link (to another page in your project) -->
<a href="about.html">About Page</a>

<!-- Jump to a section on the same page -->
<a href="#contact">Go to Contact Section</a>

Images — <img>

Images are self-closing tags. The alt attribute is not optional — it describes the image for screen readers and is used by Google to understand your image.

html

<img src="logo.png" alt="DevPath company logo" width="200">

Containers — <div> and <span>

As you move into CSS, you'll need "boxes" to group elements so you can style them together.

Block-level

<div>

Groups large sections. Takes up the full width of its parent.

Inline

<span>

Wraps small pieces of text inline, without breaking flow.

4. HTML Forms

Forms are how you collect data from users — login screens, search bars, sign-up pages. Understanding form elements is essential for every web developer.

html

<form action="/submit" method="POST">

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

    <!-- Email input with built-in validation -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="you@example.com">

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

    <!-- Checkbox -->
    <input type="checkbox" id="terms" name="terms">
    <label for="terms">I agree to the terms</label>

    <!-- Submit button -->
    <button type="submit">Create Account</button>

</form>

⚠️ Common Mistake

Always connect a <label> to its <input> using matching for and id values. Without this, clicking the label won't focus the input — and screen readers won't understand what the field is for.

5. Attributes Reference

Attributes provide extra information about an element and always go inside the opening tag. They follow a name="value" pattern.

Attribute	Element(s)	Description
`class`	Any	Target elements for CSS styling or JavaScript. Can be shared by multiple elements.
`id`	Any	A unique identifier for a single element. Used for JS targeting and anchor links.
`href`	<a>	The destination URL for a link.
`src`	<img>, <script>	The source path for an image or script file.
`alt`	<img>	Describes an image for screen readers and SEO. Never skip this.
`target="_blank"`	<a>	Opens the link in a new browser tab.
`required`	<input>	Prevents form submission if the field is empty.
`placeholder`	<input>	Shows hint text inside an empty input field.

6. Semantic HTML & Accessibility

This is where beginners become professionals. Semantic HTML means choosing tags that describe their purpose, not just their appearance. This is how Google understands your content and how screen readers communicate your page to users with disabilities.

The Semantic Page Structure

Page Header

Site logo, navigation bar, and top branding.

Navigation

<nav>

A block of navigation links. Screen readers can jump directly to it.

Primary Content

<main>

The dominant content of the page. Use only once per page.

Standalone Post

Self-contained content like a blog post or news item.

Thematic Group

A thematic grouping of content. Always has a heading.

Page Footer

html — Semantic Page Layout

<body>
    <header>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
        </nav>
    </header>

    <main>
        <article>
            <h1>The Future of Web Development</h1>
            <section>
                <h2>The Rise of AI Tools</h2>
                <p>Developers are increasingly...</p>
            </section>
        </article>
    </main>

    <footer>
        <p>© 2026 DevPath. All rights reserved.</p>
    </footer>
</body>

ℹ️ Interview Question

Q: What's the difference between <section> and <div>?
A: A <div> has no semantic meaning — it's a generic container. A <section> tells browsers, search engines, and screen readers that this is a thematically grouped block of content, typically with its own heading.

7. HTML Tables

Tables display data in rows and columns. They're used for pricing charts, comparison grids, schedules, and any tabular data. Never use tables for page layout — that's what CSS Grid is for.

html — Complete Table

<table>
    <caption>Course Pricing Comparison</caption>
    <thead>
        <tr>
            <th>Plan</th>
            <th>Price</th>
            <th>Features</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Free</td>
            <td>$0</td>
            <td>5 lessons</td>
        </tr>
        <tr>
            <td>Pro</td>
            <td>$29/mo</td>
            <td>All lessons + projects</td>
        </tr>
        <tr>
            <td>Team</td>
            <td>$99/mo</td>
            <td>Everything + team dashboard</td>
        </tr>
    </tbody>
</table>

Table Element Breakdown

Tag	Purpose
`<table>`	The wrapper for the entire table
`<caption>`	Accessible title for the table (screen readers announce it)
`<thead>`	Groups the header row(s)
`<tbody>`	Groups the body rows (the actual data)
`<tfoot>`	Groups the footer row (totals, summaries)
`<tr>`	A single table row
`<th>`	A header cell (bold and centered by default)
`<td>`	A standard data cell

Merging Cells

You can span cells across multiple columns or rows using colspan and rowspan:

html

<tr>
    <td colspan="2">This cell spans 2 columns</td>
</tr>
<tr>
    <td rowspan="3">This cell spans 3 rows</td>
    <td>Normal cell</td>
</tr>

8. Multimedia: Audio, Video & Iframes

Modern HTML5 lets you embed audio, video, and even entire other websites directly into your page — no plugins required.

Video

html

<video controls width="640" poster="thumbnail.jpg">
    <source src="intro.mp4" type="video/mp4">
    <source src="intro.webm" type="video/webm">
    Your browser does not support the video tag.
</video>

Attribute	Effect
`controls`	Shows play/pause/volume buttons
`autoplay`	Starts playing immediately (muted required on most browsers)
`loop`	Replays the video when it ends
`muted`	Starts with sound off
`poster`	Shows an image before the video plays

Audio

html

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

Iframes — Embedding External Content

Iframes let you embed other websites, YouTube videos, or Google Maps directly into your page.

html

<!-- Embed a YouTube video -->
<iframe 
    width="560" height="315"
    src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
    title="YouTube video player"
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write" 
    allowfullscreen>
</iframe>

<!-- Embed a Google Map -->
<iframe 
    src="https://maps.google.com/maps?q=Kathmandu&output=embed" 
    width="600" height="450" 
    style="border:0;" 
    loading="lazy">
</iframe>

Figure & Figcaption

The correct semantic way to pair an image (or video) with a descriptive caption:

html

<figure>
    <img src="chart.png" alt="Revenue growth chart for Q3 2026">
    <figcaption>Fig 1: Revenue growth in Q3 2026</figcaption>
</figure>

9. The <head>: Meta Tags & SEO

What's inside the <head> is invisible to users but critical for Google, social media sharing, and browser behavior. This is the "behind the scenes" of every professional website.

Essential Meta Tags

html — Complete Professional Head

<head>
    <!-- Character encoding (always UTF-8) -->
    <meta charset="UTF-8">

    <!-- Mobile responsiveness (essential) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Page title (shown in browser tab and Google results) -->
    <title>DevPath — Learn Web Development</title>

    <!-- SEO description (shown under the title in Google results) -->
    <meta name="description" content="A free, structured course to learn HTML, CSS, and JavaScript from scratch.">

    <!-- Prevent search engine indexing (for staging sites) -->
    <meta name="robots" content="noindex, nofollow">

    <!-- Favicon (the tiny icon in the browser tab) -->
    <link rel="icon" type="image/png" href="/favicon.png">

    <!-- External CSS file -->
    <link rel="stylesheet" href="styles/main.css">
</head>

Open Graph Tags — Social Media Previews

When someone shares your URL on Facebook, LinkedIn, or Twitter/X, these tags control the preview card:

html

<!-- Open Graph (Facebook, LinkedIn) -->
<meta property="og:title" content="DevPath — Web Development Course">
<meta property="og:description" content="Go from zero to job-ready.">
<meta property="og:image" content="https://devpath.com/social-preview.png">
<meta property="og:url" content="https://devpath.com">
<meta property="og:type" content="website">

<!-- Twitter/X Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="DevPath — Web Development Course">
<meta name="twitter:image" content="https://devpath.com/social-preview.png">

💡 Pro Tip

Use metatags.io to preview exactly how your Open Graph tags will look when shared on social media. Every professional developer checks this before launching a site.

Canonical URLs — Preventing Duplicate Content

html

<!-- Tells Google which version of the page is the "original" -->
<link rel="canonical" href="https://devpath.com/module-1">

10. HTML Entities & Special Characters

Some characters have special meaning in HTML (like < and >). To display them as text, you need to use entity codes.

Character	Entity Code	Name
<	`<`	Less than
>	`>`	Greater than
&	`&`	Ampersand
"	`"`	Double quote
©	`©`	Copyright symbol
™	`™`	Trademark symbol
	` `	Non-breaking space
→	`→`	Right arrow
♥	`&hearts;`	Heart symbol

html — Usage Example

<p>Price: $99 &mdash; Save 20%!</p>
<p>5 &gt; 3 is a true statement.</p>
<footer>&copy; 2026 DevPath. All rights reserved.</footer>

11. Accessibility Deep Dive (a11y)

Accessibility (often abbreviated "a11y" — 11 letters between the 'a' and the 'y') means making your website usable by everyone, including people using screen readers, keyboard-only navigation, or assistive devices. In many countries, it's a legal requirement.

The Golden Rules

Use semantic HTML first — screen readers already understand <nav>, <button>, and <main>.
Every image needs an alt — describe the content, not the file name. If decorative, use alt="".
All interactive elements must be keyboard-accessible — users must be able to Tab through inputs and buttons.
Sufficient color contrast — text must be readable against its background (WCAG AA standard: 4.5:1 ratio).

ARIA Attributes

ARIA (Accessible Rich Internet Applications) attributes give extra context to screen readers when semantic HTML alone isn't enough.

Attribute	Purpose	Example
`aria-label`	Provides a label when no visible text exists	`<button aria-label="Close menu">✕</button>`
`aria-hidden`	Hides decorative elements from screen readers	`<span aria-hidden="true">🎨</span>`
`aria-expanded`	Indicates if a dropdown/accordion is open	`<button aria-expanded="false">Menu</button>`
`role`	Defines the element's purpose	`<div role="alert">Error!</div>`
`aria-live`	Announces dynamic content changes	`<div aria-live="polite">3 results found</div>`

Accessible vs. Inaccessible Code

html — Bad vs. Good

<!-- ❌ BAD: Div pretending to be a button -->
<div onclick="submitForm()" style="cursor:pointer;">Submit</div>

<!-- ✅ GOOD: Real button with accessible label -->
<button type="submit" aria-label="Submit contact form">
    Submit
</button>

<!-- ❌ BAD: Image without alt -->
<img src="team.jpg">

<!-- ✅ GOOD: Descriptive alt text -->
<img src="team.jpg" alt="The DevPath team at their 2026 conference booth">

<!-- ❌ BAD: Link with no context -->
<a href="/report.pdf">Click here</a>

<!-- ✅ GOOD: Descriptive link text -->
<a href="/report.pdf">Download the 2026 Annual Report (PDF)</a>

The Details/Summary Element — Native Accordion

HTML5 gives you a built-in interactive accordion without any JavaScript:

html

<details>
    <summary>What is HTML?</summary>
    <p>HTML stands for HyperText Markup Language. It is the standard
    language for creating web pages and web applications.</p>
</details>

<details open>
    <summary>Is this course free?</summary>
    <p>Yes! All modules are completely free to access.</p>
</details>

ℹ️ Testing Your Accessibility

Tools to check your work:
• Lighthouse (built into Chrome DevTools → Audits tab)
• axe DevTools (free browser extension)
• WAVE (wave.webaim.org — paste any URL to scan)
• Keyboard test — unplug your mouse and navigate your site using only Tab, Enter, and Escape.

←

Previous Course Overview

Next Module CSS3: The Architect

→