Core Concepts: Structure

HTML = Structure, not appearance HTML tells the browser what things are — a heading, a list, a button. It has zero say in how they look.
Tags & Elements An element is an opening tag, content, and closing tag: <h1>Tasks</h1>. Tags wrap content to give it meaning.
The DOM The browser parses HTML into a tree called the DOM (Document Object Model). All later technologies depend on this tree existing.
Semantic HTML Use elements for their meaning. We use <ul> and <li> because this is logically a list of items.

What's missing? Everything else. There is no styling (it looks like a document from 1995) and no interactivity (clicking "Add" or "Delete" does absolutely nothing).

Source Code

<!-- The Todo List (Raw HTML) -->
<div id="app">

  <h1>My Tasks</h1>
  
  <p>1 of 2 tasks completed</p>

  <!-- Form to add new tasks -->
  <form>
    <input type="text" placeholder="What needs to be done?">
    <button type="button">Add Task</button>
  </form>

  <!-- Unordered list for our tasks -->
  <ul>
    <!-- List items -->
    <li>
      <input type="checkbox" checked>
      <span>Learn HTML structure</span>
      <button>Delete</button>
    </li>
    
    <li>
      <input type="checkbox">
      <span>Add CSS styling</span>
      <button>Delete</button>
    </li>
  </ul>

</div>

↓ Raw browser defaults. No stylesheet applied.

My Tasks

1 of 2 tasks completed

Learn HTML structure
Add CSS styling

The browser applies its own user-agent stylesheet — giving Times New Roman, blue links, standard checkboxes, and grey buttons. This is HTML's baseline appearance before any CSS exists.