Adding More Items to Your To-Do List

Hello! Today, we are going to learn how to add more items to our to-do list and add formatting, all using HTML. This might look like a small step, but remember, every long journey begins with small steps. By the end of this lesson, you will be comfortable adding and modifying elements in our HTML file.

Remember how we talked about HTML standing for Hypertext Markup Language? HTML gives structure to our web pages and is made up of a series of elements, which you can think of as building blocks. Today, we are going to add more blocks to our building!

Before we jump into the fun part, let's take a moment to remember the main building blocks of HTML — the elements. Can you think of HTML elements like the Lego blocks used to build a Lego house? Each block has its own shape and size, just like HTML elements.

The HTML document is made up of a range of elements such as <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <ul>, <ol>, <li>, and so on.

Not only do these elements give shape and structure to the document, but they also tell the browser how to display the content of these elements. For example, the <li> tag defines a list item, and it is usually part of an ordered (<ol>) or unordered (<ul>) list.

Lists are commonly used in various real-world applications, such as product listings on e-commerce sites or task lists in project management tools.

<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li>Coffee</li>
      <li>Milk</li>
    </ul> 
  </body>
</html>

Now, let's practice adding more items to our list. Expanding the content of our webpage will make it more informative and useful. The previous list contains two items: "Coffee" and "Milk." But what if we wanted to add more items, say "Bread" and "Butter"? We can simply add two more <li> elements to our unordered list <ul>.

<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li>Coffee</li>
      <li>Milk</li>
      <li>Bread</li>
      <li>Butter</li>
    </ul> 
  </body>
</html>

Just like that, we added two more items to our list!