Home / Courses / HTML Complete Masterclass: Beginner to …
Frontend & UI

HTML Complete Masterclass: Beginner to Professional

A practical, project-based HTML course that starts with your first webpage and progresses through semantic HTML, accessible forms, media, metadata, structured data, and production-ready page architecture.

  • Bigyan Ghimire
  • Beginner
  • 20+ hours
  • 10 modules
  • 6 views

This comprehensive HTML course teaches the structure and meaning of the web, from the first HTML document to a complete multi-page website. Lessons combine explanations, runnable examples, expected results, practical exercises and project checkpoints.

You will learn to write maintainable semantic markup, build accessible forms, work with media, understand browser behaviour and prepare pages for search engines and sharing. HTML is the foundation; CSS and JavaScript are introduced only where they help explain how the technologies work together.

What You'll Learn

  • Understand how browsers parse HTML documents
  • Build semantic, accessible pages using modern HTML elements
  • Create forms with suitable input types and validation
  • Embed images, audio, video and responsive media
  • Improve metadata, SEO foundations and social previews
  • Build a complete multi-page website structure

Requirements

  • A modern web browser
  • A code editor such as VS Code
  • No prior HTML or programming experience required
Module 01 of 10

Getting Started with the Web and HTML

Understand the browser, editor, files and the role of HTML.

Understand the browser, editor, files and the role of HTML.

Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.

In This Module

Lesson 1.1 · Module 01

What HTML Is and How the Web Works

Learn what HTML does, how a browser requests a page, and how HTML differs from CSS and JavaScript.

What you will learn

  • Learn what HTML does, how a browser requests a page, and how HTML differs from CSS and JavaScript.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

HTML describes document structure and meaning. CSS controls presentation, while JavaScript adds behaviour. A browser parses the HTML document and builds a document tree that other browser systems use.

Code example

<!doctype html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <title>My First Page</title>\n  </head>\n  <body>\n    <h1>Hello, web!</h1>\n    <p>This is my first HTML page.</p>\n  </body>\n</html>

Expected result

A page heading and paragraph appear in the browser.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 1.2 · Module 01

Install a Code Editor and Organize Files

Create a project folder, save an HTML file, and open it in a browser.

What you will learn

  • Create a project folder, save an HTML file, and open it in a browser.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

Use descriptive file names and keep related assets in folders. An HTML file is plain text; the .html extension tells the operating system and editor how to treat it.

Code example

project/\n  index.html\n  about.html\n  images/\n  styles/\n  scripts/

Expected result

Create index.html and open it locally.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 1.3 · Module 01

Your First HTML Document

Recognize the doctype, html, head and body elements.

What you will learn

  • Recognize the doctype, html, head and body elements.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

The doctype enables standards mode. The html element is the document root, head contains document metadata, and body contains visible page content.

Code example

<!doctype html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1">\n  <title>Welcome</title>\n</head>\n<body>\n  <h1>Welcome</h1>\n</body>\n</html>

Expected result

Change the title and heading, save, and refresh.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 1.4 · Module 01

Elements, Tags, Attributes and Nesting

Distinguish opening tags, closing tags, attributes, and nested elements.

What you will learn

  • Distinguish opening tags, closing tags, attributes, and nested elements.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

Elements describe content. Attributes provide additional information. Nest elements in a valid hierarchy and close elements where required; malformed nesting can produce unexpected browser repairs.

Code example

<p class="intro">Learn <strong>HTML</strong> step by step.</p>

Expected result

Add a class attribute and nest strong inside a paragraph.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Module 02 of 10

Text, Headings and Content Structure

Create readable pages with meaningful headings, paragraphs, lists and quotations.

Create readable pages with meaningful headings, paragraphs, lists and quotations.

Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.

In This Module

Lesson 2.1 · Module 02

Headings and Paragraphs

Use h1 through h6 to express hierarchy, not merely to change text size.

What you will learn

  • Use h1 through h6 to express hierarchy, not merely to change text size.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

Most pages benefit from one clear main heading and logically nested section headings. Paragraphs represent blocks of prose; visual sizing belongs in CSS.

Code example

<h1>Learning HTML</h1>\n<h2>Text elements</h2>\n<p>HTML gives content structure.</p>\n<h3>Why structure matters</h3>\n<p>It helps people and software understand the page.</p>

Expected result

Write a short article with a logical heading outline.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 2.2 · Module 02

Bold, Importance, Emphasis and Quotations

Choose strong, em, blockquote, q, cite, mark, small, sub and sup by meaning.

What you will learn

  • Choose strong, em, blockquote, q, cite, mark, small, sub and sup by meaning.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

Use strong for importance and em for stress emphasis. Do not use semantic elements only for their default appearance. cite identifies the title of a creative work; blockquote represents an extended quotation.

Code example

<p><strong>Important:</strong> Save your work regularly.</p>\n<p>Please read <em>all instructions</em>.</p>\n<blockquote cite="https://example.com/">\n  <p>Learning improves with practice.</p>\n</blockquote>

Expected result

Format a short article with meaningful emphasis.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 2.3 · Module 02

Ordered, Unordered and Description Lists

Build numbered steps, bullet lists and term-definition groups.

What you will learn

  • Build numbered steps, bullet lists and term-definition groups.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

Use ol when order matters, ul when order does not matter, and dl with dt/dd for terms and their descriptions. Lists should represent relationships rather than provide spacing.

Code example

<h2>Setup checklist</h2>\n<ul><li>Install an editor</li><li>Create a folder</li></ul>\n<ol><li>Write HTML</li><li>Open it in a browser</li></ol>

Expected result

Create a recipe list and a numbered procedure.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 2.4 · Module 02

Code, Preformatted Text and Special Characters

Represent code examples and display reserved characters safely.

What you will learn

  • Represent code examples and display reserved characters safely.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

Use code for inline code and pre for preserved whitespace. Escape reserved characters such as less-than and ampersand when they are text rather than markup.

Code example

<p>Use <code>&lt;h1&gt;</code> for a main heading.</p>\n<pre><code>const greeting = "Hello";\nconsole.log(greeting);</code></pre>

Expected result

Publish a small code snippet inside an article.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Module 03 of 10

Links and Website Navigation

Connect pages, sections, files and external resources safely.

Connect pages, sections, files and external resources safely.

Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.

In This Module

Lesson 3.1 · Module 03

Creating Links with the Anchor Element

Use href, descriptive link text, absolute URLs and relative paths.

What you will learn

  • Use href, descriptive link text, absolute URLs and relative paths.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

A link's text should explain its destination. Relative links are resolved from the current document URL, so check folder paths carefully. Use buttons for actions and anchors for navigation.

Code example

<a href="about.html">Read about us</a>\n<a href="https://developer.mozilla.org/" target="_blank" rel="noopener noreferrer">MDN Web Docs</a>

Expected result

Link index.html to an about page and an external reference.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 3.2 · Module 03

Relative Paths, Folders and File Extensions

Understand ./, ../ and root-relative paths.

What you will learn

  • Understand ./, ../ and root-relative paths.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

A relative URL is resolved against the current document location. Moving a page into a folder may require updating its links and asset paths.

Code example

<a href="pages/contact.html">Contact</a>\n<a href="../index.html">Home</a>

Expected result

Create a pages folder and test links from nested pages.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 3.3 · Module 03

Email, Telephone, Download and Section Links

Use mailto, tel, download and fragment identifiers appropriately.

What you will learn

  • Use mailto, tel, download and fragment identifiers appropriately.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

These URL schemes ask the browser to open a relevant handler. A download attribute works best for same-origin resources and is not a security boundary.

Code example

<a href="mailto:hello@example.com">Email us</a>\n<a href="tel:+9779800000000">Call us</a>\n<a href="#faq">Jump to FAQs</a>\n<h2 id="faq">FAQs</h2>

Expected result

Add a table of contents that jumps to page sections.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 3.4 · Module 03

Navigation Menus and Breadcrumbs

Mark up primary navigation and breadcrumb trails accessibly.

What you will learn

  • Mark up primary navigation and breadcrumb trails accessibly.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

Wrap a major navigation group in nav and give multiple nav landmarks distinct accessible labels. Breadcrumbs show the page's position in a hierarchy.

Code example

<nav aria-label="Primary">\n  <a href="index.html">Home</a>\n  <a href="courses.html">Courses</a>\n  <a href="contact.html">Contact</a>\n</nav>

Expected result

Build primary navigation and a breadcrumb for a course page.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Module 04 of 10

Images, Figures and Responsive Media

Use images and media with meaningful alternatives and captions.

Use images and media with meaningful alternatives and captions.

Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.

In This Module

Lesson 4.1 · Module 04

Adding Images and Writing Alt Text

Use img with src and appropriate alt text.

What you will learn

  • Use img with src and appropriate alt text.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

Alt text conveys the purpose or relevant information of an image. Decorative images generally use alt="". Do not put important text only inside an image.

Code example

<img src="images/workshop.jpg" alt="Students practising HTML in a computer lab" width="800" height="500">

Expected result

Add an informative image and explain why its alt text is useful.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 4.2 · Module 04

Figures, Captions and Image Dimensions

Pair media with figcaption when a caption belongs to the content.

What you will learn

  • Pair media with figcaption when a caption belongs to the content.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

Width and height attributes help the browser reserve space and reduce layout shifts. Figure is suitable for self-contained media with an optional caption.

Code example

<figure>\n  <img src="images/museum.jpg" alt="Museum gallery display" width="800" height="500">\n  <figcaption>A gallery display documenting local history.</figcaption>\n</figure>

Expected result

Create a three-image article gallery with captions.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 4.3 · Module 04

Audio and Video Elements

Embed audio and video using controls and accessible alternatives.

What you will learn

  • Embed audio and video using controls and accessible alternatives.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

Provide controls and fallback text. Captions and transcripts improve access. Browser codec support varies, so multiple source formats may be appropriate.

Code example

<video controls width="640" poster="images/poster.jpg">\n  <source src="media/lesson.mp4" type="video/mp4">\n  Your browser does not support embedded video.\n</video>

Expected result

Embed a sample video and document the caption/transcript plan.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 4.4 · Module 04

picture, source and Responsive Image Choices

Select appropriate image sources for viewport or format needs.

What you will learn

  • Select appropriate image sources for viewport or format needs.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

The picture element lets the browser select from source candidates. The img remains the fallback and should retain useful alt text.

Code example

<picture>\n  <source media="(max-width: 600px)" srcset="images/portrait-small.webp">\n  <img src="images/landscape.webp" alt="A mountain landscape" width="1200" height="700">\n</picture>

Expected result

Prepare small and large image variants and test viewport changes.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Module 05 of 10

Tables and Structured Data

Present tabular information with meaningful headers and captions.

Present tabular information with meaningful headers and captions.

Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.

In This Module

Lesson 5.1 · Module 05

When to Use Tables

Use tables for data relationships, not page layout.

What you will learn

  • Use tables for data relationships, not page layout.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

A data table has rows and columns whose intersections communicate information. On narrow screens, provide an intentional overflow or alternate presentation rather than damaging the data structure.

Code example

<table>\n  <caption>Course durations</caption>\n  <tr><th scope="col">Course</th><th scope="col">Hours</th></tr>\n  <tr><td>HTML</td><td>20</td></tr>\n</table>

Expected result

Build a small course comparison table.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 5.2 · Module 05

Table Headers, Captions and Scope

Associate header cells with data cells.

What you will learn

  • Associate header cells with data cells.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

Use th for headers and scope="col" or scope="row" for straightforward tables. Complex tables may need explicit header IDs and headers attributes.

Code example

<table>\n  <caption>Weekly study plan</caption>\n  <thead><tr><th scope="col">Day</th><th scope="col">Topic</th></tr></thead>\n  <tbody><tr><th scope="row">Monday</th><td>HTML forms</td></tr></tbody>\n</table>

Expected result

Add a caption and correct row and column headers.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 5.3 · Module 05

thead, tbody, tfoot and Spanning Cells

Organize table sections and use rowspan or colspan only when the data needs them.

What you will learn

  • Organize table sections and use rowspan or colspan only when the data needs them.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

Section elements improve organization. Spanning cells should communicate a real grouping; avoid using them simply to force visual layout.

Code example

<table>\n<thead><tr><th scope="col">Item</th><th scope="col">Qty</th></tr></thead>\n<tbody><tr><td>Notebook</td><td>2</td></tr></tbody>\n<tfoot><tr><th scope="row">Total items</th><td>2</td></tr></tfoot>\n</table>

Expected result

Create a table with header, body and summary footer.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 5.4 · Module 05

Accessible and Maintainable Tables

Review table structure, captions and small-screen behaviour.

What you will learn

  • Review table structure, captions and small-screen behaviour.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

Keep table headings concise, use a caption to explain purpose, and test keyboard and screen-reader navigation. Do not replace proper table markup with visually aligned spaces.

Code example

<div class="table-scroll">\n  <table><caption>Project status</caption>\n    <thead><tr><th scope="col">Project</th><th scope="col">Status</th></tr></thead>\n    <tbody><tr><td>Portfolio</td><td>In progress</td></tr></tbody>\n  </table>\n</div>

Expected result

Audit a table for clarity and mobile usability.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Module 06 of 10

Forms and User Input

Build accessible forms with native controls and browser validation.

Build accessible forms with native controls and browser validation.

Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.

In This Module

Lesson 6.1 · Module 06

Form, Label and Input Fundamentals

Connect each input with a visible label and understand name and value.

What you will learn

  • Connect each input with a visible label and understand name and value.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

The name attribute determines the key submitted to the server. Labels improve usability and make controls easier to identify. Client-side validation does not replace server-side validation.

Code example

<form action="/subscribe" method="post">\n  <label for="email">Email address</label>\n  <input id="email" name="email" type="email" required>\n  <button type="submit">Subscribe</button>\n</form>

Expected result

Create a labelled email subscription form.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 6.2 · Module 06

Input Types and Useful Attributes

Use email, password, number, date, checkbox, radio, file and other suitable input types.

What you will learn

  • Use email, password, number, date, checkbox, radio, file and other suitable input types.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

Choose the type that matches the data. Required, minlength, maxlength, min, max and step can improve native validation, but server code must validate submitted values again.

Code example

<label for="age">Age</label>\n<input id="age" name="age" type="number" min="13" max="120">\n<label><input type="checkbox" name="updates" value="yes"> Send updates</label>

Expected result

Build a registration form using appropriate input types.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 6.3 · Module 06

Select, Textarea, Fieldset and Legend

Group related controls and collect multi-line or choice-based input.

What you will learn

  • Group related controls and collect multi-line or choice-based input.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

fieldset and legend help communicate a group of related controls. Use select for a list of choices and textarea for multi-line text.

Code example

<fieldset>\n  <legend>Preferred learning mode</legend>\n  <label><input type="radio" name="mode" value="self-paced"> Self-paced</label>\n  <label><input type="radio" name="mode" value="guided"> Guided</label>\n</fieldset>

Expected result

Build a course enquiry form with grouped controls.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 6.4 · Module 06

Validation, Submission and Privacy Basics

Understand GET versus POST, autocomplete and accessible error messages.

What you will learn

  • Understand GET versus POST, autocomplete and accessible error messages.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

GET is suitable for retrieval and shareable filters; POST is commonly used for submissions that change state or contain larger form payloads. Sensitive data must be handled securely on the server over HTTPS.

Code example

<label for="username">Username</label>\n<input id="username" name="username" required minlength="3" autocomplete="username">\n<p id="hint">Use at least three characters.</p>

Expected result

Test empty and invalid fields; list server-side checks still required.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Module 07 of 10

Semantic HTML and Accessibility

Use elements that express the purpose of content and support assistive technology.

Use elements that express the purpose of content and support assistive technology.

Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.

In This Module

Lesson 7.1 · Module 07

header, nav, main, section and footer

Build a page using landmark elements.

What you will learn

  • Build a page using landmark elements.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

Semantic landmarks help people and tools understand the page. Use main for the primary content, nav for major navigation, and section when a meaningful heading groups related content.

Code example

<header><h1>Learning Hub</h1></header>\n<nav aria-label="Main navigation">...</nav>\n<main><section><h2>Latest lessons</h2></section></main>\n<footer>Copyright information</footer>

Expected result

Refactor a div-heavy page into meaningful landmarks.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 7.2 · Module 07

article, aside, address, time and details

Choose semantic elements based on the meaning of the content.

What you will learn

  • Choose semantic elements based on the meaning of the content.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

Article can stand alone or be reused independently. time with datetime provides a machine-readable date/time. details and summary create a native disclosure widget.

Code example

<article>\n  <h2>Course announcement</h2>\n  <p>Updated <time datetime="2026-10-23">October 23, 2026</time>.</p>\n  <details><summary>Read more</summary><p>Additional details.</p></details>\n</article>

Expected result

Create a course update card with a disclosure section.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 7.3 · Module 07

Accessibility Foundations and Keyboard Use

Understand labels, alternative text, focus order and meaningful link text.

What you will learn

  • Understand labels, alternative text, focus order and meaningful link text.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

Accessibility starts with correct HTML. Use native controls, preserve logical document order, provide labels, and ensure interactive content works without a mouse. Avoid adding ARIA when native HTML already expresses the meaning.

Code example

<button type="button" aria-describedby="save-help">Save draft</button>\n<p id="save-help">Saves changes without publishing.</p>

Expected result

Navigate your page with keyboard only and record issues.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 7.4 · Module 07

ARIA Basics and Common Mistakes

Know when ARIA helps and why native semantics are preferred.

What you will learn

  • Know when ARIA helps and why native semantics are preferred.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

ARIA can add accessible names or states when native HTML is insufficient, but it does not create keyboard behaviour automatically. A div with role=button still needs correct keyboard interaction.

Code example

<button type="button" aria-expanded="false" aria-controls="details">Show details</button>\n<div id="details" hidden>More information.</div>

Expected result

Review a component and remove unnecessary ARIA.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Module 08 of 10

Metadata, SEO and Sharing

Create clear document metadata and understand HTML's role in discoverability.

Create clear document metadata and understand HTML's role in discoverability.

Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.

In This Module

Lesson 8.1 · Module 08

Title, Description, Language and Viewport

Set a unique title, useful description, language and responsive viewport.

What you will learn

  • Set a unique title, useful description, language and responsive viewport.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

Metadata helps browsers and search engines interpret the document. A descriptive title and accurate summary are useful, but they do not guarantee a particular ranking.

Code example

<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1">\n  <title>HTML Forms: Practical Guide</title>\n  <meta name="description" content="Learn to create accessible HTML forms with practical examples.">\n</head>

Expected result

Write distinct titles and descriptions for three pages.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 8.2 · Module 08

Canonical URLs, Robots and Indexing Basics

Understand canonical links and basic indexing directives.

What you will learn

  • Understand canonical links and basic indexing directives.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

Canonical URLs can help consolidate duplicate URL variants when used correctly. Robots directives and robots.txt have different purposes; do not use robots.txt as a way to protect private pages.

Code example

<link rel="canonical" href="https://example.com/html-forms">\n<meta name="robots" content="index,follow">

Expected result

Identify duplicate URL variants and choose a canonical URL.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 8.3 · Module 08

Open Graph and Social Preview Metadata

Add social-sharing title, description and image metadata.

What you will learn

  • Add social-sharing title, description and image metadata.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

Social platforms may use Open Graph tags to create previews. Use absolute image URLs, appropriate image dimensions, and accurate text that matches the page.

Code example

<meta property="og:title" content="Learn HTML Forms">\n<meta property="og:description" content="Practical form examples and accessibility tips.">\n<meta property="og:type" content="article">\n<meta property="og:image" content="https://example.com/images/forms-guide.jpg">

Expected result

Prepare social preview metadata for an article.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 8.4 · Module 08

Structured Data and Honest SEO

Understand JSON-LD basics and avoid misleading structured data.

What you will learn

  • Understand JSON-LD basics and avoid misleading structured data.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

Structured data can describe content in a machine-readable form. The markup must match visible page content and current search engine policies; adding it does not guarantee rich results.

Code example

<script type="application/ld+json">\n{\n  "@context": "https://schema.org",\n  "@type": "Course",\n  "name": "HTML Complete Masterclass",\n  "provider": {"@type": "Person", "name": "Bigyan Ghimire"}\n}\n</script>

Expected result

Validate structured data against the actual visible course details.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Module 09 of 10

Advanced HTML APIs and Embeds

Explore useful browser-native features and safe embedding practices.

Explore useful browser-native features and safe embedding practices.

Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.

In This Module

Lesson 9.1 · Module 09

iframes and Embedded Content

Embed external content with meaningful titles and deliberate permissions.

What you will learn

  • Embed external content with meaningful titles and deliberate permissions.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

An iframe creates a nested browsing context. Give it a descriptive title, embed only trusted sources, and restrict permissions where practical. Third-party embeds can affect performance and privacy.

Code example

<iframe src="https://example.com/demo" title="Interactive HTML demonstration" loading="lazy" width="640" height="360"></iframe>

Expected result

Document the privacy and performance trade-offs of an embed.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 9.2 · Module 09

data Attributes and Custom Data

Attach application-specific data to semantic elements.

What you will learn

  • Attach application-specific data to semantic elements.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

data-* attributes store custom strings in markup. They are not a secure place for secrets and should not replace proper machine-readable attributes when a standard exists.

Code example

<button type="button" data-topic="html-forms">Open lesson</button>

Expected result

Add data attributes to a list of lesson cards.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 9.3 · Module 09

Native Disclosure, Dialog and Progress Elements

Recognize native interactive elements and their intended use.

What you will learn

  • Recognize native interactive elements and their intended use.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

details and summary provide disclosure. dialog can represent a dialog interface when managed accessibly. progress indicates task completion; meter indicates a scalar value within a known range.

Code example

<label for="completion">Course completion</label>\n<progress id="completion" value="7" max="10">70%</progress>

Expected result

Add a progress indicator and explain its value.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 9.4 · Module 09

Security, Embeds and Safe Markup

Recognize risky embedding patterns and the importance of sanitizing generated HTML.

What you will learn

  • Recognize risky embedding patterns and the importance of sanitizing generated HTML.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

Never assume user-supplied HTML is safe. Server-side applications should validate input and sanitize rich text with a suitable allowlist. Avoid inserting untrusted strings as executable markup.

Code example

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Trusted external resource</a>

Expected result

Write a short checklist for safely publishing user-generated content.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Module 10 of 10

Build and Publish a Complete Website

Combine HTML skills into a maintainable multi-page project.

Combine HTML skills into a maintainable multi-page project.

Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.

In This Module

Lesson 10.1 · Module 10

Plan a Website and Create a Page Outline

Define the audience, pages, navigation and content hierarchy before coding.

What you will learn

  • Define the audience, pages, navigation and content hierarchy before coding.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

A small sitemap and heading outline reduce rework. Every page should have a clear purpose, consistent navigation and content that answers the visitor's needs.

Code example

index.html\nabout.html\ncourses.html\ncontact.html\nassets/images/

Expected result

Create a sitemap for a small learning website.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 10.2 · Module 10

Build Home, About, Courses and Contact Pages

Create connected pages with shared navigation and meaningful content.

What you will learn

  • Create connected pages with shared navigation and meaningful content.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

Keep content-specific structure in each page while maintaining consistent navigation and metadata. Check links, image paths and headings after every change.

Code example

<main>\n  <h1>Learn Web Development</h1>\n  <p>Start with clear, practical lessons.</p>\n  <a href="courses.html">Explore courses</a>\n</main>

Expected result

Build four linked HTML pages.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 10.3 · Module 10

Test, Validate and Improve Quality

Use browser developer tools, HTML validation and keyboard testing.

What you will learn

  • Use browser developer tools, HTML validation and keyboard testing.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

Check missing alt text, invalid nesting, broken links, duplicate IDs, missing labels and console errors. Validation catches markup problems but does not replace usability testing.

Code example

<!-- Give each id a unique value. -->\n<label for="search">Search lessons</label>\n<input id="search" name="q" type="search">

Expected result

Run a quality checklist and fix at least five issues.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 10.4 · Module 10

Final Project: Publish a Semantic Learning Website

Deliver a multi-page website with accessible navigation, forms, media and metadata.

What you will learn

  • Deliver a multi-page website with accessible navigation, forms, media and metadata.
  • Recognize when and why to use this technique.
  • Apply it in a small practical task.

Explanation

The final project should demonstrate the core skills from this course. Test it at multiple viewport sizes, verify every link, and document any features that require a server.

Code example

<main>\n  <article>\n    <h1>HTML Learning Roadmap</h1>\n    <p>A practical path from beginner to confident markup author.</p>\n  </article>\n</main>

Expected result

Submit a four-page site and a short self-review.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Your Instructor

Bigyan Ghimire

Instructor

Bigyan Ghimire

Full-Stack Developer

Full-stack web developer from Kathmandu, Nepal, specialising in PHP, JavaScript and MySQL.