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.

Bringing it Local: Learning HTML in Madrid (GEO-Targeted Example)

Learning the foundations of HTML is your first step into the professional tech world. For developers in Madrid, the local community is incredibly vibrant and welcoming to beginners. Connecting with other learners and senior developers at local meetups can give you the motivation and context to turn this tutorial into a career.

This kind of locally-focused information is key for SEO (Search Engine Optimization) because it answers a specific need for users in a certain area (like "web development beginners Madrid"). It shows that the content is relevant to their specific context, which builds trust and authority.

Top Beginner-Friendly Dev Meetups in Madrid

Here are some great communities in Madrid to check out after you've finished this tutorial and are ready for your next step.

A Guide to Ranking: SEO Strategy for This Tutorial

This section is a meta-analysis of the Search Engine Optimization (SEO) strategy for this very article, just like in the example you provided. It's designed to show how this content is built to rank on Google.

Keyword Strategy

The content is built around a core set of keywords with high beginner intent.

• Primary Keywords: "html to-do list," "html tutorial," "to-do list with html only."
• Secondary/Long-Tail Keywords: "how to make a to-do list in html," "simple to-do list html code," "beginner html tutorial," "semantic html tags," "html fieldset legend tutorial," "web development beginners Madrid."

Content Structure and E-A-T

The article is structured for both human readability and Google's crawlers, aiming to build E-A-T (Expertise, Authoritativeness, Trustworthiness).

• Expertise: We show expertise by not just providing code, but explaining the why behind semantic tags like `<fieldset>` and `<label>`. We also manage expectations by explaining the limitations of an HTML-only solution.
• Structure: Clear H1, H2, and H3 tags create a logical hierarchy that Google can understand.
• Readability: Short paragraphs, lists, and code blocks make the tutorial easy to scan and follow.

Featured Snippet Optimization

The "Step-by-Step Breakdown" section is explicitly formatted to be captured by Google as a "featured snippet." The numbered list (Step 1, Step 2, etc.) and the clear code blocks make it easy for Google to see this as a direct answer to a "how-to" query. The final code block at the beginning is also a prime target for a "quick answer" box.

Conclusion: Your First Step in Web Development

Congratulations! You've successfully built a complete, functional, and accessible to-do list using only HTML. You've learned how to use forms, group elements with <fieldset> and <legend>, and properly link inputs and labels for maximum accessibility.

This project is the perfect foundation. The "skeleton" you built is now ready to be styled with CSS and brought to life with JavaScript. You're well on your way to becoming a frontend developer. Keep building!