HTML Exercises

A complete set of exercises covering all HTML topics from basics to advanced techniques.

1. 📑 HTML Fundamentals

Exercise: Create a Basic HTML Page

Create a basic HTML structure with a title in the head section and a simple heading and paragraph in the body.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic HTML Page</title>
</head>
<body>
    <h1>Welcome to HTML!</h1>
    <p>This is my first HTML page.</p>
</body>
</html>

Explanation: This is the simplest HTML structure. It includes the <head> for metadata and the <body> for the content.

2. 📝 HTML Basic Elements

Exercise: Use Basic HTML Elements

Create a page that includes:

An unordered list (<ul>) with 3 items.
An ordered list (<ol>) with 3 items.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
 
<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Explanation: Use <ul> for an unordered list and <ol> for an ordered list. The list items are enclosed in <li> tags.

3. ✨ HTML Text Formatting

Exercise: Format Text Using HTML Tags

Create a paragraph with both bold and italicized text.

<h1>HTML Text Formatting</h1>
<p>This is a <strong>bold</strong> and <em>italic</em> text.</p>

Explanation: The <strong> tag makes text bold, and the <em> tag italicizes the text.

4. 📋 HTML Lists

Exercise: Create a Nested List

Create a list with nested items.

<ul>
    <li>Item 1
        <ul>
            <li>Subitem 1.1</li>
            <li>Subitem 1.2</li>
        </ul>
    </li>
    <li>Item 2</li>
</ul>

Explanation: Nested lists are made by placing another <ul> inside an <li>.

5. 🔗 HTML Links

Exercise: Create Hyperlinks

Create two links: one external and one internal.

<a href="https://www.example.com" target="_blank">Visit Example</a>
<a href="#section1">Go to Section 1</a>
 
<h2 id="section1">Section 1</h2>

Explanation: <a> tags are used for creating links. The href attribute specifies the URL or anchor.

6. 🖼️ HTML Images

Exercise: Embed an Image

Insert an image with an alt description.

<img src="https://via.placeholder.com/150" alt="Placeholder Image">

Explanation: The <img> tag is used to display images. The alt attribute provides a textual description of the image for accessibility.

7. 📊 HTML Tables

Exercise: Create a Table

Build a table with a header and two data rows.

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
    <tr>
        <td>Data 3</td>
        <td>Data 4</td>
    </tr>
</table>

Explanation: <th> is used for table headers, and <td> is used for table data cells.

8. 📝 HTML Forms

Exercise: Create a Simple Form

Create a form that includes:

A text input for a name.
Radio buttons for gender.
A submit button.

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
 
    <p>Gender:</p>
    <label>
        <input type="radio" name="gender" value="male"> Male
    </label>
    <label>
        <input type="radio" name="gender" value="female"> Female
    </label>
 
    <button type="submit">Submit</button>
</form>

Explanation: Forms are used to collect user data. The <input> tag is used to gather input, and <button> is used to submit the form.

9. 🎥 HTML Multimedia

Exercise: Embed a Video

Embed a video element with controls.

<video controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Explanation: The <video> tag allows you to embed video content. The controls attribute adds playback controls.

10. 🏷️ HTML Semantic Elements

Exercise: Use Semantic HTML Elements

Create a page with header, main content, and footer sections.

<header>
    <h1>Welcome to My Website</h1>
</header>
 
<main>
    <section>
        <h2>About Us</h2>
        <p>We provide quality services.</p>
    </section>
</main>
 
<footer>
    <p>&copy; 2022 My Website</p>
</footer>

Explanation: Semantic elements like <header>, <main>, and <footer> provide meaning and improve SEO.

11. ⚙️ HTML Block vs Inline

Exercise: Block and Inline Elements

Use block and inline elements.

<div style="background-color: lightblue;">This is a block-level element</div>
<span style="background-color: lightgreen;">This is an inline element</span>

Explanation: Block-level elements, like <div>, take up the full width, whereas inline elements, like <span>, take up only as much width as the content.

12. ✨ HTML Entities

Exercise: Display Special Characters

Use HTML entities to display special characters.

<p>&lt;div&gt; is a block-level element.</p>
<p>To represent a copyright symbol, use &copy;.</p>

Explanation: HTML entities allow you to display special characters like <, >, and &.

13. 🛠️ HTML Attributes

Exercise: Use Various Attributes

Add attributes to elements like href, alt, and id.

<a href="https://www.example.com" id="exampleLink">Click Here</a>
<img src="image.jpg" alt="Example Image">

Explanation: Attributes like href specify link destinations, and alt provides descriptions for images.

14. 🔧 HTML Meta Tags

Exercise: Add Meta Tags

Add meta tags for charset, description, and author.

<head>
    <meta charset="UTF-8">
    <meta name="description" content="This is my awesome website!">
    <meta name="author" content="John Doe">
</head>

Explanation: Meta tags provide additional metadata to the page, like the character encoding and description.

15. 🛋️ HTML Layout

Exercise: Create a Flexbox Layout

Use Flexbox to create a layout with two columns.

<div style="display: flex;">
    <div style="flex: 1; background-color: lightgray;">Left Column</div>
    <div style="flex: 2; background-color: lightblue;">Right Column</div>
</div>

Explanation: Flexbox is a CSS layout system that allows you to create flexible and responsive layouts.

16. 🌍 HTML APIs (HTML5)

Exercise: Use Geolocation API

Create a button that displays the user’s current location.

<button onclick="getLocation()">Get Location</button>
<p id="location"></p>
 
<script>
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            document.getElementById("location").innerHTML =
                "Latitude: " + position.coords.latitude +
                "<br>Longitude: " + position.coords.longitude;
        });
    } else {
        document.getElementById("location").innerHTML = "Geolocation is not supported by this browser.";
    }
}
</script>

Explanation: The Geolocation API allows you to get the user’s geographical position.

17. 🧑‍🦯 HTML Accessibility

Exercise: Use ARIA for Accessibility

Add ARIA roles for better accessibility.

<button aria-label="Close" onclick="closeWindow()">X</button>

Explanation: ARIA attributes improve the accessibility of web pages for users with disabilities.

18. 🏆 HTML Best Practices

Exercise: Follow Best Practices

Ensure that your HTML follows these best practices:

Proper indentation.
Using semantic tags.
Adding alt attributes for images.
Adding labels for form elements.

19. 🖌️ HTML Advanced Topics

Exercise: Implement an HTML5 Canvas

Draw a rectangle on an HTML canvas.

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 75);
</script>

Explanation: The <canvas> tag allows you to draw graphics on a web page using JavaScript.

HTML Exercises

On this page