How to Make a Simple To-Do List with Only HTML: A Beginner's Tutorial

Want to build a project to practice your new HTML skills? A to-do list is a classic! But what if you want to build one using only HTML, without any JavaScript or CSS? It's not only possible, but it's also the perfect way to learn about some of the most important semantic tags in the language. This tutorial will show you how.

We won't be building a dynamic application—you won't be able to add new items without editing the code. Instead, you'll build a structurally sound, semantic, and accessible checklist. This is the solid foundation that all web development is built on. Let's get started.

What You'll Build: The Final Code

First, let's look at the final product. This is all the HTML you need. You can copy this, save it as an `index.html` file, and open it in your browser right now to see it in action.

<form>
  <fieldset>
    <legend class="text-2xl font-semibold p-2">My Daily Tasks</legend>
    
    <div style="margin-bottom: 10px;">
      <input type="checkbox" id="task1" name="task1">
      <label for="task1">Finish this HTML tutorial</label>
    </div>
    
    <div style="margin-bottom: 10px;">
      <input type="checkbox" id="task2" name="task2">
      <label for="task2">Learn about semantic tags like &lt;fieldset&gt;</label>
    </div>
    
    <div style="margin-bottom: 10px;">
      <input type="checkbox" id="task3" name="task3">
      <label for="task3">Plan my next project</label>
    </div>
    
    <div style="margin-top: 20px;">
      <button type="reset">Reset List</button>
    </div>
    
  </fieldset>
</form>

    

Notice a few things: the checkboxes work, clicking the text (the \`<label>\`) also checks the box, and the "Reset List" button will uncheck all the items for you. This is all built-in browser functionality, brought to life with the right HTML tags.

Step-by-Step Breakdown: Crafting Your To-Do List

Let's break down that code, tag by tag, so you understand the "why" behind each piece.

Step 1: The `<form>` Container

A to-do list is, semantically, a form. It's a list of inputs that a user interacts with. The `<form>` tag is the container for all form elements, like checkboxes, text fields, and buttons. Even though we aren't "submitting" this form to a server, using the tag tells the browser and screen readers, "This is an interactive group of controls."

Step 2: The `<fieldset>` and `<legend>` for Grouping

This is the most important semantic trick. A `<fieldset>` tag is used to group related controls within a form. A `<legend>` tag provides a caption or title for that group. By wrapping our tasks in a `<fieldset>` and giving it a `<legend>` of "My Daily Tasks," we are explicitly telling assistive technologies (like screen readers) that all the checkboxes inside belong to this group. It's a huge win for accessibility.

<form>
  <fieldset>
    <legend>My Daily Tasks</legend>
    ... tasks go here ...
  </fieldset>
</form>

    

Step 3: Adding Tasks with `<input>` and `<label>`

This is the core of our list. Each task is a combination of two tags:

1. `<input type="checkbox">`: This HTML tag tells the browser to render a clickable checkbox.
2. `<label>`: This tag provides the text description for the input.

The magic is how they are linked. Notice the `id` on the `<input>` and the `for` on the `<label>`. The `for` attribute of the label must exactly match the `id` of the input. This does two things: 1. It tells screen readers that the label "Finish this HTML tutorial" describes the first checkbox. 2. It allows the user to click on the text label to toggle the checkbox, which is great for usability, especially on mobile devices.

<div>
  <input type="checkbox" id="task1" name="task1">
  <label for="task1">Finish this HTML tutorial</label>
</div>

    

Step 4: The `<button type="reset">`

Finally, we add a `<button>`. By setting its `type` attribute to `"reset"`, we get free functionality from the browser. When clicked, this button will reset all controls inside its parent `<form>` to their default values (which, for checkboxes, is "unchecked"). It's a simple, no-JavaScript way to add a bit of interaction.

Limitations and Next Steps

This is a static list. You've built the "skeleton" of a to-do list, but it's not a full application. To add features like saving tasks or adding new tasks without editing the code, you would need to learn:

• CSS: To make your list look beautiful, change colors, fonts, and layout.
• JavaScript: To add interactivity, like creating new tasks, deleting tasks, and saving them to the browser's local storage.

But don't rush! Mastering semantic HTML is the most important first step. You've learned how to build a page that is accessible and makes sense to a browser, not just one that looks a certain way.