Prince HTML Academy — 40 Modules Complete Course

Module 01: HTML Basics

Document structure, DOCTYPE, html, head, body tags

What You Will Learn

Every HTML document starts with a basic structure. Understanding this skeleton is the foundation of web development.

Core Tags

<!DOCTYPE html>Declares the document as HTML5

<html>Root element of the page

<head>Contains metadata (not visible on page)

<body>Contains all visible content

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

Practice

Create a new file called index.html and type this exact code. Open it in your browser.

Module 02: Head Section

Title, meta, link, style, and script tags

What You Will Learn

The <head> section holds crucial information about your webpage that browsers and search engines need.

Head Tags

<title>Page title shown in browser tab

<meta charset>Character encoding (UTF-8 recommended)

<meta viewport>Makes page responsive on mobile

<meta description>SEO description for search engines

<link rel="stylesheet">Links external CSS file

<link rel="icon">Sets the browser tab favicon

<style>Internal CSS styles

<script>JavaScript code or external JS link

HTML

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn HTML with Prince Academy">
    <title>My Awesome Website</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="favicon.ico">
</head>

Practice

Add a viewport meta tag and a custom description to your page head.

Module 03: Text Elements

Headings, paragraphs, line breaks, horizontal rules

What You Will Learn

Text is the backbone of the web. Learn how to structure it properly with headings and paragraphs.

Text Tags

<h1> to <h6>Headings from largest (h1) to smallest (h6)

<p>Paragraph block of text

<br>Line break (single, no closing tag)

<hr>Horizontal rule / thematic break

HTML

<h1>Main Title</h1>
<h2>Subsection</h2>
<h3>Sub-subsection</h3>
<p>This is a paragraph of text.</p>
<p>This is another paragraph.<br>With a line break inside.</p>
<hr>
<p>Content after a horizontal line.</p>

Practice

Create a page with all 6 heading levels and 3 paragraphs separated by horizontal rules.

Module 04: Text Formatting

Bold, italic, underline, strikethrough, sub, sup

What You Will Learn

Make your text stand out with formatting tags. Learn the difference between semantic and presentational tags.

Formatting Tags

<strong>Important text (bold, semantic)

<b>Bold text (presentational)

<em>Emphasized text (italic, semantic)

<i>Italic text (presentational)

<u>Underlined text

<del>Deleted/strikethrough text

<ins>Inserted/underlined text

<sub>Subscript (H₂O)

<sup>Superscript (x²)

<small>Smaller text (fine print)

HTML

<p><strong>Warning:</strong> This is important.</p>
<p>Water formula: H<sub>2</sub>O</p>
<p>Math: x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>
<p>Price: <del>$99</del> <ins>$49</ins></p>
<p><small>Terms and conditions apply.</small></p>

Practice

Write a product description using strong, em, del, ins, sub, and sup tags.

Module 05: Lists

Ordered lists, unordered lists, definition lists

What You Will Learn

Lists organize information. HTML has three types: ordered, unordered, and definition lists.

List Tags

<ul>Unordered list (bullets)

<ol>Ordered list (numbers/letters)

<li>List item (inside ul or ol)

<dl>Definition list

<dt>Definition term

<dd>Definition description

HTML

<!-- Unordered List -->
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<!-- Ordered List with type -->
<ol type="A">
    <li>Step One</li>
    <li>Step Two</li>
    <li>Step Three</li>
</ol>

<!-- Definition List -->
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

Practice

Create a nested list: a main list of 3 programming languages, each with 2 framework sub-items.

Module 06: Links & Anchors

Hyperlinks, internal links, external links, mailto

What You Will Learn

Links connect the web. Learn to create hyperlinks, internal anchors, email links, and download links.

Link Attributes

href="URL"Destination address

target="_blank"Open in new tab

target="_self"Open in same tab (default)

downloadTriggers file download

rel="nofollow"Tells search engines not to follow

HTML

<!-- External Link -->
<a href="https://google.com" target="_blank">Visit Google</a>

<!-- Internal Link -->
<a href="about.html">About Page</a>

<!-- Anchor Link -->
<a href="#section2">Jump to Section 2</a>
<h2 id="section2">Section 2</h2>

<!-- Email Link -->
<a href="mailto:someone@email.com">Send Email</a>

<!-- Download Link -->
<a href="file.pdf" download>Download PDF</a>

Practice

Create a navigation menu with 4 links: Home, About, Contact (mailto), and a Resume download.

Module 07: Images

img tag, src, alt, width, height, figure, figcaption

What You Will Learn

Images make websites visual. Learn the img tag, responsive images, and figure captions.

Image Tags & Attributes

<img>Image element (self-closing)

src=""Image source URL or path

alt=""Alternative text for accessibility

width=""Image width in pixels

height=""Image height in pixels

loading="lazy"Lazy load for performance

<figure>Self-contained content container

<figcaption>Caption for a figure

HTML

<!-- Basic Image -->
<img src="photo.jpg" alt="A beautiful sunset" width="400" height="300">

<!-- Lazy Loaded Image -->
<img src="big-image.jpg" alt="Large photo" loading="lazy">

<!-- Figure with Caption -->
<figure>
    <img src="chart.png" alt="Sales chart">
    <figcaption>Figure 1: Annual Sales Growth</figcaption>
</figure>

Practice

Add 3 images to your page with proper alt text. Wrap one in a figure with a figcaption.

Module 08: Tables

Table, tr, th, td, thead, tbody, tfoot, colspan, rowspan

What You Will Learn

Tables display tabular data. Learn to create rows, columns, headers, and merge cells.

Table Tags

<table>Table container

<thead>Table header group

<tbody>Table body group

<tfoot>Table footer group

<tr>Table row

<th>Table header cell

<td>Table data cell

colspan=""Span across multiple columns

rowspan=""Span across multiple rows

HTML

<table border="1">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>25</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td colspan="2">Data Missing</td>
        </tr>
    </tbody>
</table>

Practice

Create a 4x4 table with student grades. Use colspan and rowspan at least once.

Module 09: Forms Basics

Form tag, action, method, input types

What You Will Learn

Forms collect user input. Learn the form element and its essential attributes.

Form Attributes

<form>Form container

action=""URL where data is sent

method="GET"Data in URL (for search)

method="POST"Data in body (secure)

enctype=""Encoding for file uploads

autocomplete="on"Browser auto-fill

novalidateSkip HTML5 validation

HTML

<form action="/submit" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    
    <button type="submit">Submit</button>
</form>

Practice

Create a contact form with Name, Email, and Message fields using proper labels.

Module 10: Form Inputs

Text, password, email, number, date, color

What You Will Learn

HTML5 introduced many new input types for better user experience and built-in validation.

Input Types

type="text"Single-line text

type="password"Hidden characters

type="email"Email with validation

type="number"Numeric input

type="tel"Telephone number

type="url"URL with validation

type="date"Date picker

type="time"Time picker

type="color"Color picker

type="range"Slider control

type="file"File upload

type="search"Search field

HTML

<input type="text" placeholder="Your name">
<input type="email" placeholder="you@email.com">
<input type="password" placeholder="Password">
<input type="number" min="1" max="100">
<input type="date">
<input type="color" value="#ff0000">
<input type="range" min="0" max="10">
<input type="file" accept=".pdf,.doc">

Practice

Build a registration form using at least 6 different input types.

Module 11: Form Controls

Checkbox, radio, select, textarea, button

What You Will Learn

Beyond text inputs, forms need checkboxes, radio buttons, dropdowns, and text areas.

Form Controls

<input type="checkbox">Multiple selections allowed

<input type="radio">Single selection only

<select>Dropdown list

<option>Item in a select list

<optgroup>Grouped options

<textarea>Multi-line text input

<button>Clickable button

<datalist>Autocomplete suggestions

HTML

<!-- Checkbox -->
<label><input type="checkbox" name="hobby" value="coding"> Coding</label>
<label><input type="checkbox" name="hobby" value="gaming"> Gaming</label>

<!-- Radio -->
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>

<!-- Select -->
<select name="country">
    <option value="">Choose...</option>
    <option value="us">USA</option>
    <option value="uk">UK</option>
</select>

<!-- Textarea -->
<textarea rows="4" cols="50" placeholder="Your message..."></textarea>

Practice

Create a pizza order form with size (radio), toppings (checkbox), and delivery notes (textarea).

Module 12: Form Attributes

Placeholder, required, pattern, min, max

What You Will Learn

Control how form inputs behave with powerful HTML5 attributes for validation and UX.

Input Attributes

placeholder=""Hint text inside input

requiredField must be filled

readonlyCannot be edited

disabledGrayed out, not submitted

pattern="[A-Za-z]+"Regex validation

min="" max=""Minimum and maximum values

step=""Increment step for numbers

maxlength=""Maximum character count

minlength=""Minimum character count

autofocusAuto-focus on page load

autocomplete="off"Disable auto-fill

multipleAllow multiple selections

HTML

<input type="text" placeholder="Username" required minlength="3" maxlength="20">
<input type="email" placeholder="Email" required autofocus>
<input type="number" min="18" max="99" step="1" placeholder="Age">
<input type="text" pattern="[A-Za-z]{3,}" title="Only letters, min 3 chars">
<input type="file" accept="image/*" multiple>

Practice

Create a validated signup form: username (3-15 chars, letters only), password (min 8), age (18-100).

Module 13: Semantic HTML

Header, nav, main, section, article, aside, footer

What You Will Learn

Semantic HTML gives meaning to your structure. It helps SEO, accessibility, and code readability.

Semantic Tags

<header>Introductory content / nav

<nav>Navigation links

<main>Primary content (one per page)

<section>Thematic grouping of content

<article>Self-contained content (blog post)

<aside>Sidebar / tangentially related content

<footer>Footer for section or page

<address>Contact information

HTML

<body>
    <header>
        <nav>
            <a href="#">Home</a>
            <a href="#">About</a>
        </nav>
    </header>
    <main>
        <article>
            <h1>Blog Post Title</h1>
            <p>Content here...</p>
        </article>
        <aside>
            <h3>Related Posts</h3>
        </aside>
    </main>
    <footer>
        <p>&copy; 2026 My Site</p>
    </footer>
</body>

Practice

Rebuild your page using only semantic tags. No divs allowed for structure!

Module 14: Media Elements

Audio, video, source, track, embed

What You Will Learn

Embed audio and video natively in HTML5 without plugins like Flash.

Media Tags

<audio>Audio player

<video>Video player

<source>Media source file

<track>Subtitles/captions

<embed>External content (plugin)

controlsShow play/pause buttons

autoplayAuto-play on load

loopRepeat playback

mutedStart muted

preload="auto"Preload media

HTML

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

<!-- Video -->
<video width="640" height="360" controls poster="thumb.jpg">
    <source src="movie.mp4" type="video/mp4">
    <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

Practice

Add a video player with controls and a poster image. Add an audio player below it.

Module 15: iFrames

iframe, src, width, height, sandbox

What You Will Learn

iFrames embed external web pages or content inside your page.

iFrame Attributes

<iframe>Inline frame container

src=""Source URL to embed

width="" height=""Dimensions

frameborder="0"Remove border

allowfullscreenAllow full screen mode

loading="lazy"Lazy load iframe

sandbox=""Security restrictions

srcdoc=""Inline HTML content

HTML

<!-- Embed a YouTube Video -->
<iframe width="560" height="315" 
    src="https://www.youtube.com/embed/VIDEO_ID" 
    frameborder="0" 
    allowfullscreen>
</iframe>

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

<!-- Secure Sandbox -->
<iframe src="external.html" sandbox="allow-scripts"></iframe>

Practice

Embed a YouTube video and a Google Map on your page using iframes.

Module 16: Div & Span

Block vs inline, div containers, span styling

What You Will Learn

Div and span are generic containers. Understanding block vs inline is crucial for layout.

Container Tags

<div>Block-level container (full width)

<span>Inline container (within text)

display: blockStarts on new line, takes full width

display: inlineFlows with text, width by content

display: inline-blockInline flow but block properties

HTML

<!-- Block: div -->
<div style="background: #333; padding: 20px;">
    <p>This div is a block container.</p>
</div>

<!-- Inline: span -->
<p>The word <span style="color: red;">important</span> is highlighted.</p>

<!-- Grouping -->
<div class="card">
    <h3>Card Title</h3>
    <p>Card content with <span class="badge">NEW</span> label.</p>
</div>

Practice

Create a card layout with a div container, and use span to highlight keywords inside paragraphs.

Module 17: HTML Entities

Special characters, symbols, non-breaking space

What You Will Learn

Special characters and symbols that can't be typed directly need HTML entities.

Common Entities

&Ampersand &

<Less than <

>Greater than >

®Registered ®

™Trademark ™

 Non-breaking space

€Euro sign €

£Pound sign £

¥Yen sign ¥

&hearts;Heart ♥

—Em dash —

HTML

<p>5 &lt; 10 and 10 &gt; 5</p>
<p>Copyright &copy; 2026 Prince Academy</p>
<p>Price: &euro;99.99 or &pound;85.00</p>
<p>Made with &hearts; by Prince</p>
<p>This&nbsp;word&nbsp;won't&nbsp;break</p>
<!-- Displaying code -->
<p>Use &lt;div&gt; for containers.</p>

Practice

Create a footer with copyright, trademark, and a heart symbol. Show HTML code inside a paragraph.

Module 18: Comments & Metadata

HTML comments, meta tags, charset, viewport

What You Will Learn

Comments help document code. Meta tags tell browsers and search engines about your page.

Comments & Meta

HTML comment (not rendered)

<meta charset="UTF-8">Character set

<meta name="viewport">Responsive viewport

<meta name="description">Page description for SEO

<meta name="keywords">Keywords (less important now)

<meta name="author">Page author

<meta http-equiv="refresh">Auto-refresh page

<meta property="og:title">Open Graph for social sharing

HTML

<!-- This is a comment -->
<!-- TODO: Add navigation menu -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn HTML from scratch">
    <meta name="author" content="Prince Academy">
    <meta property="og:title" content="Prince HTML Academy">
    <meta property="og:image" content="banner.jpg">
</head>

Practice

Add comments to your HTML explaining each section. Add Open Graph meta tags for social sharing.

Module 19: Blockquote & Cite

Quotations, citations, abbreviations, definitions

What You Will Learn

Quote and cite sources properly. Use semantic tags for quotations and definitions.

Quote & Cite Tags

<blockquote>Long quotation (block level)

<q>Short inline quotation

<cite>Title of creative work

<abbr>Abbreviation with title

<dfn>Definition term

<address>Contact information

HTML

<blockquote cite="https://example.com">
    <p>The only way to do great work is to love what you do.</p>
    <footer>— <cite>Steve Jobs</cite></footer>
</blockquote>

<p>He said, <q>HTML is the backbone of the web.</q></p>

<p><abbr title="HyperText Markup Language">HTML</abbr> is essential.</p>

<p><dfn>Semantic HTML</dfn> gives meaning to structure.</p>

<address>
    Prince Academy<br>
    Email: <a href="mailto:hello@prince.com">hello@prince.com</a>
</address>

Practice

Create a testimonials section with 2 blockquotes, an abbreviation, and your contact address.

Module 20: Code & Pre

Code blocks, preformatted text, kbd, samp, var

What You Will Learn

Display code snippets and preformatted text with proper semantic tags.

Code Tags

<code>Inline code snippet

<pre>Preformatted text (preserves spaces)

<kbd>Keyboard input

<samp>Sample output

<var>Variable in math/programming

HTML

<!-- Inline code -->
<p>Use the <code>console.log()</code> function.</p>

<!-- Code block -->
<pre><code>
function greet(name) {
    return "Hello, " + name + "!";
}
console.log(greet("World"));
</code></pre>

<!-- Keyboard shortcuts -->
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>

<!-- Variables -->
<p>The area of a circle is <var>pi</var><var>r</var><sup>2</sup>.</p>

Practice

Create a tutorial page showing HTML code inside pre+code blocks and keyboard shortcuts using kbd.

Module 21: Details & Summary

Collapsible content, dialog, progress, meter

What You Will Learn

Create interactive collapsible content, dialogs, and progress indicators.

Interactive Tags

<details>Collapsible content container

<summary>Visible heading for details

<dialog>Modal dialog box

<progress>Progress bar

<meter>Scalar measurement gauge

HTML

<!-- Accordion / FAQ -->
<details>
    <summary>What is HTML?</summary>
    <p>HTML stands for HyperText Markup Language.</p>
</details>

<details open>
    <summary>Why learn HTML?</summary>
    <p>It's the foundation of every website.</p>
</details>

<!-- Progress Bar -->
<label>Uploading: <progress value="70" max="100">70%</progress></label>

<!-- Meter Gauge -->
<label>Disk Usage: <meter value="0.6">60%</meter></label>

<!-- Dialog (requires JS to show) -->
<dialog id="myDialog">
    <p>This is a modal dialog!</p>
    <button onclick="this.closest('dialog').close()">Close</button>
</dialog>

Practice

Create an FAQ section with 3 details/summary pairs and a progress bar showing 45%.

Module 22: Time & Data

Time tag, data tag, machine-readable formats

What You Will Learn

Make dates, times, and data machine-readable for browsers and search engines.

Time & Data Tags

<time>Machine-readable date/time

datetime=""ISO 8601 format

<data>Machine-readable data value

value=""Machine-readable value

HTML

<!-- Time Tag -->
<p>Published on <time datetime="2026-06-12">June 12, 2026</time>.</p>

<p>Meeting at <time datetime="14:30">2:30 PM</time>.</p>

<p>Event: <time datetime="2026-12-25T00:00:00">Christmas 2026</time></p>

<!-- Data Tag -->
<p>Product ID: <data value="SKU-12345">#12345</data></p>

<p>Price: <data value="49.99">$49.99</data></p>

<!-- ISO 8601 Formats -->
<!-- Date: YYYY-MM-DD -->
<!-- Time: HH:MM:SS -->
<!-- DateTime: YYYY-MM-DDTHH:MM:SS -->

Practice

Create a blog post meta section with published date, reading time, and product price using time and data tags.

Module 23: Mark & Wbr

Highlighting text, word breaks, ruby annotations

What You Will Learn

Highlight text, control word breaks, and add ruby annotations for East Asian typography.

Text Enhancement Tags

<mark>Highlighted/marked text

<wbr>Word break opportunity

<ruby>Ruby annotation container

<rt>Ruby text (pronunciation)

<rp>Fallback for browsers without ruby

HTML

<!-- Highlighted Text -->
<p>Search results for <mark>HTML5</mark> tags.</p>

<!-- Word Break -->
<p>Supercalifragilisticexpialidocious<wbr>is a long word.</p>

<!-- Ruby Annotation -->
<ruby>
    漢 <rt>かん</rt>
    字 <rt>じ</rt>
</ruby>

<!-- Ruby with Fallback -->
<ruby>
    漢字
    <rp>(</rp><rt>かんじ</rt><rp>)</rp>
</ruby>

Practice

Create a search results page highlighting keywords with mark. Add a very long URL with wbr breaks.

Module 24: Canvas Basics

Canvas element, 2D context, drawing shapes

What You Will Learn

The canvas element lets you draw graphics, charts, and animations with JavaScript.

Canvas Basics

<canvas>Drawing surface

getContext("2d")Get 2D rendering context

fillRect()Draw filled rectangle

strokeRect()Draw rectangle outline

fillText()Draw text

arc()Draw circle/arc

beginPath()Start a new path

stroke()Draw the path

HTML + JS

<canvas id="myCanvas" width="400" height="200"></canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Fill rectangle
ctx.fillStyle = '#6366f1';
ctx.fillRect(50, 50, 100, 80);

// Draw circle
ctx.beginPath();
ctx.arc(250, 90, 40, 0, 2 * Math.PI);
ctx.fillStyle = '#ec4899';
ctx.fill();

// Draw text
ctx.fillStyle = '#fff';
ctx.font = '20px Poppins';
ctx.fillText('Hello Canvas!', 120, 160);
</script>

Practice

Draw a smiley face on canvas using arcs for eyes and mouth, and a fillRect for the face.

Module 25: SVG Graphics

SVG element, shapes, paths, viewBox

What You Will Learn

SVG (Scalable Vector Graphics) creates crisp graphics that scale to any size.

SVG Elements

<svg>SVG container

viewBox=""Coordinate system

<rect>Rectangle

<circle>Circle

<ellipse>Ellipse

<line>Straight line

<polyline>Connected lines

<polygon>Closed shape

<path>Complex shapes

<text>Text in SVG

HTML

<svg width="200" height="200" viewBox="0 0 200 200">
    <rect x="10" y="10" width="80" height="80" fill="#6366f1" rx="10" />
    <circle cx="150" cy="50" r="40" fill="#ec4899" />
    <line x1="10" y1="120" x2="190" y2="120" stroke="#f59e0b" stroke-width="4" />
    <polygon points="100,140 120,190 80,190" fill="#22c55e" />
    <text x="50" y="170" fill="white" font-size="16">SVG!</text>
</svg>

Practice

Create an SVG icon set: a star, a heart, and a checkmark using polygon and path elements.

Module 26: Data Attributes

Custom data attributes, dataset API

What You Will Learn

Custom data attributes let you store extra info in HTML elements for JavaScript to use.

Data Attributes

data-*=""Custom data attribute

datasetJavaScript property to access

element.dataset.nameAccess data-name in JS

HTML + JS

<!-- HTML -->
<div class="product" 
     data-id="123" 
     data-price="49.99" 
     data-category="electronics">
    Wireless Headphones
</div>

<button id="showData">Show Data</button>

<script>
const product = document.querySelector('.product');
const btn = document.getElementById('showData');

btn.addEventListener('click', () => {
    console.log(product.dataset.id);       // "123"
    console.log(product.dataset.price);    // "49.99"
    console.log(product.dataset.category); // "electronics"
});
</script>

Practice

Create 3 product cards with data attributes for price, rating, and stock. Use JS to display them on click.

Module 27: ARIA Accessibility

Roles, labels, landmarks, screen readers

What You Will Learn

ARIA (Accessible Rich Internet Applications) makes your website usable for everyone, including screen reader users.

ARIA Roles

role="banner"Site header

role="navigation"Nav links

role="main"Main content

role="complementary"Sidebar content

role="contentinfo"Footer info

aria-label=""Accessible label

aria-hidden="true"Hide from screen readers

aria-expanded=""State of expandable content

HTML

<!-- Accessible Navigation -->
<nav role="navigation" aria-label="Main Menu">
    <a href="#" aria-current="page">Home</a>
    <a href="#">About</a>
</nav>

<!-- Accessible Button -->
<button aria-label="Close menu" onclick="toggleMenu()">
    <i class="fas fa-times" aria-hidden="true"></i>
</button>

<!-- Accessible Alert -->
<div role="alert" aria-live="polite">
    Your changes have been saved.
</div>

Practice

Add ARIA labels to your navigation, form, and buttons. Test with a screen reader if possible.

Module 28: SEO Best Practices

Meta descriptions, Open Graph, structured data

What You Will Learn

Optimize your HTML for search engines to rank higher and get more visitors.

SEO Meta Tags

<title>Page title (50-60 chars)

meta descriptionSnippet in search results

meta robotsIndex/noindex instructions

canonicalPreferred URL version

og:titleSocial media title

og:imageSocial media image

twitter:cardTwitter card type

<h1>One per page, main keyword

HTML

<head>
    <title>Learn HTML - Free Complete Course | Prince Academy</title>
    <meta name="description" content="Master HTML from scratch...">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://princeacademy.com/html">
    
    <!-- Open Graph -->
    <meta property="og:title" content="Learn HTML Course">
    <meta property="og:description" content="Free HTML course...">
    <meta property="og:image" content="banner.jpg">
    <meta property="og:type" content="website">
    
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:creator" content="@princeacademy">
</head>

Practice

Add complete SEO meta tags to your page including Open Graph and Twitter cards.

Module 29: HTML Templates

Template tag, slot, shadow DOM basics

What You Will Learn

HTML templates let you define reusable content that isn't rendered until cloned by JavaScript.

Template Tags

<template>Hidden reusable HTML fragment

<slot>Placeholder in shadow DOM

content.cloneNode(true)Clone template content

shadowRootEncapsulated DOM tree

HTML + JS

<!-- Define Template -->
<template id="card-template">
    <div class="card">
        <h3></h3>
        <p></p>
    </div>
</template>

<div id="card-container"></div>

<script>
const template = document.getElementById('card-template');
const container = document.getElementById('card-container');

const clone = template.content.cloneNode(true);
clone.querySelector('h3').textContent = 'Card Title';
clone.querySelector('p').textContent = 'Card description.';
container.appendChild(clone);
</script>

Practice

Create a template for a product card with image, title, and price. Clone it 3 times with different data.

Module 30: Web Components Intro

Custom elements, shadow DOM, HTML imports

What You Will Learn

Web Components let you create reusable custom HTML elements with encapsulated styles and behavior.

Web Components

customElements.define()Register custom element

connectedCallback()When element added to DOM

attachShadow()Create shadow DOM

<slot>Content projection

HTML + JS

<hello-world name="Prince"></hello-world>

<script>
class HelloWorld extends HTMLElement {
    connectedCallback() {
        const name = this.getAttribute('name') || 'World';
        this.innerHTML = `<h2>Hello, ${name}!</h2>`;
    }
}
customElements.define('hello-world', HelloWorld);
</script>

Practice

Create a custom user-card element that accepts name, role, and avatar attributes.

Module 31: MathML Basics

Mathematical markup, fractions, roots, matrices

What You Will Learn

MathML lets you display mathematical formulas directly in HTML without images.

MathML Tags

<math>Math container

<mrow>Horizontal group

<mi>Identifier (variable)

<mo>Operator

<mn>Number

<mfrac>Fraction

<msup>Superscript

<msqrt>Square root

HTML

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mrow>
        <mi>x</mi>
        <mo>=</mo>
        <mfrac>
            <mrow>
                <mo>-</mo>
                <mi>b</mi>
                <mo>±</mo>
                <msqrt>
                    <mrow>
                        <msup><mi>b</mi><mn>2</mn></msup>
                        <mo>-</mo>
                        <mn>4</mn><mi>a</mi><mi>c</mi>
                    </mrow>
                </msqrt>
            </mrow>
            <mrow><mn>2</mn><mi>a</mi></mrow>
        </mfrac>
    </mrow>
</math>

Practice

Write the Pythagorean theorem (a² + b² = c²) using MathML.

Module 32: Microdata & RDFa

Schema.org, itemscope, itemprop, vocabularies

What You Will Learn

Microdata adds structured data that search engines use to create rich snippets.

Microdata Attributes

itemscopeCreates a new item

itemtype=""Schema.org vocabulary URL

itemprop=""Property name

itemref=""Reference external properties

HTML

<!-- Person Schema -->
<div itemscope itemtype="https://schema.org/Person">
    <h2 itemprop="name">Prince</h2>
    <img itemprop="image" src="photo.jpg" alt="Prince">
    <p itemprop="jobTitle">Web Developer</p>
    <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
        <span itemprop="addressLocality">New York</span>
    </div>
</div>

<!-- Product Schema -->
<div itemscope itemtype="https://schema.org/Product">
    <h2 itemprop="name">HTML Course</h2>
    <span itemprop="price">$49.99</span>
    <span itemprop="priceCurrency">USD</span>
</div>

Practice

Add Person schema to your about page and Product schema to a course listing.

Module 33: HTML Validation

W3C validator, common errors, best practices

What You Will Learn

Validate your HTML to catch errors and ensure cross-browser compatibility.

Validation Best Practices

W3C Validatorvalidator.w3.org

DOCTYPEAlways declare HTML5

lang attrSet language on html tag

alt textEvery image needs alt

closing tagsClose all non-void tags

quotesUse double quotes for attributes

HTML

<!-- CORRECT -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Valid Page</title>
</head>
<body>
    <img src="photo.jpg" alt="Description" width="400">
    <p>This is <strong>valid</strong> HTML.</p>
</body>
</html>

<!-- COMMON ERRORS TO AVOID -->
<!-- Missing alt on images -->
<!-- Unclosed tags -->
<!-- Duplicate IDs -->
<!-- Missing DOCTYPE -->

Practice

Run your HTML through the W3C validator. Fix any errors or warnings found.

Module 34: Performance Tips

Lazy loading, preload, prefetch, resource hints

What You Will Learn

Optimize your HTML for faster loading and better user experience.

Performance Attributes

loading="lazy"Defer image loading

preloadPriority load critical resources

prefetchLoad next page resources

asyncLoad script without blocking

deferDefer script execution

dns-prefetchPre-resolve DNS

HTML

<!-- Preload critical font -->
<link rel="preload" href="fonts/main.woff2" as="font" type="font/woff2" crossorigin>

<!-- Prefetch next page -->
<link rel="prefetch" href="about.html">

<!-- DNS Prefetch -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">

<!-- Lazy Images -->
<img src="photo.jpg" alt="Photo" loading="lazy">

<!-- Async Script -->
<script src="analytics.js" async></script>

<!-- Defer Script -->
<script src="app.js" defer></script>

Practice

Add preload for your main font, lazy loading for images below the fold, and defer for non-critical JS.

Module 35: Responsive Images

Picture element, srcset, sizes, art direction

What You Will Learn

Serve the right image size for every device with responsive image techniques.

Responsive Image Tags

<picture>Art direction container

<source>Different image sources

srcset=""Multiple resolution images

sizes=""Image display sizes

media=""Media query condition

HTML

<!-- Art Direction with Picture -->
<picture>
    <source media="(min-width: 800px)" srcset="hero-large.jpg">
    <source media="(min-width: 400px)" srcset="hero-medium.jpg">
    <img src="hero-small.jpg" alt="Hero image">
</picture>

<!-- Resolution Switching -->
<img srcset="photo-400.jpg 400w,
              photo-800.jpg 800w,
              photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1000px) 50vw,
            33vw"
     src="photo-800.jpg"
     alt="Responsive photo">

Practice

Create a hero section that shows a wide banner on desktop and a cropped portrait on mobile using picture.

Module 36: HTML Email

Email-safe HTML, tables for layout, inline styles

What You Will Learn

HTML email uses table-based layouts for maximum compatibility across email clients.

Email HTML Rules

<table>Primary layout tool

inline CSSNo external stylesheets

width=""Table cell widths

alt=""All images need alt

no JSJavaScript does not work

600pxMax recommended width

HTML

<table width="600" cellpadding="0" cellspacing="0" border="0" align="center">
    <tr>
        <td bgcolor="#6366f1" style="padding: 20px; text-align: center;">
            <h1 style="color: white; margin: 0;">Welcome!</h1>
        </td>
    </tr>
    <tr>
        <td style="padding: 30px; font-family: Arial, sans-serif;">
            <p style="color: #333;">Thanks for joining Prince Academy.</p>
            <a href="#" style="background: #6366f1; color: white; padding: 12px 24px; text-decoration: none; display: inline-block; border-radius: 4px;">Get Started</a>
        </td>
    </tr>
</table>

Practice

Create a newsletter email template with a header, body text, and a CTA button using table layout.

Module 37: Progressive Enhancement

Graceful degradation, feature detection

What You Will Learn

Build websites that work for everyone, regardless of browser or device capabilities.

Progressive Enhancement

semantic HTMLWorks without CSS/JS

feature detectionCheck before using new features

noscriptContent for no-JS browsers

pictureFallback image formats

type="module"Modern JS with fallback

HTML

<!-- Works without JS -->
<form action="/search" method="GET">
    <input type="search" name="q" placeholder="Search...">
    <button type="submit">Search</button>
</form>

<!-- Fallback for no JS -->
<noscript>
    <p>Please enable JavaScript for the best experience.</p>
</noscript>

<!-- Picture with fallback -->
<picture>
    <source srcset="image.avif" type="image/avif">
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="Photo">
</picture>

<!-- Modern JS with fallback -->
<script type="module" src="app.mjs"></script>
<script nomodule src="app.js"></script>

Practice

Build a search form that works without JavaScript. Add a noscript message and image format fallbacks.

Module 38: HTML APIs

Geolocation, localStorage, drag & drop, web workers

What You Will Learn

HTML5 provides powerful APIs that work with JavaScript for advanced functionality.

HTML5 APIs

Geolocation APIGet user location

localStorageStore data in browser

sessionStorageStore data per session

Drag & Dropdraggable attribute

Web WorkersBackground JavaScript

NotificationsBrowser notifications

HTML + JS

<!-- Geolocation -->
<button onclick="getLocation()">Get Location</button>
<p id="loc"></p>

<script>
function getLocation() {
    navigator.geolocation.getCurrentPosition(pos => {
        document.getElementById('loc').textContent =
            `Lat: ${pos.coords.latitude}, Lon: ${pos.coords.longitude}`;
    });
}

// localStorage
localStorage.setItem('username', 'Prince');
const user = localStorage.getItem('username');

// Drag & Drop
// Add draggable="true" to any element
</script>

Practice

Create a page that stores a user's name in localStorage and greets them on return visits.

Module 39: Security Basics

CSP, XSS prevention, HTTPS, sandboxing

What You Will Learn

Protect your users and your site with security best practices in HTML.

Security Practices

HTTPSAlways use SSL/TLS

sandboxRestrict iframe capabilities

rel="noopener"Prevent tabnabbing

autocomplete="off"Don't save sensitive data

CSRF tokensPrevent cross-site request forgery

input type="password"Mask sensitive input

HTML

<!-- Secure External Links -->
<a href="https://external.com" target="_blank" rel="noopener noreferrer">
    External Link
</a>

<!-- Secure iFrame -->
<iframe src="widget.html" sandbox="allow-scripts"></iframe>

<!-- Secure Form -->
<form action="/login" method="POST" autocomplete="off">
    <input type="hidden" name="csrf_token" value="abc123">
    <input type="text" name="username" autocomplete="username">
    <input type="password" name="password" autocomplete="current-password">
</form>

<!-- Content Security Policy (in meta) -->
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; script-src 'self'">

Practice

Add noopener to all external links. Create a secure login form with CSRF token and autocomplete off.

Module 40: Build & Deploy

Minification, bundling, hosting, GitHub Pages

What You Will Learn

Prepare your HTML for production with minification, bundling, and deployment.

Build & Deploy

minificationRemove whitespace and comments

gzipCompress files on server

GitHub PagesFree static hosting

NetlifyDrag & drop deployment

VercelFrontend deployment platform

.htaccessServer configuration

HTML + Config

<!-- Before minification -->
<!-- 
    This is my awesome website
    Created by Prince Academy
-->
<div class="container">
    <h1>  Hello World  </h1>
</div>

<!-- After minification -->
<div class="container"><h1>Hello World</h1></div>

<!-- .htaccess for caching -->
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/html "access plus 1 hour"
    ExpiresByType image/jpeg "access plus 1 year"
</IfModule>

Practice

Deploy your completed HTML project to GitHub Pages or Netlify. Share the live URL!

Learn HTMLBecome a Web Developer

Setup Your Coding Environment

Option A: Acode (Android Phone)

Option B: VS Code (Computer)

HTML Course Modules

Module 01: HTML Basics

What You Will Learn

Core Tags

Practice

Module 02: Head Section

What You Will Learn

Head Tags

Practice

Module 03: Text Elements

What You Will Learn

Text Tags

Practice

Module 04: Text Formatting

What You Will Learn

Formatting Tags

Practice

Module 05: Lists

What You Will Learn

List Tags

Practice

Module 06: Links & Anchors

What You Will Learn

Link Attributes

Practice

Module 07: Images

What You Will Learn

Image Tags & Attributes

Practice

Module 08: Tables

What You Will Learn

Table Tags

Practice

Module 09: Forms Basics

What You Will Learn

Form Attributes

Practice

Module 10: Form Inputs

What You Will Learn

Input Types

Practice

Module 11: Form Controls

What You Will Learn

Form Controls

Practice

Module 12: Form Attributes

What You Will Learn

Input Attributes

Practice

Module 13: Semantic HTML

What You Will Learn

Semantic Tags

Practice

Module 14: Media Elements

What You Will Learn

Media Tags

Practice

Module 15: iFrames

What You Will Learn

iFrame Attributes

Practice

Module 16: Div & Span

What You Will Learn

Container Tags

Practice

Module 17: HTML Entities

What You Will Learn

Common Entities

Practice

Module 18: Comments & Metadata

What You Will Learn

Comments & Meta

Practice

Module 19: Blockquote & Cite

What You Will Learn

Quote & Cite Tags

Learn HTML
Become a Web Developer