Heading and List in HTML
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
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
h1tag " HTML tags for heading and list formats "
- The two subheadings " heading formatting tag " and " list formatting tag " use the
h2tag because it's a small part of the
- Similarly, if in each
h2tag, if it is further divided, we will use the
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.
To create the above structure, we must combine
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.
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:
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
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.