HTML tags

Published in

Software-Dev-Explore

4 min readAug 19, 2019

This post is about html tags as know as html element.

Here I am going to discuss about few HTML tags. The h tag, ol tag, ul tag and li tag. These tags are open and close tags. By open and close I mean it start with this for instance<ul> then you have close tag </ul>.

Here are some brief about these tags.

h tag : This is also known as heading tag you can see it in html like this <h1></h1>.

ol tag:This is ordered list tag inside ol tag, you have bunch of list. This tag is used to create an ordered list.

ul tag: This is unordered list tag inside ul tag , you have bunch of list. This tag is used to create an unordered list.

li tag: This is known as list and it strand for list. li is wrapped inside either ol or ul.

Let’s practice

Create a text file and give it a name index.html. Now type following html

<!DOCTYPE html>
<html>
<head>
 <title>This is first html</title>
</head>
<body>
</body>
</html>

Note: tag <title> in <head> describe title of web page. Any text between <title> and </title> will be showed on tab in side your browser.

H tag

Between <body></body> type following tag

<h1>A big header</h1>

Save your index.html file and open it in browser then you can see a big bold heading on your web page say “A big header”. Remember that because it need to be display on web page so you need to type this header between <body></body> and this also the same for following few tags.

Heading give you 6 type of headings, from h1 h2…..to h6. Now add following code

 <h1>h1 heading</h1>
 <h2>h2 heading</h2>
 <h3>h3 heading</h3>
 <h4>h4 heading</h4>
 <h5>h5 heading</h5>
 <h6>h6 heading</h6>

Save file and open it in browser. Now you see all headings.

Cool. Base on the picture you can tell the difference in those heading from h1 to h6.

ul tag

ul tag is unordered list, so if you have a list of items and they are not ordered then you can wrapped them in ul tag. Now let’s create ul tag.

<ul>
</ul>

Note: you can write ul tage in one line or you can write it in separate lines, they are the same. Usually if you have inner tags you will need to write in separate lines for the sake of readability.

Ok. Now save file and open it in browser. Now you see…….nothing. What happen? Well because ul only tell browser that there is going to be an unordered list but all list has not yet defined, so it means it is an empty unordered list.

So How do you define list?

li tag

li tag is used to define each single item in list. Remember we define an unordered list with <ul></ul>. Now let’s define list. Add following code between <ul></ul>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Note: you notice that there is an indentation between ul and li. It is not necessary but for readability, it is recommend to have indentation. What if you have nested tags without indentation, can you still understand?

Save your file and open it in browser. You can see your list is displayed on web page.

ol tag

ol tag is just like ul, but ol is an ordered list. As same as how you did with ul, in ol you do exactly the same. Add following code.

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>

Save file and open it in browser. Now you can see

Your items is in ordered. If you remove one item from list then the number 1 to 4 will be update automatically.

Nested list

With ol or ul you can do nested list. Here add following code

<ul> <!-- first level -->
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li> <!-- an ordered list inside fourth item  -->
   <ol> <!-- second level -->
    <li>Sub item 1</li>
    <li>Sub item 2</li>
    <li>Sub item 3</li>
    <li>Sub item 4</li>
   </ol>
  </li>
 </ul>

This is a 2 levels nested list. At first level, it is unordered list with 4 items. At the fourth item in first level, it has an ordered list which have 4 sub items.

Now you understand ol, ul, li and nested list.

Here is example code