HTML Mastery / What is HTML?
Lecture 1 / 12
Lecture 01 · Foundations

What is HTML?

No prerequisites

Introduction to HTML

HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web.

Every website you visit uses HTML in some form. HTML provides the structure of a webpage, similar to how the skeleton provides structure to the human body.

With HTML, developers can create:

  • Headings
  • Paragraphs
  • Images
  • Links
  • Tables
  • Forms
  • Navigation menus
  • Entire webpage layouts

What Does HyperText Mean?

HyperText refers to text that contains links connecting one page to another.

For example, when you click a link on a website and move to another page, you are using hypertext.

What Does Markup Language Mean?

A markup language uses special tags to describe the structure of content.

HTML tags tell the browser:

  • Which text is a heading
  • Which content is a paragraph
  • Where images should appear
  • How content should be organised

Structure of an HTML Document

A basic HTML page contains several important parts.

Tag Purpose
<!DOCTYPE html> Defines the document type
<html> Root element of the webpage
<head> Contains metadata and page information
<body> Contains visible webpage content
hello.html 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>

<body>
  <h1>Hello, World!</h1>
  <p>Welcome to <strong>HTML</strong>.</p>
</body>

</html>

Understanding the Example

  • <h1> creates a main heading
  • <p> creates a paragraph
  • <strong> makes text bold and important
  • <title> sets the browser tab title

How Browsers Read HTML

Web browsers like Chrome, Firefox, and Edge read HTML files and convert them into visual webpages.

The browser does not display the tags themselves. Instead, it interprets them and renders the final page for users.

HTML Tags and Elements

HTML uses tags enclosed inside angle brackets.

Example:

tags.html 
<p>This is a paragraph.</p>

In this example:

  • <p> is the opening tag
  • </p> is the closing tag
  • The text between them is the content

Common HTML Elements

Element Description
<h1> to <h6> Headings
<p> Paragraph
<a> Hyperlink
<img> Image
<ul> Unordered list
<ol> Ordered list
<div> Container element

HTML is Not a Programming Language

HTML is a markup language, not a programming language.

It cannot perform calculations, create logic, or make decisions on its own.

HTML is commonly used together with:

  • CSS → for styling and design
  • JavaScript → for interactivity and dynamic behaviour

Tools Needed for HTML Development

To start writing HTML, you only need:

  • A web browser
  • A text editor or code editor

Recommended Code Editors

Recommended Browsers

Saving an HTML File

HTML files must be saved using the .html extension.

Example:

filename.txt 
index.html

After saving the file, double-click it to open it in your web browser.

Best Practices for Beginners

  • Always close tags properly
  • Use lowercase tag names
  • Indent code for readability
  • Use meaningful file names
  • Practice by creating small webpages daily
🎯 Exercise 1.1

Create a simple HTML page with your name as the title, add a heading, and a paragraph.

🎯 Exercise 1.2

Create a webpage containing:

  • One main heading
  • Two paragraphs
  • A list of your favourite hobbies
🎯 Exercise 1.3

Create an about.html page introducing yourself with:

  • Your name
  • Your goals
  • Your favourite programming language
Lecture 02 · Foundations

Document Structure

Requires: Lecture 01

Introduction to HTML Document Structure

Every HTML webpage follows a standard structure known as the HTML boilerplate.

This structure helps browsers correctly understand and display the webpage content.

A well-structured HTML document improves:

  • Readability
  • Browser compatibility
  • SEO (Search Engine Optimization)
  • Maintainability

The HTML Boilerplate

The following is the basic structure of a modern HTML5 document.

boilerplate.html 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>

<body>
  <!-- Content here -->
</body>

</html>

Understanding Each Part

Let us break down the document structure step by step.

<!DOCTYPE html>

This declaration tells the browser that the document uses HTML5.

Without it, browsers may switch to older rendering modes that can cause layout issues.

<html>

The <html> tag is the root element of the webpage.

Everything inside the webpage must be placed between:

html-tag.html 
<html>
  ...
</html>

The lang Attribute

The lang="en" attribute specifies the language of the webpage.

This helps:

  • Search engines understand the page language
  • Screen readers improve accessibility
  • Browsers provide better translation support

<head>

The <head> section contains information about the webpage that is not directly visible on the page.

Common elements inside the head section include:

  • Page title
  • Meta tags
  • CSS links
  • JavaScript files
  • Icons and fonts

<meta charset="UTF-8">

This meta tag sets the character encoding to UTF-8.

UTF-8 supports most characters and symbols used worldwide.

Without proper encoding, some text may display incorrectly.

<meta name="viewport">

This tag helps webpages display correctly on mobile devices.

It makes responsive design possible by controlling page scaling and width.

viewport.html 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>

The <title> tag defines the title shown in the browser tab.

Example:

title.html 
<title>My Portfolio</title>

This title also appears in search engine results.

<body>

The <body> section contains all visible webpage content.

Examples include:

  • Headings
  • Paragraphs
  • Images
  • Buttons
  • Navigation menus
  • Videos

Comments in HTML

Comments are notes written inside the code that browsers ignore.

They help developers explain sections of code.

comments.html 
<!-- This is a comment -->

Indentation and Formatting

Indentation makes HTML code easier to read and maintain.

Compare the following examples:

bad-format.html 
<body>
<h1>Title</h1>
<p>Paragraph</p>
</body>
good-format.html 
<body>
  <h1>Title</h1>
  <p>Paragraph</p>
</body>

Proper formatting becomes extremely important in large projects.

HTML5 Semantic Structure

Modern HTML uses semantic elements that describe the meaning of content.

Element Purpose
<header> Top section of a webpage
<nav> Navigation links
<main> Main page content
<section> Content section
<article> Independent content block
<footer> Bottom section of the page

Example Semantic Layout

semantic-layout.html 
<body>

  <header>
    <h1>My Website</h1>
  </header>

  <nav>
    Navigation Menu
  </nav>

  <main>
    Main Content
  </main>

  <footer>
    Copyright 2026
  </footer>

</body>

Creating Your First HTML File

  1. Open your code editor
  2. Create a new file
  3. Save it with a .html extension
  4. Write the HTML boilerplate
  5. Open the file in your browser

Useful VS Code Extensions

Emmet Example

Typing the following in VS Code:

emmet.txt 
!

and pressing Tab automatically generates the complete HTML boilerplate.

Best Practices

  • Always use the HTML5 doctype
  • Keep code properly indented
  • Use semantic tags whenever possible
  • Write meaningful page titles
  • Organise code cleanly from the beginning
🎯 Exercise 2.1

Create a complete HTML5 boilerplate manually without copying the example.

🎯 Exercise 2.2

Create a webpage with:

  • A page title
  • A heading
  • One paragraph
  • A footer section
🎯 Exercise 2.3

Create a semantic webpage using:

  • <header>
  • <nav>
  • <main>
  • <footer>
Lecture 03 · Foundations

Text & Typography

Requires: Lecture 02

Introduction to Text in HTML

Text is one of the most important parts of every webpage. HTML provides several elements to structure and format text properly.

Good typography improves:

  • Readability
  • User experience
  • Accessibility
  • Search engine optimisation

HTML text elements help browsers and search engines understand the importance of content on a webpage.

Headings Hierarchy

HTML provides six heading levels from <h1> to <h6>.

These headings create a content hierarchy similar to chapters and subheadings in a book.

headings.html 
<h1>Main Page Title</h1>
<h2>Major Section</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>

Heading Levels Explained

Heading Purpose
<h1> Main title of the webpage
<h2> Main section heading
<h3> Subsection heading
<h4> - <h6> Smaller nested sections

Importance of Proper Heading Structure

Headings are not only used for making text bigger. They provide semantic meaning to content.

Proper heading usage helps:

  • Search engines understand page structure
  • Screen readers improve accessibility
  • Users quickly scan content

A webpage should usually contain only one primary <h1>.

Paragraphs

The <p> tag is used to create paragraphs.

paragraphs.html 
<p>HTML is the foundation of web development.</p>

<p>It helps structure content on webpages.</p>

Browsers automatically add spacing before and after paragraphs.

Line Breaks

The <br> tag inserts a line break.

line-break.html 
<p>
Hello<br>
Welcome to HTML
</p>

The <br> tag does not require a closing tag.

Horizontal Rules

The <hr> tag creates a horizontal line used to separate content sections.

horizontal-rule.html 
<h2>Chapter 1</h2>

<hr>

<h2>Chapter 2</h2>

Bold and Important Text

HTML provides multiple ways to emphasise text.

Tag Purpose
<b> Bold text without semantic importance
<strong> Important text with semantic meaning
bold-text.html 
<p>
<strong>Warning:</strong> Save your work regularly.
</p>

Italic and Emphasised Text

Tag Purpose
<i> Italic text without emphasis
<em> Text with emphasis
italic.html 
<p>
<em>Important:</em> Complete the assignment today.
</p>

Small Text

The <small> tag displays smaller-sized text.

small.html 
<p>
Copyright <small>2026</small>
</p>

Subscript and Superscript

These tags are commonly used in mathematics and chemistry.

Tag Example Usage
<sub> H₂O
<sup> x²
subsup.html 
<p>H<sub>2</sub>O</p>

<p>x<sup>2</sup></p>

Preformatted Text

The <pre> tag preserves spaces and line breaks exactly as written.

preformatted.html 
<pre>
Line 1
    Line 2
        Line 3
</pre>

Code Text

The <code> tag is used for displaying programming code.

code-tag.html 
<p>
Use the <code>print()</code> function in Python.
</p>

Quotations

HTML provides tags for quotations and cited text.

Tag Purpose
<blockquote> Long quotation
<q> Short inline quotation
quote.html 
<q>Knowledge is power.</q>

HTML Entities

Some characters are reserved in HTML and must be written using entities.

Character Entity
< &lt;
> &gt;
& &amp;

Typography Best Practices

  • Use headings in proper order
  • Avoid skipping heading levels unnecessarily
  • Keep paragraphs short and readable
  • Use semantic tags like <strong> and <em>
  • Do not overuse bold or italic text

Useful Typography Resources

🎯 Exercise 3.1

Create a webpage containing all heading levels from <h1> to <h6>.

🎯 Exercise 3.2

Create a webpage with:

  • Three paragraphs
  • Bold and italic text
  • A horizontal rule
  • One quotation
🎯 Exercise 3.3

Create a mini article page using:

  • Headings
  • Paragraphs
  • Line breaks
  • Subscript or superscript text
Lecture 04 · Foundations

Links & Navigation

Requires: Lecture 03

Introduction to Links

Links are one of the most important features of the web.

They allow users to move between webpages, websites, sections, documents, and resources.

HTML uses the <a> tag, also called the anchor tag, to create hyperlinks.

The Anchor Tag

The basic syntax of a hyperlink is:

basic-link.html 
<a href="https://example.com">Visit Website</a>

The href attribute specifies the destination URL.

Types of Links

Type Description
External Link Opens another website
Internal Link Opens another page within the same website
Anchor Link Jumps to a section on the same page
Email Link Opens the user's email application
Telephone Link Starts a phone call on supported devices

External Links

External links connect users to other websites.

external-link.html 
<a href="https://www.google.com">
  Visit Google
</a>

Opening Links in a New Tab

The target="_blank" attribute opens the link in a new browser tab.

new-tab.html 
<a href="https://example.com"
   target="_blank"
   rel="noopener">

   Open New Tab

</a>

Why Use rel="noopener"?

The rel="noopener" attribute improves security when opening new tabs.

It prevents the new webpage from accessing the original page through JavaScript.

Internal Links

Internal links connect pages inside the same website.

Example folder structure:

project-structure.txt 
project/
│
├── index.html
├── about.html
└── contact.html

Example internal link:

internal-link.html 
<a href="/about">
  About Us
</a>

Anchor Links

Anchor links jump to specific sections on the same webpage.

anchor-link.html 
<a href="#section">Jump to Section</a>

<h2 id="section">Section</h2>

The id attribute identifies the target element.

Email Links

The mailto: protocol opens the user's default email application.

email-link.html 
<a href="mailto:[email protected]">
  Send Email
</a>

Telephone Links

The tel: protocol is mainly used on mobile devices for phone calls.

telephone-link.html 
<a href="tel:+1234567890">
  Call Now
</a>

Download Links

The download attribute allows users to download files instead of opening them.

download-link.html 
<a href="notes.pdf" download>
  Download Notes
</a>

Images as Links

An image can also be wrapped inside an anchor tag.

image-link.html 
<a href="https://example.com">
  <img src="logo.png" alt="Logo">
</a>

Navigation Menus

Navigation menus help users move through a website.

HTML commonly uses the <nav> element for navigation sections.

navigation.html 
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

Relative vs Absolute URLs

Type Example
Relative URL about.html
Absolute URL https://example.com/about.html

Link States

Links can have different visual states:

  • Unvisited
  • Visited
  • Hovered
  • Active

These states are usually styled using CSS.

Accessibility Tips for Links

  • Use descriptive link text
  • Avoid generic text like "Click Here"
  • Make links easy to identify visually
  • Use meaningful navigation labels

Bad vs Good Link Text

bad-link.html 
<a href="course.html">Click Here</a>
good-link.html 
<a href="course.html">
  View HTML Course
</a>

Useful Resources

Common Beginner Mistakes

  • Forgetting the href attribute
  • Using broken file paths
  • Opening every link in a new tab unnecessarily
  • Using unclear link text
  • Forgetting to close the anchor tag
🎯 Exercise 4.1

Create a webpage containing:

  • One external link
  • One internal link
  • One email link
🎯 Exercise 4.2

Create a navigation menu with links for:

  • Home
  • About
  • Services
  • Contact
🎯 Exercise 4.3

Create a long webpage with multiple sections and use anchor links to jump between them.

Lecture 05 · Foundations

Images & Media

Requires: Lecture 04

Introduction to Media in HTML

Websites become more engaging when they include images, audio, videos, and other media elements.

HTML provides built-in tags for displaying media content directly inside webpages.

In this lecture, you will learn how to:

  • Add images to webpages
  • Display captions
  • Embed audio and video
  • Use responsive media
  • Improve accessibility with media elements

Adding Images

The <img> tag is used to display images in HTML.

Unlike many HTML elements, the image tag does not have a closing tag.

images.html 
<!-- Basic image -->
<img src="photo.jpg" alt="Description">

<!-- With dimensions -->
<img src="photo.jpg" alt="Description" 
     width="600" height="400">

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

Important Image Attributes

Attribute Purpose
src Specifies the image file path
alt Alternative text for accessibility
width Sets image width
height Sets image height

The Importance of Alt Text

The alt attribute is extremely important for accessibility and SEO.

Screen readers use alt text to describe images to visually impaired users.

If an image fails to load, the alt text is displayed instead.

alt-text.html 
<img src="cat.jpg"
     alt="A white cat sitting on a chair">

Image File Formats

Format Best Used For
JPG / JPEG Photographs and realistic images
PNG Transparent backgrounds and graphics
SVG Icons and vector graphics
GIF Simple animations
WebP Modern compressed web images

Image Paths

Images can be loaded using relative or absolute paths.

paths.html 
<!-- Relative path -->
<img src="images/photo.jpg" alt="Photo">

<!-- Absolute URL -->
<img src="https://example.com/photo.jpg"
     alt="Online Photo">

Figure and Figcaption

The <figure> element groups media content together.

The <figcaption> tag provides a caption for the content.

figure.html 
<figure>

  <img src="nature.jpg" alt="Nature">

  <figcaption>
    Beautiful mountain landscape
  </figcaption>

</figure>

Responsive Images

Responsive images automatically adjust to different screen sizes.

responsive-image.html 
<img src="photo.jpg"
     alt="Responsive image"
     style="max-width:100%; height:auto;">

This technique prevents images from overflowing on smaller screens.

Adding Audio

The <audio> tag embeds sound files into webpages.

audio.html 
<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>

Audio Attributes

Attribute Purpose
controls Displays play/pause buttons
autoplay Automatically starts audio
loop Repeats the audio continuously
muted Starts audio muted

Adding Video

The <video> tag is used for embedding videos.

video.html 
<video width="640"
       height="360"
       controls>

  <source src="movie.mp4"
          type="video/mp4">

  Your browser does not support video.

</video>

Embedding YouTube Videos

YouTube videos are commonly embedded using an iframe.

youtube.html 
<iframe width="560"
        height="315"
        src="https://www.youtube.com/embed/VIDEO_ID"
        title="YouTube video"
        allowfullscreen>

</iframe>

Poster Images for Videos

The poster attribute displays an image before the video starts.

poster.html 
<video controls
       poster="thumbnail.jpg">

  <source src="movie.mp4"
          type="video/mp4">

</video>

Accessibility Tips for Media

  • Always include descriptive alt text for images
  • Add captions or transcripts for videos
  • Avoid autoplay audio when possible
  • Use accessible file names
  • Ensure media works on mobile devices

Performance Best Practices

  • Compress large images before uploading
  • Use modern formats like WebP
  • Avoid extremely large image dimensions
  • Optimise videos for faster loading
  • Use lazy loading for better performance

Lazy Loading Images

Lazy loading delays image loading until the image becomes visible on screen.

lazy-loading.html 
<img src="photo.jpg"
     alt="Photo"
     loading="lazy">

Useful Resources

Common Beginner Mistakes

  • Forgetting the alt attribute
  • Using huge image sizes
  • Incorrect file paths
  • Stretching images unnaturally
  • Using autoplay audio excessively
🎯 Exercise 5.1

Create a webpage containing:

  • One image
  • An image caption
  • Proper alt text
🎯 Exercise 5.2

Create a webpage with:

  • An embedded audio file
  • A video player
  • A YouTube iframe embed
🎯 Exercise 5.3

Create a small gallery page using multiple responsive images.

Lecture 06 · Core Concepts

Lists & Tables

Requires: Lecture 05

Introduction to Lists & Tables

Lists and tables are essential HTML elements used to organize and display information clearly. Lists help group related items together, while tables are used to display structured data in rows and columns.

Websites use lists for menus, navigation bars, feature sections, tutorials, and instructions. Tables are commonly used for schedules, pricing charts, marksheets, reports, and data presentation.

💡 Key Concept
Use lists for grouping related content and tables for displaying structured data in rows and columns.

Three Types of Lists

HTML provides three main types of lists:

  • Unordered Lists → Displays bullet points
  • Ordered Lists → Displays numbered items
  • Description Lists → Displays terms and definitions
<!-- Unordered -->
<ul>
  <li>Apples</li>
  <li>Bananas</li>
</ul>

<!-- Ordered -->
<ol>
  <li>Step 1</li>
  <li>Step 2</li>
</ol>

<!-- Description -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup</dd>
</dl>

Unordered Lists

Unordered lists use bullet points to display items where sequence or order does not matter.

<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
</ul>
Output
• Milk
• Bread
• Eggs

The <ul> tag creates the unordered list, while each item is added using the <li> tag.

Ordered Lists

Ordered lists are used when the order of items is important, such as instructions or rankings.

<ol>
  <li>Open VS Code</li>
  <li>Create a file</li>
  <li>Save the document</li>
</ol>
Output
1. Open VS Code
2. Create a file
3. Save the document

Browsers automatically number items inside an ordered list.

Changing Ordered List Types

You can change the numbering style of ordered lists using the type attribute.

<ol type="A">
  <li>HTML</li>
  <li>CSS</li>
</ol>

Possible values for the type attribute include:

  • 1 → Numbers (default)
  • A → Uppercase letters
  • a → Lowercase letters
  • I → Roman numerals
  • i → Lowercase Roman numerals

Description Lists

Description lists are used for terms and definitions, similar to a glossary or dictionary.

<dl>
  <dt>CPU</dt>
  <dd>Central Processing Unit</dd>

  <dt>RAM</dt>
  <dd>Random Access Memory</dd>
</dl>

The <dt> tag represents the term, while <dd> provides its description.

Nested Lists

Lists can also contain other lists inside them. This is called nesting.

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
</ul>

Nested lists are commonly used in navigation menus and category structures.

Introduction to Tables

HTML tables are used to organize data into rows and columns. Tables are useful for displaying schedules, reports, marksheets, pricing tables, and structured datasets.

⚠️ Important
Tables should be used for tabular data only — not for webpage layouts.

Basic Table Structure

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>

  <tr>
    <td>Alice</td>
    <td>21</td>
  </tr>
</table>
Output
Name | Age
Alice | 21

Understanding Table Tags

  • <table> → Creates the table
  • <tr> → Creates a table row
  • <th> → Creates a table heading cell
  • <td> → Creates a table data cell

Table Borders

The border attribute adds borders around table cells.

<table border="2">
  <tr>
    <th>Course</th>
    <th>Duration</th>
  </tr>

  <tr>
    <td>HTML</td>
    <td>4 Weeks</td>
  </tr>
</table>

Modern websites usually style tables using CSS instead of the HTML border attribute.

Merging Table Cells

You can merge cells horizontally using colspan and vertically using rowspan.

<table border="1">
  <tr>
    <th colspan="2">Student Info</th>
  </tr>

  <tr>
    <td>John</td>
    <td>20</td>
  </tr>
</table>

The colspan="2" attribute merges two columns into one.

Accessibility Tips

  • Use <th> for headings instead of normal cells
  • Keep tables simple and readable
  • Use lists for navigation menus whenever possible
  • Avoid deeply nested tables

Common Beginner Mistakes

  • Forgetting to close <li> tags
  • Using tables for page layouts
  • Mixing up <th> and <td>
  • Creating invalid nested lists
  • Forgetting that every table row uses <tr>
🎯 Exercise 6.1

Create an unordered list containing five of your favorite foods.

🎯 Exercise 6.2

Create an ordered list showing the steps to create an HTML file and open it in a browser.

🎯 Exercise 6.3

Create a table with three columns: Name, Subject, and Marks. Add at least three student records.

Lecture 07 · Core Concepts

Forms & Inputs

Requires: Lecture 06

Introduction to HTML Forms

HTML forms allow users to send data to a website. Forms are used everywhere on the web — login pages, registration systems, search bars, contact forms, payment systems, and surveys all depend on forms.

Forms collect user input using different input elements such as text fields, buttons, checkboxes, radio buttons, dropdowns, and text areas.

💡 Key Concept
Forms are the bridge between users and web applications. They allow websites to receive and process data.

Basic Form

The <form> tag acts as a container for all form elements.

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">Submit</button>
</form>

Understanding Form Attributes

  • action → specifies where form data is sent
  • method → defines how data is transmitted
  • POST → sends data securely in the request body
  • GET → sends data through the URL
✅ Best Practice
Use POST for sensitive data like passwords and user information. Use GET for searches and filters.

The <label> Element

The <label> tag improves accessibility and usability. Clicking the label automatically focuses the related input field.

<label for="username">Username:</label>
<input type="text" id="username">

The value of the for attribute must match the input's id.

Text Inputs

Text fields allow users to enter single-line text.

<input type="text" placeholder="Enter your name">

The placeholder attribute displays temporary helper text inside the field.

Email Inputs

The email input type validates email addresses automatically.

<input type="email" required>

If the entered value is not a valid email format, the browser will display a validation error.

Password Inputs

Password fields hide typed characters for security.

<input type="password">
Result
Password characters appear hidden as dots or asterisks.

Number Inputs

Number fields only accept numeric values.

<input type="number" min="1" max="100">

The min and max attributes define the allowed range.

Checkboxes

Checkboxes allow users to select multiple options.

<input type="checkbox" id="html">
<label for="html">HTML</label>

<input type="checkbox" id="css">
<label for="css">CSS</label>

Users can check more than one checkbox at the same time.

Radio Buttons

Radio buttons allow users to select only one option from a group.

<input type="radio" name="gender" id="male">
<label for="male">Male</label>

<input type="radio" name="gender" id="female">
<label for="female">Female</label>

Radio buttons must share the same name value to behave as a group.

Textarea

The <textarea> element allows multi-line text input.

<textarea rows="5" cols="30"></textarea>

This is commonly used for comments, messages, and descriptions.

Select Dropdown Menus

Dropdown menus provide a list of selectable options.

<select>
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
</select>

Submit Buttons

Buttons are used to submit form data.

<button type="submit">Send</button>

When clicked, the browser sends all form data to the location defined in the action attribute.

Reset Buttons

Reset buttons restore all form fields to their default values.

<button type="reset">Reset</button>
⚠️ UX Warning
Reset buttons can frustrate users if clicked accidentally. Many modern websites avoid using them.

Required Fields

The required attribute prevents users from submitting empty fields.

<input type="text" required>

Browser validation happens automatically before submission.

Placeholder Attribute

Placeholders provide temporary hints inside input fields.

<input type="text" placeholder="Enter username">

Placeholders disappear when the user starts typing.

File Upload Inputs

File inputs allow users to upload files from their computer.

<input type="file">

This is commonly used for profile pictures, assignments, and document uploads.

Date Inputs

HTML5 introduced specialized date and time input fields.

<input type="date">
<input type="time">

Modern browsers automatically display date and time pickers.

Semantic Form Structure

Organizing forms properly improves readability and accessibility.

<fieldset>
  <legend>Personal Information</legend>

  <label>Name:</label>
  <input type="text">
</fieldset>
  • <fieldset> groups related fields together
  • <legend> provides a title for the group

GET vs POST Methods

GET POST
Data appears in URL Data sent in request body
Less secure More secure
Used for searches Used for login/signup forms

Accessibility Best Practices

  • Always use labels for form fields
  • Use meaningful placeholder text
  • Group related fields with fieldsets
  • Ensure forms can be navigated using the keyboard
  • Provide validation messages clearly

Common Beginner Mistakes

  • Forgetting the name attribute
  • Using labels incorrectly
  • Using GET for passwords
  • Not validating required fields
  • Forgetting to close form tags properly
🎯 Exercise 7.1

Create a registration form containing name, email, password, and submit button fields.

🎯 Exercise 7.2

Create a feedback form using a textarea, radio buttons, and checkboxes.

🎯 Exercise 7.3

Create a student admission form with dropdown menus, date input, and file upload support.

Lecture 08 · Core Concepts

Semantic HTML

Requires: Lecture 07

Introduction to Semantic HTML

Semantic HTML means using HTML elements according to their meaning and purpose instead of only for visual structure. Semantic elements clearly describe what their content represents to browsers, developers, search engines, and assistive technologies.

Before HTML5, developers heavily relied on generic containers like <div> and <span>. Semantic HTML introduced meaningful tags that make webpages more organized, accessible, and easier to maintain.

💡 Key Concept
Semantic elements describe the role and meaning of content, not just its appearance.

Why Semantic HTML Matters

  • Improves accessibility for screen readers and assistive technologies
  • Helps SEO by giving search engines meaningful structure
  • Makes code easier to read and maintain
  • Creates cleaner webpage architecture
  • Improves collaboration between developers

Semantic Elements

HTML5 introduced several semantic layout elements used in modern webpage structure.

<header>   <!-- Site header -->
<nav>      <!-- Navigation -->
<main>     <!-- Primary content -->
<article>  <!-- Self-contained -->
<section>  <!-- Thematic group -->
<aside>    <!-- Sidebar -->
<footer>   <!-- Footer -->

The <header> Element

The <header> element represents introductory content or a top section of a webpage or article.

<header>
  <h1>My Blog</h1>
  <p>Learn web development</p>
</header>

Headers commonly contain logos, navigation menus, titles, or introductory text.

The <nav> Element

The <nav> element contains navigation links.

<nav>
  <a href="#">Home</a>
  <a href="#">Courses</a>
  <a href="#">Contact</a>
</nav>

Screen readers use the navigation element to help users quickly move through site menus.

The <main> Element

The <main> element represents the primary content of the webpage.

<main>
  <h2>Welcome to our website</h2>
  <p>This is the main content area.</p>
</main>
✅ Best Practice
A webpage should normally contain only one <main> element because it represents the core content of the page.

The <section> Element

The <section> tag groups related content together.

<section>
  <h2>About Us</h2>
  <p>We teach coding online.</p>
</section>

Sections are thematic groups of content and usually contain headings.

The <article> Element

The <article> element represents self-contained content that can stand on its own.

<article>
  <h2>How to Learn HTML</h2>
  <p>Start with basic tags and structure.</p>
</article>

Articles are commonly used for blog posts, news stories, tutorials, or forum posts.

The <aside> Element

The <aside> tag contains related but secondary content.

<aside>
  <h3>Related Courses</h3>
  <p>Learn CSS and JavaScript next.</p>
</aside>

Asides are often used for sidebars, advertisements, tips, or related links.

The <footer> Element

The <footer> element represents the bottom section of a webpage or article.

<footer>
  <p>© 2026 Code Tutorium</p>
</footer>

Footers usually contain copyright information, contact details, or social media links.

Semantic vs Non-Semantic Elements

Semantic Non-Semantic
<header> <div>
<article> <span>
<footer> <div>

Non-semantic elements do not describe their meaning, while semantic elements provide context and structure.

Complete Semantic Layout Example

<body>

  <header>
    <h1>My Website</h1>
  </header>

  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
  </nav>

  <main>

    <section>
      <h2>Latest Tutorials</h2>

      <article>
        <h3>Learn HTML</h3>
        <p>HTML is the foundation of web development.</p>
      </article>

    </section>

    <aside>
      Related resources here
    </aside>

  </main>

  <footer>
    <p>Copyright 2026</p>
  </footer>

</body>

Accessibility Benefits

Semantic HTML greatly improves accessibility for users with disabilities.

  • Screen readers can understand page structure better
  • Navigation becomes easier for keyboard users
  • Assistive technologies can identify important sections
  • Improves user experience for visually impaired users
♿ Accessibility Insight
Semantic HTML is one of the easiest and most effective ways to make websites accessible to everyone.

SEO Advantages

Search engines use semantic structure to better understand webpage content.

  • Improves content indexing
  • Helps search engines identify important sections
  • Can improve search rankings
  • Makes webpage content more meaningful

When to Use <div>

Even though semantic elements are preferred, <div> is still useful when no semantic element fits the situation.

<div class="card">
  Custom content here
</div>

Use semantic elements whenever possible, and use <div> as a generic container only when necessary.

Common Beginner Mistakes

  • Using too many unnecessary <div> elements
  • Using <section> without headings
  • Placing multiple <main> elements on one page
  • Using semantic tags only for styling purposes
  • Confusing <article> and <section>
🎯 Exercise 8.1

Create a webpage using <header>, <nav>, <main>, and <footer> elements.

🎯 Exercise 8.2

Create a blog layout using <article> and <section> elements.

🎯 Exercise 8.3

Convert a webpage made entirely with <div> tags into a semantic HTML layout.

🌐 Web Development Path

HTML is the foundation of web development. Continue your journey with:

🎨
CSS Styling & visual design
→
 ✨
JavaScript Interactivity & dynamic behavior
→
 🔷
TypeScript Type-safe JavaScript
⭐
Lecture 09 · Advanced

HTML5 APIs

Requires: Lecture 08

Details & Summary

<details>
  <summary>What is HTML?</summary>
  <p>HTML is a markup language.</p>
</details>
Lecture 10 · Advanced

Accessibility

Requires: Lecture 09

ARIA Labels

<button aria-label="Close menu">X</button>
<nav aria-label="Main navigation">...</nav>
Lecture 11 · Advanced

SEO & Meta Tags

Requires: Lecture 10

Essential Meta Tags

<meta name="description" content="Page description">
<meta name="keywords" content="html, css, javascript">
<meta name="author" content="Your Name">
<meta property="og:title" content="Page Title">
Lecture 12 · Advanced

Capstone Project

Requires: All Lectures

Build a Portfolio

Create a complete personal portfolio website using everything learned:

  • Semantic HTML structure
  • Navigation with links
  • Image gallery
  • Contact form
  • Proper meta tags
Lecture 13 · Advanced

Web Components & Custom Elements

⏱ ~35 minAdvancedRequires: Lecture 12

Web Components are a suite of native browser technologies allowing you to create reusable, encapsulated HTML custom elements (like <user-card>) without external frameworks. They rely on three pillars: Custom Elements, Shadow DOM, and HTML Templates.

The Three Pillars of Web Components

  • Custom Elements: JavaScript APIs to define custom HTML tags (e.g. customElements.define("profile-card", ProfileCard)).
  • Shadow DOM: Encapsulated DOM trees and scoped styles that cannot be broken or altered by the parent page's CSS.
  • HTML Templates (<template> & <slot>): Inert markup that does not render on load, but can be stamped out repeatedly with flexible placeholders.

1. The <template> and <slot> Elements

Templates hold markup that the browser parses but does not display until activated via JavaScript:

index.html
<!-- Template defined in HTML -->
<template id="user-card-template">
  <style>
    :host {
      display: block;
      font-family: system-ui, sans-serif;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 1rem;
      background: #ffffff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    h3 { margin-top: 0; color: #1e293b; }
    .role { color: #64748b; font-size: 0.9rem; }
  </style>
  <div class="card">
    <h3><slot name="name">Anonymous</slot></h3>
    <p class="role"><slot name="role">Member</slot></p>
    <div class="bio"><slot>No bio provided.</slot></div>
  </div>
</template>

2. Defining an Autonomous Custom Element with Shadow DOM

Custom element names must contain a hyphen (e.g., user-card) to differentiate them from standard HTML tags:

app.js
class UserCard extends HTMLElement {
  constructor() {
    super();
    // Attach an encapsulated Shadow DOM tree
    const shadowRoot = this.attachShadow({ mode: 'open' });
    
    // Grab template content and clone it
    const template = document.getElementById('user-card-template');
    shadowRoot.appendChild(template.content.cloneNode(true));
  }

  // Observe attribute changes
  static get observedAttributes() {
    return ['status'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'status') {
      console.log(`Status updated from ${oldValue} to ${newValue}`);
    }
  }

  connectedCallback() {
    console.log('UserCard added to DOM');
  }

  disconnectedCallback() {
    console.log('UserCard removed from DOM');
  }
}

// Register the custom element with the browser
customElements.define('user-card', UserCard);

3. Using Your Custom Tag in HTML

Once registered, use it just like any native HTML tag. The content inside fills named <slot> placeholders:

index.html
<user-card status="active">
  <span slot="name">Ada Lovelace</span>
  <span slot="role">Computing Pioneer</span>
  <p>First computer programmer in history.</p>
</user-card>

<user-card>
  <span slot="name">Alan Turing</span>
</user-card>
Shadow DOM Style Scoping

Styles declared inside a shadow root do not leak outside, and global page CSS does not penetrate the shadow root (except for inheritable CSS variables like color or custom properties). This guarantees bulletproof modularity.

⚠️ Common Mistakes
  • Naming a custom element without a hyphen (e.g., <usercard>). The browser will throw a DOMException: Registration failed for type ... The type must contain a hyphen.
  • Calling this.innerHTML = ... before super() in the constructor. Always call super() as the very first statement.
  • Attempting to query child slot elements with this.shadowRoot.querySelector(".my-slot-content"). Slotted content remains in the light DOM; use slot.assignedNodes() instead.
💡 Pro Tips
  • Use mode: "open" when creating a shadow root so developer tools and assistive extensions can inspect component internals.
  • Expose CSS custom properties (e.g., background: var(--card-bg, #fff);) to allow consumers to theme your web component easily.
🎯 Exercise 13.1
  1. Create a custom element called <modal-dialog> that opens when a button is clicked and closes on Escape.
  2. Provide two slots: name="header" and an unnamed default slot for modal body content.
  3. Use Shadow DOM to ensure the backdrop overlay and close button styles do not interfere with page styling.

Why must custom element tag names always include a hyphen (e.g., <my-button>)?

  1. It is required by XML standards
  2. To prevent collisions with future native HTML tags added to the web standard
  3. To instruct the browser to use JavaScript

W3C reserves all single-word element names for standard HTML tags. Hyphenated names guarantee that native browser updates will never break custom elements.

Which method is called automatically when a custom element is inserted into the document?

  1. createdCallback()
  2. connectedCallback()
  3. mounted()

In modern Custom Elements v1, connectedCallback() runs whenever the element is inserted into the DOM tree.

What does the <slot> element do inside a Web Component template?

  1. Fetches dynamic JSON data
  2. Acts as a placeholder that projects children from the light DOM into the shadow tree
  3. Creates a secure iframe

Slots allow consumers to pass custom HTML markup into designated insertion points inside the component.

Lecture 14 · Advanced

SVG & Canvas Basics

⏱ ~35 minAdvancedRequires: Lecture 13

Web graphics fall into two categories: SVG (vector graphics defined in XML, infinitely scalable and accessible) and Canvas (pixel-based raster bitmap manipulated via a high-performance 2D/3D JavaScript rendering context).

Vector (SVG) vs. Raster (Canvas)

FeatureSVG (<svg>)Canvas (<canvas>)
ModelVector (XML DOM Nodes)Pixel Bitmap (Immediate Mode)
ResolutionInfinitely scalable without blurResolution dependent (can blur if scaled)
InteractivityEvery shape can have CSS & click eventsNo DOM nodes; click detection via math coordinates
Best forIcons, charts, illustrations, logosGames, particle systems, video filters, high FPS

1. Scalable Vector Graphics (SVG) in HTML

Embed SVGs directly in HTML to style them with CSS and animate them:

index.html
<!-- Inline SVG example -->
<svg width="200" height="120" viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Rectangle with rounded corners -->
  <rect x="10" y="10" width="180" height="100" rx="15" fill="#f8fafc" stroke="#3b82f6" stroke-width="2"/>
  
  <!-- Circle -->
  <circle cx="60" cy="60" r="30" fill="#6366f1"/>
  
  <!-- Line and Text -->
  <line x1="110" y1="35" x2="170" y2="35" stroke="#94a3b8" stroke-width="3" stroke-linecap="round"/>
  <text x="110" y="65" font-family="sans-serif" font-size="14" fill="#0f172a" font-weight="bold">Vector Art</text>
  <text x="110" y="85" font-family="sans-serif" font-size="11" fill="#64748b">Crisp on all DPIs</text>
</svg>

2. HTML5 <canvas> 2D Graphics

The <canvas> element provides a blank slate rendered with JavaScript:

index.html
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #e2e8f0; border-radius:8px;"></canvas>
app.js
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 1. Draw a filled rectangle
ctx.fillStyle = '#10b981';
ctx.fillRect(20, 20, 120, 80);

// 2. Draw a stroked circle (arc)
ctx.beginPath();
ctx.arc(220, 60, 40, 0, Math.PI * 2);
ctx.strokeStyle = '#6366f1';
ctx.lineWidth = 4;
ctx.stroke();

// 3. Draw text
ctx.font = 'bold 16px sans-serif';
ctx.fillStyle = '#0f172a';
ctx.fillText('Canvas 2D Rendering', 20, 140);

// 4. Draw a path
ctx.beginPath();
ctx.moveTo(20, 170);
ctx.lineTo(380, 170);
ctx.strokeStyle = '#cbd5e1';
ctx.lineWidth = 2;
ctx.stroke();
⚠️ Common Mistakes
  • Setting canvas dimensions with CSS (width: 400px;) instead of HTML attributes (<canvas width="400" height="200">). CSS stretches the bitmap, causing blurry drawings.
  • Forgetting ctx.beginPath() before drawing new shapes in Canvas, causing previous paths to be redrawn repeatedly.
  • Missing viewBox on SVG elements, which breaks responsive scaling across different viewport widths.
💡 Pro Tips
  • To support High-DPI (Retina) screens on Canvas, multiply the width/height attributes by window.devicePixelRatio and scale the context with ctx.scale(ratio, ratio).
  • Always include an aria-label or <title> tag inside inline SVGs for screen-reader accessibility.
🎯 Exercise 14.1
  1. Create an inline SVG icon of a star or shopping cart that changes color on :hover using CSS.
  2. Create an interactive <canvas> that tracks your mouse cursor and draws connected particles or circles where the user clicks.

What happens if you scale an SVG illustration to 10x its original size?

  1. It becomes pixelated and blurry
  2. It remains perfectly crisp and sharp at any magnification
  3. The browser rejects it

SVGs are mathematical vector paths rather than fixed raster pixels, so they scale infinitely without loss of quality.

Why should canvas width and height be set via HTML attributes rather than CSS?

  1. CSS cannot style canvas elements
  2. HTML attributes define the coordinate system bitmap size; CSS scales the rendered image
  3. Attributes make the canvas 3D

The canvas tag attributes specify the actual pixel buffer resolution. Setting size only in CSS stretches the default 300x150 buffer like an image.

Which context is requested for standard 2D drawing on a canvas?

  1. canvas.getContext("webgl")
  2. canvas.getContext("2d")
  3. canvas.getContext("bitmap")

getContext("2d") returns the standard CanvasRenderingContext2D interface.

Lecture 15 · Advanced

Performance & Web Best Practices

⏱ ~30 minAdvancedRequires: Lecture 14

High-performance websites deliver superior user experiences and rank higher in search engines. Master the critical rendering path, resource hints, responsive image optimization with <picture>, lazy loading, and modern Core Web Vitals.

Core Web Vitals & Modern Metrics

  • LCP (Largest Contentful Paint): Measures loading performance. Target: ≤ 2.5 seconds.
  • INP (Interaction to Next Paint): Measures user interaction responsiveness. Target: ≤ 200 ms.
  • CLS (Cumulative Layout Shift): Measures visual stability and unwanted page jumps. Target: ≤ 0.1.

1. Native Image Optimization: WebP, AVIF & Responsive <picture>

Modern formats like AVIF and WebP reduce file sizes by 30–60% compared to legacy JPG and PNG. Use the <picture> element for progressive fallback:

index.html
<!-- Deliver the smallest modern image format supported by the user browser -->
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img 
    src="hero.jpg" 
    alt="Developer coding on laptop" 
    width="1200" 
    height="630" 
    loading="eager" 
    fetchpriority="high"
    decoding="async">
</picture>
Always Specify Explicit width and height

Setting explicit width and height attributes on images allows browsers to calculate the aspect ratio before image bytes arrive, completely eliminating Cumulative Layout Shift (CLS).

2. Native Lazy Loading

Defer loading offscreen images and iframes until the user scrolls near them:

index.html
<!-- Offscreen images below the fold -->
<img src="chart.png" alt="Analytics chart" width="600" height="400" loading="lazy">

<!-- Embedded YouTube video or map -->
<iframe src="https://example.com/map" width="800" height="400" loading="lazy"></iframe>

3. Resource Hints: preconnect, dns-prefetch & preload

Warm up DNS lookups and TLS handshakes for third-party origins like Google Fonts or CDN assets in your <head>:

index.html
<head>
  <!-- Preconnect to external font CDN to save roundtrips -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Preload critical hero image (LCP element) -->
  <link rel="preload" as="image" href="hero.avif" type="image/avif">

  <!-- Defer non-critical JavaScript -->
  <script src="analytics.js" defer></script>
</head>
⚠️ Common Mistakes
  • Setting loading="lazy" on the main hero banner / LCP image. This delays discovery and severely hurts loading scores! Only lazy-load below-the-fold content.
  • Omitting width and height attributes on images, causing the page layout to jump around while images download.
  • Placing large blocking <script src="..."> tags in the <head> without defer or async, freezing HTML parsing.
💡 Pro Tips
  • Use fetchpriority="high" on your primary hero image so the browser prioritizes it above stylesheets or scripts.
  • Audit your pages using Chrome DevTools Lighthouse or PageSpeed Insights regularly to maintain scores above 90+ across all metrics.
🎯 Exercise 15.1
  1. Convert an existing image tag to use <picture> with AVIF, WebP, and JPEG fallback.
  2. Set explicit dimensions and add loading="lazy" to three gallery photos.
  3. Audit a page using Chrome Lighthouse and verify a 0.0 CLS score.

Which Core Web Vital measures page visual stability (avoiding unexpected layout jumps)?

  1. LCP
  2. CLS
  3. FID

Cumulative Layout Shift (CLS) measures visual stability. Missing image dimensions or dynamically injected ads are the primary causes of poor CLS.

Should you add loading="lazy" to the hero image at the top of your landing page?

  1. Yes, lazy-load everything
  2. No, never lazy-load above-the-fold or LCP assets because it delays rendering
  3. Only on mobile

Hero images should be loaded immediately (loading="eager" or fetchpriority="high"). Lazy loading them delays their fetch until layout is complete.

What is the main benefit of the element?

  1. It allows embedding 3D models
  2. It provides progressive format fallbacks (AVIF -> WebP -> JPG) and responsive art direction
  3. It replaces CSS stylesheets

The picture element lets you offer multiple source formats and media queries, allowing browsers to choose the most efficient image format they support.

Lecture 16 · Professional

Final Project — Complete Semantic & Accessible Website

⏱ ~90 minProjectRequires: All Previous Lectures

Synthesize everything you have learned in HTML Mastery by architecting a production-ready, fully accessible, SEO-optimized business website. You will build clean semantic structure, custom elements, accessible forms, meta data, and responsive media.

Project Requirements & Acceptance Criteria

  1. Strict Semantic HTML5: Uses <header>, <nav>, <main>, <section>, <article>, and <footer> with proper heading hierarchy (single <h1>).
  2. Accessibility (WCAG 2.1 AA): Includes a skip-to-content link, proper ARIA labels, form field labels with for/id binding, and keyboard-navigable dialog/details.
  3. SEO & Social Sharing: OpenGraph tags, Twitter cards, meta descriptions, and structured JSON-LD schema.
  4. Performance: Responsive <picture> elements with explicit width/height and lazy loading below the fold.
  5. Web Component: A custom <pricing-card> or feedback element.

Complete Implementation

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Apex Cloud - High Performance Cloud Solutions</title>
  <meta name="description" content="Next-generation serverless cloud infrastructure built for speed, safety, and scale.">
  <link rel="canonical" href="https://example.com/apex-cloud">

  <!-- OpenGraph / Social Meta -->
  <meta property="og:title" content="Apex Cloud - High Performance Cloud Solutions">
  <meta property="og:description" content="Next-generation serverless cloud infrastructure built for speed, safety, and scale.">
  <meta property="og:image" content="https://example.com/og-image.jpg">
  <meta property="og:type" content="website">

  <!-- Resource Hints -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- JSON-LD Structured Data -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    "name": "Apex Cloud",
    "operatingSystem": "All",
    "applicationCategory": "DeveloperApplication"
  }
  </script>

  <style>
    :root { --primary: #3b82f6; --text: #0f172a; --bg: #f8fafc; }
    body { margin: 0; font-family: system-ui, sans-serif; color: var(--text); background: var(--bg); line-height: 1.6; }
    .skip-link { position: absolute; top: -40px; left: 0; background: var(--primary); color: #fff; padding: 8px; z-index: 100; }
    .skip-link:focus { top: 0; }
    header, nav, main, footer { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
    nav ul { list-style: none; display: flex; gap: 1.5rem; padding: 0; }
    .hero { text-align: center; padding: 4rem 1rem; }
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin: 2rem 0; }
    .card { background: #fff; padding: 1.5rem; border-radius: 8px; border: 1px solid #e2e8f0; }
  </style>
</head>
<body>

  <!-- 1. Accessible Skip Navigation Link -->
  <a href="#main-content" class="skip-link">Skip to main content</a>

  <!-- 2. Header and Navigation -->
  <header>
    <div style="display:flex; justify-content:space-between; align-items:center;">
      <a href="/" style="font-weight:bold; font-size:1.4rem; text-decoration:none; color:inherit;">ApexCloud</a>
      <nav aria-label="Main Navigation">
        <ul>
          <li><a href="#features">Features</a></li>
          <li><a href="#pricing">Pricing</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- 3. Semantic Main Content -->
  <main id="main-content">
    
    <!-- Hero Section -->
    <section class="hero">
      <h1>Deploy Globally in Milliseconds</h1>
      <p style="font-size:1.2rem; max-width:600px; margin:0 auto 1.5rem;">
        Engineered for high-concurrency workloads with zero configuration and instant failover.
      </p>
      <a href="#contact" style="display:inline-block; background:var(--primary); color:#fff; padding:0.75rem 1.5rem; border-radius:6px; text-decoration:none; font-weight:600;">
        Start Free Trial
      </a>
    </section>

    <!-- Features Section -->
    <section id="features" aria-labelledby="features-heading">
      <h2 id="features-heading" style="text-align:center;">Built for Modern Engineering Teams</h2>
      <div class="grid">
        <article class="card">
          <h3>⚡ Global Edge Network</h3>
          <p>Over 300 points of presence routing traffic with sub-10ms response latency.</p>
        </article>
        <article class="card">
          <h3>🔒 Zero-Trust Security</h3>
          <p>Automated TLS certificates, mTLS microsegmentation, and hardware security keys.</p>
        </article>
        <article class="card">
          <h3>📊 Real-Time Analytics</h3>
          <p>Instant streaming logs and distributed telemetry traces with zero sampling.</p>
        </article>
      </div>
    </section>

    <!-- Interactive Details Accordion -->
    <section id="faq" style="margin: 4rem 0;">
      <h2>Frequently Asked Questions</h2>
      <details style="margin-bottom: 1rem; background:#fff; padding:1rem; border-radius:6px;">
        <summary style="font-weight:bold; cursor:pointer;">How does pricing work?</summary>
        <p>You only pay for compute seconds consumed with per-millisecond billing granularity.</p>
      </details>
      <details style="background:#fff; padding:1rem; border-radius:6px;">
        <summary style="font-weight:bold; cursor:pointer;">Can I migrate existing Docker containers?</summary>
        <p>Yes, Apex Cloud natively supports standard OCI container images.</p>
      </details>
    </section>

    <!-- Accessible Contact Form -->
    <section id="contact" style="background:#fff; padding:2rem; border-radius:8px; border:1px solid #e2e8f0;">
      <h2>Request Enterprise Demo</h2>
      <form action="/api/contact" method="POST">
        <div style="margin-bottom:1rem;">
          <label for="user-name" style="display:block; font-weight:bold; margin-bottom:0.25rem;">Full Name</label>
          <input type="text" id="user-name" name="name" required style="width:100%; padding:0.5rem; border:1px solid #cbd5e1; border-radius:4px;">
        </div>
        <div style="margin-bottom:1rem;">
          <label for="user-email" style="display:block; font-weight:bold; margin-bottom:0.25rem;">Work Email</label>
          <input type="email" id="user-email" name="email" required style="width:100%; padding:0.5rem; border:1px solid #cbd5e1; border-radius:4px;">
        </div>
        <div style="margin-bottom:1rem;">
          <label for="user-notes" style="display:block; font-weight:bold; margin-bottom:0.25rem;">Project Details</label>
          <textarea id="user-notes" name="notes" rows="4" style="width:100%; padding:0.5rem; border:1px solid #cbd5e1; border-radius:4px;"></textarea>
        </div>
        <button type="submit" style="background:var(--primary); color:#fff; border:none; padding:0.75rem 1.5rem; border-radius:6px; cursor:pointer; font-weight:bold;">
          Submit Inquiry
        </button>
      </form>
    </section>

  </main>

  <!-- 4. Semantic Footer -->
  <footer style="margin-top: 4rem; border-top:1px solid #e2e8f0; text-align:center; color:#64748b;">
    <p>&copy; 2026 Apex Cloud Technologies Inc. All rights reserved.</p>
  </footer>

</body>
</html>
Portfolio Milestone Achieved

Congratulations on mastering HTML5! You have acquired professional mastery over semantic markup, web accessibility guidelines, custom web components, multimedia vector graphics, and high-performance loading architectures.

Topic 17 - Real-World Practical Projects

Project 1: Semantic Accessible Developer Portfolio Page

Hands-on Project Semantic HTML5
🎯 Project Goal

Build a modern, fully accessible HTML5 single-page developer portfolio using semantic elements like

,

Project Overview

Master clean HTML structure, accessible ARIA attributes, semantic headings hierarchy (H1-H3), and embedded media elements.

Full Code Implementation

index.html



    
    
    Jane Doe — Senior Full Stack Developer


    

        
    


    

        

            
Hi, I'm Jane Doe

            
Full-Stack Web Developer specializing in React, Node.js, and Cloud Solutions.

        


        

            
Featured Projects

            

                
E-Commerce Web Application

                
Built with React, Node.js, and PostgreSQL.

                View Source Code
            

        


        

            
Get In Touch

            

                
                

                
                

                
                

                
            

        

    


    

        
© 2026 Jane Doe. All rights reserved.
Practice Challenge

Add an embedded

/ accordion element for FAQ items!