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)

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

Goal: Reinforce advanced skills and project-based learning