1.4. Heading và List trong HTML

 


Demo : https://www.lenlop123.com/2020/09/14-heading-va-list-trong-html.html

<!-- Thẻ h (heading) dùng để tạo tiêu đề chính (SEO) -->
<h1 style="font-size:60px;">Heading 1</h1>
<hr>

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

<!-- Thẻ list liệt kê danh sách dữ liệu - làm menu -->
<!-- List ko có đánh thứ tự -->
<h2>An Unordered HTML List</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  
<hr>

<!-- List có đánh thứ tự -->
<h2>An Ordered HTML List</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
<hr>


1. Tạo heading trong HTML

Thẻ h (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 cho các tiêu đề mà còn có tác dụng trong lĩnh vực SEO website.

Chúng ta có tổng cộng 6 thẻ h, từ h1 -> h6 và kích thước font chữ mặc định của từng thẻ sẽ giảm dần. H1 sẽ có kích thước lớn nhất, tiếp theo là h2.. và cuối cùng là h6.

Ví dụ :

1
2
3
4
5
6
<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>

2. Tạo list trong HTML

Thẻ list có công dụng là liệt kê danh sách dữ liệu.

Ví dụ: Giả sử mình có 3 item, lúc này mình sẽ liệt kê chúng như sau.

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

Ví dụ :

1
2
3
4
5
<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 item con thì chúng ta chỉ việc tạo thêm một thẻ ul nằm bên trong item đó.

Ví dụ: Item2 sẽ có thêm các item con như sau.

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

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

1
2
3
4
5
6
7
8
9
10
<ul>
    <li>item1</li>
    <li>item2
        <ul>
            <li>​item2.1</li>
            <li>item2.2</li>
        </ul>
    </li>
    <li>item3</li>
</ul>

Nếu bạn muốn tạo list được đánh dấu bằng số như sau:

  1. Item1
  2. Item2
  3. Item3

Thì hãy sử dụng thẻ ol kết hợp với thẻ li như sau:

1
2
3
4
5
<ol>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ol>











Nhận xét