HTML Tutorial

Learn HTML from the ground up and build real web pages for the modern web.

HTML (HyperText Markup Language) is the standard markup language used to structure content on the web. Whether you want to become a frontend developer, full-stack developer, software engineer, designer who codes, or simply understand how websites work, HTML is one of the most important technologies to learn.

This tutorial takes you from absolute beginner to advanced HTML concepts through practical examples, explanations, exercises, projects, accessibility guidance, SEO fundamentals, and interview preparation.

Start here if you're new to web development

You don't need previous HTML experience. If you've never written a web page before, start with Getting Started and follow the learning path in order.

What You'll Learn

By completing this HTML tutorial, you'll learn how to:

Create your first HTML document
Understand HTML elements, tags, and attributes
Structure text and page content
Create links and navigation
Add and optimize images
Build ordered and unordered lists
Create accessible tables
Build forms and form controls
Use semantic HTML
Embed audio and video
Work with external and embedded content
Configure the HTML <head>
Improve accessibility
Understand HTML's role in SEO
Improve page performance
Apply HTML security best practices
Use modern HTML features
Connect HTML with CSS and JavaScript
Work with browser APIs
Build internationalized websites
Follow professional HTML conventions
Build real-world projects
Practice with coding challenges
Prepare for HTML interviews

Prerequisites

Do I need programming experience?

No.

HTML is a markup language rather than a traditional programming language. You can start learning HTML even if you've never written code before.

You only need:

A computer
A modern web browser
A code editor
Curiosity
Willingness to practice

We recommend using a modern browser such as:

Google Chrome
Mozilla Firefox
Microsoft Edge
Safari

For code editing, you can use editors such as Visual Studio Code or another editor you prefer.

HTML Learning Roadmap

The tutorial is organized into progressive sections.

You can follow the sections from top to bottom or jump directly to a topic you're interested in.

1. Getting Started

Start by understanding what HTML is and how a basic web page works.

Topics include:

What is HTML?
HTML vs HTML5
How websites work
How browsers process HTML
Creating your first HTML file
Basic document structure
DOCTYPE
<html>
<head>
<body>
Saving and opening HTML files
Choosing a code editor
Developer tools
Your first web page

👉 Start: Getting Started

2. HTML Syntax

Learn the building blocks of HTML.

Topics include:

Elements
Tags
Attributes
Opening and closing tags
Nested elements
Void elements
Boolean attributes
Comments
Whitespace
Character references
Case sensitivity
Valid HTML
Common syntax mistakes

👉 Learn HTML Syntax

3. Text and Content

Learn how to structure readable content.

Topics include:

Headings
Paragraphs
Line breaks
Horizontal rules
Bold and strong text
Italic and emphasized text
Quotes
Code
Preformatted text
Superscript and subscript
Marked text
Abbreviations
Dates and times

👉 Learn Text and Content

4. Links and Navigation

Learn how users move between pages and resources.

Topics include:

Hyperlinks
Absolute URLs
Relative URLs
Internal links
External links
Email links
Telephone links
Fragment identifiers
Download links
Navigation menus
target
rel
Link security

👉 Learn Links and Navigation

5. Images

Learn how to add images correctly and efficiently.

Topics include:

The <img> element
src
alt
Width and height
Responsive images
srcset
<picture>
Image formats
Image accessibility
Lazy loading
Image performance
Decorative images

👉 Learn HTML Images

6. Lists

Learn how to represent collections of information.

Topics include:

Unordered lists
Ordered lists
Description lists
Nested lists
Navigation lists
Accessible list structures
Common list patterns

👉 Learn HTML Lists

7. Tables

Learn how to represent structured tabular information.

Topics include:

Tables
Rows and cells
Table headers
<thead>
<tbody>
<tfoot>
rowspan
colspan
Captions
Accessible tables
Responsive tables
Common table mistakes

👉 Learn HTML Tables

8. Forms

Forms are one of the most important parts of interactive websites.

Learn how to collect and submit user information safely and accessibly.

Topics include:

<form>
Text inputs
Email inputs
Password fields
Number inputs
Date and time inputs
Checkboxes
Radio buttons
Select menus
Textareas
Buttons
Labels
Fieldsets
Form validation
Required fields
Input constraints
Autocomplete
Form submission
Accessible forms

👉 Learn HTML Forms

9. Semantic HTML

Semantic HTML gives your content meaningful structure.

Instead of treating every part of a page as a generic container, semantic elements communicate the purpose of content to browsers, assistive technologies, search engines, and developers.

Topics include:

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
<figure>
<figcaption>
<address>
Semantic headings
Landmark regions
Generic containers
Semantic vs non-semantic markup

👉 Learn Semantic HTML

10. Audio and Video

Learn how to add multimedia without relying entirely on third-party plugins.

Topics include:

<audio>
<video>
<source>
Controls
Autoplay
Muted playback
Looping
Captions
Subtitles
Poster images
Multiple formats
Accessible multimedia
Media performance

👉 Learn Audio and Video

11. Embedded Content

Learn how HTML can include external or specialized content.

Topics include:

<iframe>
Embedded webpages
Maps
Videos
External applications
Sandboxing
Permissions
Security considerations
Responsive embeds

👉 Learn Embedded Content

12. The HTML <head>

The <head> contains important information about your document that isn't normally displayed as page content.

Topics include:

<title>
<meta>
Character encoding
Viewport configuration
Description
Robots directives
Canonical URLs
Open Graph metadata
Social sharing metadata
Favicons
Stylesheets
Scripts
Resource hints

👉 Learn HTML Head

13. Accessibility

Accessible HTML helps people with different abilities use websites and web applications.

You'll learn:

Accessible names
Semantic elements
Heading hierarchy
Labels
Alternative text
Keyboard navigation
Focus
Form accessibility
Tables
Links
Buttons
Screen reader considerations
ARIA fundamentals
Accessible multimedia
Common accessibility mistakes

👉 Learn HTML Accessibility

info

Semantic HTML should usually be your first accessibility tool. Use appropriate HTML elements before reaching for ARIA.

14. HTML and SEO

HTML provides important structural information that search engines can use when understanding a page.

Topics include:

Page titles
Meta descriptions
Headings
Semantic structure
Links
Canonical URLs
Structured content
Images
alt text
Crawlability
Search-friendly HTML
Common SEO mistakes

👉 Learn HTML for SEO

15. HTML Performance

Learn how HTML structure can affect page loading and user experience.

Topics include:

Resource loading
Image optimization
Lazy loading
Script loading
defer
async
Preload
Preconnect
Responsive images
Critical resources
Reducing unnecessary markup
Performance-friendly HTML

👉 Learn HTML Performance

16. HTML Security

HTML is part of the security boundary of every web application.

Learn important concepts including:

Safe external links
rel="noopener"
iframe sandboxing
Content Security Policy concepts
Form security considerations
User-generated HTML
HTML injection
Cross-site scripting fundamentals
Safe embedding
Security headers overview

👉 Learn HTML Security

warning

HTML alone cannot secure a web application. Security must be handled across the frontend, backend, browser, APIs, authentication systems, infrastructure, and deployment environment.

17. Modern HTML

Explore modern HTML capabilities and patterns.

Topics include:

Modern semantic elements
Responsive images
Native dialogs
<details>
<summary>
<template>
<picture>
<source>
Data attributes
Custom data
Modern form features
Progressive enhancement

👉 Learn Modern HTML

18. HTML with CSS

HTML provides structure.

CSS provides presentation.

Together, they form the foundation of frontend development.

You'll learn how HTML connects with:

CSS selectors
Classes
IDs
Layout
Flexbox
Grid
Responsive design
Typography
Components
Forms
UI design

👉 HTML with CSS

19. HTML with JavaScript

JavaScript adds behavior and interactivity to HTML documents.

You'll learn the relationship between HTML and:

JavaScript
DOM
Events
Event handlers
Forms
Dynamic content
DOM manipulation
Browser APIs
Modules

👉 HTML with JavaScript

20. Web APIs and HTML

Modern browsers provide APIs that work alongside HTML.

Explore concepts such as:

DOM APIs
Fetch API
Web Storage
History API
URL API
Geolocation
Clipboard
Notifications
Web Workers
Web Components
Form APIs

👉 HTML and Web APIs

21. Internationalization

Learn how to build HTML documents that work well for international audiences.

Topics include:

lang
dir
Right-to-left languages
Unicode
Character encoding
Language metadata
International dates
International numbers
Multilingual websites
Localization fundamentals

👉 Learn HTML Internationalization

22. HTML Best Practices

Learn conventions used in professional web projects.

Topics include:

Semantic markup
Consistent formatting
Maintainable HTML
Accessibility
Performance
SEO
Security
Responsive design
Progressive enhancement
Avoiding unnecessary elements
Writing meaningful class names
Validating HTML
Code review practices

👉 HTML Best Practices

23. HTML Projects

Build practical projects from beginner to advanced.

Beginner Projects

Personal profile page
Resume page
Simple landing page
Recipe page
Blog article
Product information page
Contact page

Intermediate Projects

Portfolio website
Documentation page
Product landing page
Pricing page
Registration form
Event website
FAQ page
Multi-page website

Advanced Projects

Accessible documentation website
Responsive business website
Content-heavy blog
Product marketing site
Dashboard structure
Job application interface
Educational platform interface

👉 Build HTML Projects

24. HTML Challenges

Test your knowledge with practical coding challenges.

Challenges cover:

HTML syntax
Text
Links
Images
Forms
Tables
Semantic HTML
Accessibility
SEO
Multimedia
Page structure

Try to solve the challenge before looking at the solution.

👉 Practice HTML Challenges

25. HTML Interview Preparation

Prepare for frontend and web-development interviews.

Topics include:

HTML fundamentals
HTML5
Semantic HTML
Accessibility
Forms
SEO
Performance
Security
Browser behavior
DOM fundamentals
Common interview questions
Practical interview exercises

👉 HTML Interview Preparation

26. HTML Reference

Find information about:

Elements
Attributes
Global attributes
Form controls
Input types
Semantic elements
Multimedia elements
Metadata elements
Accessibility-related attributes
Browser compatibility concepts

👉 Open HTML Reference

27. HTML Quiz

Check how much you've learned.

The quiz covers the complete HTML learning path.

Questions include:

Beginner fundamentals
Syntax
Elements
Attributes
Forms
Semantic HTML
Accessibility
SEO
Performance
Security
Modern HTML

👉 Take the HTML Quiz

HTML in the Modern Web Stack

HTML is the first layer of the web platform.

┌───────────────────────────────┐
│       Web Application         │
├───────────────────────────────┤
│       JavaScript / TS         │
│     Behavior & Application    │
├───────────────────────────────┤
│             CSS               │
│       Presentation & UI       │
├───────────────────────────────┤
│            HTML               │
│      Structure & Content      │
├───────────────────────────────┤
│          Browser              │
├───────────────────────────────┤
│        Operating System       │
└───────────────────────────────┘

A common frontend learning progression is:

HTML → CSS → JavaScript → TypeScript → React → Backend → Databases → Full Stack

However, you don't need to learn every technology in that exact order. Your learning path can depend on the type of development you want to pursue.

HTML Example

Here is a simple but properly structured HTML document:

index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1"
    />

    <meta
      name="description"
      content="A simple HTML example"
    />

    <title>My First Web Page</title>
  </head>

  <body>
    <header>
      <h1>Welcome to My Website</h1>

      <nav aria-label="Main navigation">
        <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 page demonstrates the basic structure of
          a modern HTML document.
        </p>
      </section>
    </main>

    <footer>
      <p>&copy; 2026 My Website</p>
    </footer>
  </body>
</html>

This example demonstrates several important concepts:

Document type declaration
Language declaration
Character encoding
Responsive viewport configuration
Metadata
Page title
Semantic elements
Navigation
Headings
Paragraphs
Footer content

You will learn each concept in detail throughout this tutorial.

Try It Yourself

The best way to learn HTML is to experiment.

Start with this:

index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Hello, World!</title>
  </head>

  <body>
    <h1>Hello, World!</h1>

    <p>
      I am learning HTML.
    </p>
  </body>
</html>

Save the file as:

index.html

Then open it in your browser.

You have just created a web page.

HTML and Accessibility

HTML isn't only about making content appear on a screen.

Good HTML should communicate structure and meaning.

For example, prefer:

index.html
<button type="button">
  Submit
</button>

over using a generic element as a button:

index.html
<div>
  Submit
</div>

The first example gives browsers and assistive technologies meaningful information about the element's purpose.

This principle becomes increasingly important as your websites become more complex.

HTML and SEO

Search engines need to understand the structure and meaning of your content.

Good HTML can help communicate:

What the page is about
Which content is most important
How sections are organized
Which links point to other resources
What images represent
What language the document uses

SEO is broader than HTML alone, but well-structured HTML is an important part of a search-friendly website.

HTML and Web Standards

When learning HTML, you'll encounter standards and specifications maintained by organizations and communities across the web platform.

Important resources include:

WHATWG HTML Living Standard
W3C accessibility resources
MDN Web Docs
Browser developer documentation

This tutorial focuses on practical HTML knowledge while encouraging you to understand the underlying web platform.

For Beginners

If some of the terminology looks unfamiliar, don't worry.

You don't need to memorize every HTML element.

Focus on understanding:

What the element represents
When to use it
How to structure it
How to make it accessible
How it interacts with CSS and JavaScript

You will naturally remember frequently used elements as you build projects.

For Experienced Developers

If you already know basic HTML, you can skip directly to advanced topics.

Recommended sections:

Practice Philosophy

At CodeHarborHub, the goal isn't just to read tutorials.

The goal is:

Learn
  ↓
Understand
  ↓
Write Code
  ↓
Break Things
  ↓
Debug
  ↓
Practice
  ↓
Build Projects
  ↓
Review
  ↓
Teach Others

Don't worry about making mistakes.

Errors are a normal part of becoming a developer.

Section	Topic	Level
01	Getting Started	Beginner
02	HTML Syntax	Beginner
03	Text & Content	Beginner
04	Links & Navigation	Beginner
05	Images	Beginner
06	Lists	Beginner
07	Tables	Beginner
08	Forms	Beginner
09	Semantic HTML	Intermediate
10	Audio & Video	Intermediate
11	Embedded Content	Intermediate
12	HTML Head	Intermediate
13	Accessibility	Intermediate
14	SEO	Intermediate
15	Performance	Advanced
16	Security	Advanced
17	Modern HTML	Advanced
18	HTML + CSS	Intermediate
19	HTML + JavaScript	Intermediate
20	Web APIs	Advanced
21	Internationalization	Advanced
22	Best Practices	Advanced
23	Projects	All Levels
24	Challenges	All Levels
25	Interview Preparation	Intermediate+
26	HTML Reference	All Levels
27	Quiz	All Levels

Ready to Start?

If you're completely new to HTML, begin here:

👉 Start the HTML Tutorial →

If you've already learned the basics, jump into:

Keep Building

Learning HTML is only the beginning.
Build websites.
Inspect real websites.
Read other people's code.
Use browser developer tools.
Practice accessibility.
Experiment with semantic elements.
Build projects.
Then move on to CSS and JavaScript.

Keep learning. Keep building. Keep contributing.

CodeHarborHub

CodeHarborHub provides open-source learning resources for developers at different stages of their journey. Explore tutorials, projects, challenges, roadmaps, and community resources to continue developing your skills.

What You'll Learn​

Prerequisites​

HTML Learning Roadmap​

Beginner Projects​

Intermediate Projects​

Advanced Projects​

HTML in the Modern Web Stack​

HTML Example​

Try It Yourself​

HTML and Accessibility​

HTML and SEO​

HTML and Web Standards​

For Beginners​

For Experienced Developers​

Practice Philosophy​

Quick Navigation​

Ready to Start?​

Keep Building​

What You'll Learn

Prerequisites

HTML Learning Roadmap

Beginner Projects

Intermediate Projects

Advanced Projects

HTML in the Modern Web Stack

HTML Example

Try It Yourself

HTML and Accessibility

HTML and SEO

HTML and Web Standards

For Beginners

For Experienced Developers

Practice Philosophy

Quick Navigation

Ready to Start?

Keep Building