Ultimate HTML Masterclass (Part 3: Exercises)

1. Basic HTML Exercises

Exercise 1.1: Create Your First Page

Create a new HTML file
Add <!DOCTYPE html>, <html>, <head>, <body>
Include a <title> and one <h1> heading
Add a paragraph introducing yourself

Goal: Learn basic HTML page structure

Exercise 1.2: Experiment with Attributes

Add an id and a class to a paragraph
Insert an image with src, alt, width, and height
Add a link to an external website with title

Goal: Understand element attributes and how to use them

2. Text and Headings Exercises

Exercise 2.1: Create a Heading Hierarchy

Use <h1> for page title
Add 2 <h2> headings for sections
Under each <h2>, add 2 <h3> subheadings
Add paragraphs under each heading

Goal: Practice headings for semantic structure

Exercise 2.2: Text Formatting

Create a paragraph with:
Bold and strong text
Italics and emphasis
Subscript and superscript
Highlight important words

Goal: Learn semantic text formatting

3. Links Exercises

Exercise 3.1: Absolute and Relative Links

Add one link to an external site (absolute)
Add one link to a local page (relative)

Exercise 3.2: Anchor Links

Create a long page with sections
Add a table of contents with links to each section using IDs

Goal: Understand linking between pages and sections

4. Lists Exercises

Exercise 4.1: Unordered and Ordered Lists

Create a shopping list using <ul>
Create steps for a recipe using <ol>

Exercise 4.2: Nested Lists

Make a list of fruits and vegetables with subcategories
Add a description list (<dl>) for fruit names and their colors

Goal: Learn list structures and hierarchy

5. Images and Multimedia Exercises

Exercise 5.1: Images

Insert three images with different sizes
Add meaningful alt text to each

Exercise 5.2: Audio and Video

Embed one audio file with controls
Embed one video file with controls
Add a caption or fallback content

Goal: Practice multimedia embedding

6. Tables Exercises

Exercise 6.1: Basic Table

Create a table showing students’ marks
Include headings and rows

Exercise 6.2: Advanced Table

Merge cells using rowspan and colspan
Add a caption to the table

Goal: Learn how to structure and format data tables

7. Forms Exercises

Exercise 7.1: Simple Form

Create a contact form with:
Name (text input)
Email (email input)
Gender (radio buttons)
Country (dropdown)
Message (textarea)
Submit button

Exercise 7.2: Form Validation

Add required fields using required attribute
Use type="email" for email validation
Add placeholder text for guidance

Goal: Learn form creation and basic validation

8. Semantic HTML5 Exercises

Exercise 8.1: Structure a Page

Create a page using <header>, <footer>, <main>, <article>, <section>, <aside>
Include navigation in <header>
Add a sidebar in <aside> with links

Exercise 8.2: Figure and Figcaption

Insert an image using <figure>
Add a caption describing the image

Goal: Practice semantic HTML5 layout

9. Advanced HTML5 Exercises

Exercise 9.1: Canvas and SVG

Add a <canvas> element (you don’t need JS yet)
Add an <svg> with a simple shape (circle or rectangle)

Exercise 9.2: Data Attributes

Create a <div> with custom data-* attributes
Write a paragraph that references the data

Exercise 9.3: Interactive Tags

Use <details> and <summary> for collapsible content
Create a <dialog> element with sample content

Goal: Explore advanced HTML5 features

10. Meta, SEO, and Accessibility Exercises

Exercise 10.1: Meta Tags

Add <meta> tags for description, keywords, viewport
Test page responsiveness in a browser

Exercise 10.2: Accessibility

Add alt text to all images
Use semantic headings and lists
Add <label> for all form inputs

Goal: Understand SEO and accessibility practices

11. Mini Projects

Project 11.1: Personal Portfolio Page

Use <header>, <nav>, <main>, <section>, <footer>
Add about, projects, and contact sections
Include images, links, and a contact form

Project 11.2: Simple Blog Page

Create multiple <article> elements
Include headings, paragraphs, images, and captions
Add sidebar with recent posts

Project 11.3: Media Gallery Page

Include at least 4 images and 2 videos
Use <figure> and <figcaption> for all media
Add descriptive text for each media item

Project 11.4: Interactive FAQ

Use <details> and <summary> for questions and answers
Include at least 5 FAQs

Goal: Apply all concepts learned in a real project

12. Challenge Exercises (Advanced)

Create a multi-page website with navigation links
Make a responsive layout using only HTML and semantic tags
Embed a media gallery with images and videos
Build a registration form with all input types and validation
Create a blog layout using <article> and <section>

Goal: Reinforce advanced skills and project-based learning