Bài 04: Các thẻ HTML định dạng heading và list - Học HTML căn bản & nâng cao

Trong bài này mình sẽ tìm hiểu hai nhóm thẻ dùng để nhấn mạnh nội dung của một trang web và chia ra từng mục lục giúp cho trang web dễ nhìn hơn. Vấn đề này không những thân thiện với người dùng mà nó còn có tác dụng khá tốt trong việ SEO website.

1. Thẻ định dạng Heading

Thẻ Heading dùng để tạo tiêu đề chính và các tiêu đề phụ cho một trang web, nó không những có tác dụng nhấn mạnh tiêu đề mà còn có tác dụng trong SEO, nghĩa là nếu sử dụng đúng từng thẻ thì sẽ có tác dụng rất có lợi cho SEO. Chúng ta có tổng cộng 6 thẻ từ h1 -> h6 và kích thước mặc định của từng thẻ sẽ giảm dần.

Ví dụ: XEM DEMO

<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>

Để bạn hiểu rõ hơn thì bạn xem cách mình trình bày trong bài viết này như sau:

• Tiêu đề chính của bài mình đặt thẻ h1 "Bài 04: Các thẻ HTML định dạng heading và list"
• Hai tiêu đề phụ "thẻ định dạng heading" và "thẻ định dạng list" dùng thẻ h2 vì nó là phần nhỏ của h1
• Tương tự như vậy nếu trong mỗi thẻ h2 nếu chia nhỏ ra nữa thì ta sẽ dùng thẻ h3.

2. Thẻ định dạng List

Tương tự như Heading, các thẻ định dạng List được dùng để tạo các danh sách từng item.

Ví dụ:

• item1
• item2
• item3

Để tạo được cấu trúc trên thì chúng ta phải kết hợp các thẻ ul và li. Trong đó thẻ ul dùng khai báo danh sách items và thẻ li dùng khai báo cho từng item.

Với ví dụ trên thì cấu trúc HTML của nó sẽ như sau: XEM DEMO

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

Trường hợp bạn muốn có sub-item, nghĩa là mỗi item sẽ có danh sách items con như sau:

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

Thì lúc này cấu trúc HTML sẽ như sau: XEM DEMO

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

3. Lời kết

Thông thường chúng ta hay sử dụng thẻ ul và li để xây dựng menu đa cấp, menu dọc và menu ngang đều được. Tuy nhiên để làm được điều đó thì ban phải kết hợp với CSS, vì vậy sau khi học xong hai phần HTML và CSS thì chúng ta sẽ làm các ví dụ thực tế đó.