Where the hack are bullets in HTML and why do we call them UL? And, what is LI?

This is one of our super fast lectures. We want to give you skills in the shortest time possible! We are here to teach you HTML essentials (check out our article on basic HTML tags), so lets start.

Ever wondered how to make a list of ingredients for a recipe in HTML (learn what is HTML)? We will make something like in the picture bellow.

 

But, how will we do it? 

Every page needs a title

This is a link to plunker tool for making HTML (a blank template with HTML and body):
HTML and Body blank template



We start with an <h1> tag, sounds strange, but it means h1 is just the biggest title you can have! Even google thinks it is the most important thing on your web page.

This is how we say to our web page, “look this is an important title, it has to be big too”, and as you can see on the image above, it is. We also need to mark where title begins and where it ends; this is why we use <h1> at the beginning and </h1>  at the end (yes, with a slash before the h),we usually call them an opening and closing tag. 

Now that we have a title, we want to add a list

Do you want to know how to make a list?

You will need an opening  <ul> tag and closing </ul> tag, this is a command for a list, with <ul></ul> you say to the browser, hey I want a list. We also need to add list items inside this command, but just so you know <ul></ul> is always a command for a list. (It means Unordered List)

We need to add bullets to the recipe, to create a list of ingredients. Every time you try to put the bullets in your code, you will need to use an opening <li> tag and end the bullet with a closing </il> tag. Use <li></li> for every bullet separately! You can use as many items for your list as you want, but remember to put each of them in <li> </li> tags.

When you finish adding all your bullets, just remember to add </ul> to your list (like we said this closing </ul>  tag represents the dot at the end of the sentence.)

 

Try it now!

Wanna try it out, no problem, here is a link to our list of ingredients for a secret recipe where you will see an editor, where you can change the text and see what happens.

 

 

Wanna learn more?

Best of all if you want to learn more, we have a great course for you at Codebrainer, by the end of the course you will have a full and operating Recipe web page! Yes, a working recipe page, one that you can show to your colleagues, parents, or just use it to store all your secret recipes!

You will learn by watching us do it and we will give you the code, so you can try and change colors, change texts… Step by step you will make it work.

For those who want to learn even more there is even a bonus, that teaches you how to make real working website, where you can change the recipes on the spot, just like a modern cooking websites.