BUILD THE
STRUCTURE

// The foundation of every website.

HTML IS THE SKELETON OF THE WEB.

Every website you've ever visited starts with HTML. It defines the structure, the semantics, and the meaning of content. Without HTML, there is no web.

WHY HTML MATTERS

HTML is not about presentation—it's about meaning. When you use semantic HTML, you create accessible content that works for everyone: screen readers, search engines, and all devices.

MASTER THE MARKUP.

Learn to structure documents properly, create accessible forms, and use the full power of HTML5. Every web developer must know HTML inside and out.

BEGIN YOUR JOURNEY →

// The Path to Mastery

12 lessons. Complete HTML control.

LESSON 01

Introduction to HTML

Learn what HTML is and create your first webpage.

Beginner
LESSON 02

Document Structure

Understand DOCTYPE, head, and body elements.

Beginner
LESSON 03

Text Elements & Headings

Format text and create document hierarchy with headings.

Beginner
LESSON 04

Links and Navigation

Create hyperlinks and navigate between pages.

Beginner
LESSON 05

Images and Media

Add images, video, and audio to your pages.

Beginner
LESSON 06

Lists

Create ordered, unordered, and definition lists.

Beginner
LESSON 07

Tables

Display tabular data with rows and columns.

Intermediate
LESSON 08

Forms and Input

Collect user data with form controls and validation.

Intermediate
LESSON 09

Semantic HTML

Use meaningful elements for better structure and accessibility.

Intermediate
LESSON 10

HTML5 Features

Leverage modern HTML5 elements and new input types.

Intermediate
LESSON 11

Accessibility

Make your websites usable by everyone including screen readers.

Advanced
LESSON 12

Best Practices

Follow standards, validate markup, and optimize for SEO.

Advanced

// Why HTML

HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser. It was created by Tim Berners-Lee in 1991 and has evolved through several versions, with HTML5 being the current standard since 2014.

HTML is not a programming language—it's a markup language that defines the structure of your content. When combined with CSS for styling and JavaScript for interactivity, you have the complete web development stack.

The web starts with HTML. Master it first.

// Tools & References

📖 MDN Web Docs

Comprehensive HTML reference

developer.mozilla.org

🔧 W3C Validator

Check your HTML validity

validator.w3.org

🎨 HTML5 Spec

Official WHATWG standard

html.spec.whatwg.org

🏗️ Can I Use

Browser support tables

caniuse.com

🌐 HTML5 Doctor

Semantic HTML reference

html5doctor.com

⚡ CodePen

Test HTML in browser

codepen.io

// Introduction to HTML

×

What is HTML?

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page and consists of a series of elements or tags.

Why HTML Matters

  • Foundation: Every website uses HTML as its foundation
  • Semantic: Elements describe meaning, not presentation
  • Universal: Works across all browsers and devices
  • Standard: Maintained by W3C and WHATWG
  • Accessible: Built-in support for screen readers
HISTORY: HTML was created by Tim Berners-Lee in 1991. HTML5, the current version, was standardized in 2014 and brought semantic elements, multimedia support, and mobile-friendly features.

Your First HTML Document

<!DOCTYPE html> <html> <head> <title>My First Page</title> </head> <body> <h1>Hello, World!</h1> <p>This is my first webpage.</p> </body> </html>

Key Concepts

  • Elements: Building blocks wrapped in tags like <p>...</p>
  • Attributes: Additional info like href="url" in <a>
  • Nesting: Elements inside other elements
  • Structure: Head contains metadata, body contains visible content

// Knowledge Check

1. HTML stands for _____ Markup Language.

Hint: Not just text

2. The visible content goes in the _____ tag.

Hint: Not head

3. The _____ element contains page metadata.

Hint: Contains title

4. HTML elements are wrapped in _____.

Hint: Angle brackets

Show All Answers

Answers:

  1. HyperText
  2. body
  3. head
  4. tags

// Document Structure

×

The DOCTYPE Declaration

Every HTML document must start with a DOCTYPE declaration. This tells the browser which version of HTML to use. For HTML5, it's simple:

<!DOCTYPE html>

The HTML Element

The <html> element is the root element that wraps all content. Always include the lang attribute for accessibility and SEO:

<html lang="en"> <!-- All content here --> </html>

The Head Section

The <head> contains metadata about the document. This information isn't displayed but is crucial for SEO, styling, and functionality:

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Learn HTML"> <title>Page Title</title> <link rel="stylesheet" href="styles.css"> </head>

Essential Meta Tags

  • charset: Character encoding (UTF-8)
  • viewport: Responsive design settings
  • description: SEO meta description
  • keywords: SEO keywords
  • author: Page author

Complete Document Structure

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document Title</title> </head> <body> <!-- Content goes here --> </body> </html>

// Knowledge Check

1. _____ tells the browser which HTML version to use.

Hint: First line of document

2. The _____ attribute specifies the language.

Hint: On html element

3. _____ is the standard character encoding.

Hint: Unicode

4. The _____ meta tag enables responsive design.

Hint: Mobile-friendly

Show All Answers

Answers:

  1. DOCTYPE
  2. lang
  3. UTF-8
  4. viewport

// Text Elements & Headings

×

Heading Elements

Headings define the structure and hierarchy of your content. There are six levels, from h1 (most important) to h6 (least important):

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

Paragraphs and Text Formatting

<p>This is a paragraph of text.</p> <p>This is <strong>bold</strong> text.</p> <p>This is <em>italic</em> text.</p> <p>This is <mark>highlighted</mark> text.</p> <br> <!-- Line break --> <hr> <!-- Horizontal rule -->

Best Practices for Headings

  • Use only one h1 per page
  • Don't skip heading levels (h1 → h2 → h3)
  • Use headings for structure, not for styling
  • h1 should describe the main topic of the page

// Knowledge Check

1. _____ is the most important heading.

Hint: Main title

2. You should use only _____ h1 per page.

Hint: Single main topic

3. _____ indicates strong importance.

Hint: Bold semantic

4. _____ indicates emphasis.

Hint: Italic semantic

Show All Answers

Answers:

  1. h1
  2. one
  3. strong
  4. em

// Links and Navigation

×

Creating Links with <a>

The anchor element creates hyperlinks to other pages, files, or locations within the same page. The href attribute specifies the destination:

<!-- External link --> <a href="https://example.com">Visit Example</a> <!-- Internal link --> <a href="about.html">About Us</a> <!-- Same-page link --> <a href="#section2">Jump to Section 2</a> <!-- Email link --> <a href="mailto:email@example.com">Send Email</a>

Opening Links in New Tabs

Use target="_blank" to open links in a new tab. For security, always add rel="noopener noreferrer":

<a href="https://example.com" target="_blank" rel="noopener noreferrer"> Open in New Tab </a>

Navigation Structure

Use semantic elements for navigation menus:

<nav> <ul> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> </ul> </nav>

// Knowledge Check

1. The _____ attribute specifies the link destination.

Hint: Hypertext reference

2. _____ opens a link in a new tab.

Hint: Target attribute value

3. The _____ element defines navigation links.

Hint: Navigation

4. _____ prevents security vulnerabilities.

Hint: rel attribute value

Show All Answers

Answers:

  1. href
  2. _blank
  3. nav
  4. noopener

// Images and Media

×

The <img> Element

The image element embeds pictures in your page. It requires the src attribute and should always include alt text:

<img src="photo.jpg" alt="A beautiful sunset over the ocean" width="800" height="600">

Essential Image Attributes

  • src: Path to the image file (required)
  • alt: Alternative text for accessibility (required)
  • width/height: Dimensions in pixels
  • loading: "lazy" for below-fold images

Figure with Caption

<figure> <img src="chart.png" alt="Sales data chart"> <figcaption> Figure 1: Q4 Sales increased by 25% </figcaption> </figure>

// Knowledge Check

1. The _____ attribute specifies the image path.

Hint: Source

2. The _____ attribute provides alternative text.

Hint: Accessibility

3. The _____ element groups images with captions.

Hint: With figcaption

4. loading="_____" defers loading until needed.

Hint: Opposite of eager

Show All Answers

Answers:

  1. src
  2. alt
  3. figure
  4. lazy

// Lists

×

Unordered Lists <ul>

For bullet points where order doesn't matter:

<ul> <li>Apples</li> <li>Bananas</li> <li>Oranges</li> </ul>

Ordered Lists <ol>

For numbered sequences where order matters:

<ol> <li>Preheat oven</li> <li>Mix ingredients</li> <li>Bake for 30 minutes</li> </ol>

Definition Lists <dl>

For key-value pairs like glossaries:

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

// Knowledge Check

1. _____ is for unordered bullet lists.

Hint: Unordered list

2. _____ is for ordered numbered lists.

Hint: Ordered list

3. _____ is the list item element.

Hint: List item

4. _____ is for definition lists.

Hint: Definition list

Show All Answers

Answers:

  1. ul
  2. ol
  3. li
  4. dl

// Tables

×

Basic Table Structure

Tables display tabular data in rows and columns:

<table> <thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>Alice</td> <td>25</td> </tr> </tbody> </table>

Table Elements

  • table: Container for the entire table
  • thead/tbody/tfoot: Header, body, footer sections
  • tr: Table row
  • th: Header cell (bold, centered)
  • td: Data cell

// Knowledge Check

1. _____ is the container for tabular data.

Hint: Main table element

2. _____ defines a table row.

Hint: Table row

3. _____ is a header cell element.

Hint: Table header

4. _____ is a standard data cell.

Hint: Table data

Show All Answers

Answers:

  1. table
  2. tr
  3. th
  4. td

// Forms and Input

×

Form Basics

Forms collect user input and send it to a server:

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

Input Types

  • text: Single-line text input
  • email: Email with validation
  • password: Masked text input
  • number: Numeric input
  • checkbox/radio: Selection controls

// Knowledge Check

1. The _____ element is the container for form controls.

Hint: Main form element

2. The _____ element describes form controls.

Hint: Uses for attribute

3. The _____ attribute makes a field mandatory.

Hint: Must fill

4. _____ is for multiline text input.

Hint: Long text

Show All Answers

Answers:

  1. form
  2. label
  3. required
  4. textarea

// Semantic HTML

×

What is Semantic HTML?

Semantic HTML uses elements that describe the meaning of content, not just its appearance. This makes your code more readable, accessible, and SEO-friendly.

Common Semantic Elements

  • <header>: Page or section header
  • <nav>: Navigation links
  • <main>: Main content of the page
  • <article>: Self-contained content (blog post, news article)
  • <section>: Thematic grouping of content
  • <aside>: Sidebar content
  • <footer>: Page or section footer
<header> <h1>Site Title</h1> <nav>...</nav> </header> <main> <article> <h2>Article Title</h2> <p>Content...</p> </article> </main> <footer> <p>© 2024</p> </footer>

// Knowledge Check

1. The _____ element contains introductory content.

Hint: Site/page intro

2. The _____ element contains navigation links.

Hint: Menu links

3. The _____ element is for self-contained content.

Hint: Blog post

4. The _____ element contains the main content.

Hint: Primary content

Show All Answers

Answers:

  1. header
  2. nav
  3. article
  4. main

// HTML5 Features

×

New Input Types

HTML5 introduced many new input types with built-in validation:

<input type="date"> <input type="time"> <input type="color"> <input type="range" min="0" max="100"> <input type="search">

Data Attributes

Store custom data in HTML elements:

<button data-user-id="123" data-action="delete"> Delete </button>

Details/Summary

Create disclosure widgets without JavaScript:

<details> <summary>Click to expand</summary> <p>Hidden content revealed when clicked.</p> </details>

// Knowledge Check

1. _____ attributes store custom data.

Hint: data- prefix

2. _____ creates disclosure widgets without JS.

Hint: With summary child

3. The _____ attribute shows hint text in inputs.

Hint: Example text

4. _____ shows task completion.

Hint: Loading bar

Show All Answers

Answers:

  1. data-
  2. details
  3. placeholder
  4. progress

// Accessibility

×

Why Accessibility Matters

Web accessibility ensures people with disabilities can use your website. It benefits everyone and is often legally required:

  • 15% of the world's population has a disability
  • Better for mobile users
  • Improves SEO
  • Required by law in many places

Alt Text Best Practices

<!-- Descriptive alt text --> <img src="chart.png" alt="Bar chart showing 25% increase in Q4 sales"> <!-- Decorative image --> <img src="decoration.jpg" alt="">

ARIA Attributes

ARIA enhances accessibility for complex UI:

<button aria-expanded="false" aria-controls="menu"> Toggle Menu </button>

// Knowledge Check

1. _____ text makes images accessible.

Hint: Alternative

2. _____ attributes enhance accessibility.

Hint: Accessible Rich Internet Applications

3. _____ elements describe form controls.

Hint: for attribute

4. Color _____ ensures text is readable.

Hint: Difference between colors

Show All Answers

Answers:

  1. alt
  2. aria
  3. label
  4. contrast

// Best Practices

×

HTML Validation

Always validate your HTML using the W3C Validator. Valid HTML works better across browsers:

  • Use DOCTYPE declaration
  • Include lang attribute on html
  • Close all tags properly
  • Use unique IDs
  • Validate at validator.w3.org

SEO Best Practices

Practice Implementation
Unique h1 per page One main heading
Meta description 150-160 characters
Semantic HTML Proper elements
Alt text For every image

Common Mistakes to Avoid

  • ✗ Using <br> for spacing (use CSS)
  • ✗ Tables for layout (use CSS Grid/Flexbox)
  • ✗ Missing alt attributes
  • ✗ Duplicate IDs
  • ✗ Block inside inline elements
REMEMBER: Write HTML for meaning, CSS for presentation, JavaScript for behavior. Keep concerns separate for maintainable code.

// Knowledge Check

1. Every document needs a _____ declaration.

Hint: First line

2. Use _____ HTML for better SEO.

Hint: Meaningful elements

3. _____ ensures HTML is correct.

Hint: W3C process

4. Keep structure, presentation, and behavior in _____.

Hint: Separate concerns

Show All Answers

Answers:

  1. DOCTYPE
  2. semantic
  3. validation
  4. separation