In this article, I will show you how to create headings and lists in HTML, using h1 -> h6 and ul – li tags.

When presenting an article in Word, we will put heading 1 for the main title of that article. Next is to put heading 2 for large items, inside each large item we will put headings 3. And in HTML too, we will use heading tags (abbreviated as h ) to present on the web.

Next I also introduce the ul tag and the li tag, these are two pairs of tags that often go together to create list items. Come on, let's get started.

Create headings in HTML

The h tag ( heading ) is used to create the main title and subheadings for a web page, it not only has the effect of emphasizing the titles but also works in the field of website SEO.

We have a total of 6 h tags, from h1 -> h6 and the default font size of each tag will decrease gradually. H1 will have the largest size, followed by h2 .. and finally h6.

 <h1>Tiêu đề H1</h1> <h2>Tiêu đề H2</h2> <h3>Tiêu đề H3</h3> <h4>Tiêu đề H4</h4> <h5>Tiêu đề H5</h5> <h6>Tiêu đề H6</h6>

For you to understand better, please see how I presented in this article as follows:

• The main title of the article I put the h1 tag " HTML tags for heading and list formats "
• The two subheadings " heading formatting tag " and " list formatting tag " use the h2 tag because it's a small part of the h1
• Similarly, if in each h2 tag, if it is further divided, we will use the h3 tag.

Create lists in HTML

If heading is used to create the main title and subheading for the items, the list tag is used to list the data. This presentation is quite common when working with Word.

Example : Suppose I have 3 items, now I will list them as follows.

• item1
• item2
• item3

To create the above structure, we must combine ul and li tags. Where the ul tag is used to declare a list of items and the li tag is used to declare each item.

With the above example, its HTML structure will look like this:

 <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul>

In case you want to have a sub-item, meaning that each item will have a list of sub-items, we just need to create an ul tag inside that item.

For example : Item2 will have additional child items as follows.

• item1
• item2
  • item2.1
  • item2.2
• item3

Now the HTML structure will look like this:

 <ul> <li>item1</li> <li>item2 <ul> <li>​item2.1</li> <li>item2.2</li> </ul> </li> <li>item3</li> </ul>

If you want to create a list marked with numbers like this:

1. Item1
2. Item2
3. Item3

Then use the ol tag in conjunction with the li tag as follows:

 <ol> <li>item1</li> <li>item2</li> <li>item3</li> </ol>

Self-made exercises to create headings and lists in HTML

The topic is as follows : Write an article using HTML and CSS, using heading tags to create headings and subsections. Inside each item use ul and li tags to create a list.

Usually we use ul and li tags to build multi-level menus, vertical menus and horizontal menus. However, to do that, you must combine with CSS. So, after learning the two parts of HTML and CSS, we will do those practical examples.