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.
HTML, XML1<!DOCTYPE html> 2<html> 3 <body> 4 <ul> 5 <li>Coffee</li> 6 <li>Milk</li> 7 </ul> 8 </body> 9</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>.
HTML, XML1<!DOCTYPE html> 2<html> 3 <body> 4 <ul> 5 <li>Coffee</li> 6 <li>Milk</li> 7 <li>Bread</li> 8 <li>Butter</li> 9 </ul> 10 </body> 11</html>
Just like that, we added two more items to our list!
While building our lists, you might want to emphasize or format certain parts of your text. HTML provides various inline elements that let you do just that:
The <u> element is used to underline text.
HTML, XML1<ul> 2 <li><u>Coffee</u></li> 3 <li>Milk</li> 4</ul>
The <s> element is used to indicate that text is no longer relevant or accurate, rendering it with a strikethrough.
HTML, XML1<ul> 2 <li>Coffee</li> 3 <li><s>Milk</s></li> 4</ul>
The <i> element is used to denote a text in an italicized style, often used for scientific names, terms, or phrases from another language.
HTML, XML1<ul> 2 <li>Coffee</li> 3 <li><i>Espresso</i></li> 4</ul>
You can also combine these formatting elements to achieve more complex text styling.
HTML, XML1<ul> 2 <li><u>Coffee</u></li> 3 <li><s>Milk</s></li> 4 <li>Bread (<i>Multigrain</i>)</li> 5 <li>Butter (<b>Salted</b>)</li> 6</ul>
Feel free to use these inline elements to add more context or emphasis to your to-do list items!
You've just taken one step further into the world of HTML. You've learned how to structure your HTML document and add more items to your personal to-do list using HTML elements. What's more, you've seen how easy it is to include additional details for each item on your list! That's fantastic progress!