[Bài 8] Danh sách trong HTML5

11/03/2021

This is post 9 of 14 in the series “Lập trình HTML”

Trong bài này, mình sẽ giới thiệu với các bạn về danh sách trong HTML5, thứ giúp các bạn có thể tạo danh sách theo và không theo thứ tự

Đôi khi, trong tài liệu HTML5, chúng ta đôi khi sẽ cần phải tạo lập 1 danh sách bao gồm các thứ cần liệt kê hay đơn giản là các vấn đề cần thực hiện. Vì mục đích đó, HTML5 cung cấp cho chúng ta khả năng tạo lập danh sách vô cùng chi tiết, vậy cách để tạo lập danh sách trong HTML5 như thế nào? Chúng ta cùng bắt đầu thôi.

Tóm tắt ẩn

Danh sách trong HTML5

[Đọc thêm] Loại danh sách trong HTML5 khác ít dùng

Tóm lại

Danh sách trong HTML5

Như mình đã nói ở trên, danh sách trong HTML5 có vai trò khá quan trọng, và được chia làm 2 phần chính, đó chính là danh sách theo thứ tự và danh sách không theo thứ tự. Ngoài ra còn 1 loại nữa nhưng ít dùng hơn, đó là danh sách mô tả, loại này chúng ta chỉ tham khảo thôi vì loại thẻ của nó khá khó nhớ và ít khi dùng đến.

Dưới đây là cú pháp của danh sách theo và không theo thứ tự:

<!-- Danh sách có thứ tự - VD: 1. 2. 3. -->
<ol>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ol>

<!-- Danh sách không thứ tự -->
<ul>
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
</ul>

Và bên dưới là kết quả

Các bạn cần chú ý rằng, phải thiết lập đúng cấu trúc của thẻ như trên (thẻ <ul> hay <ol> rồi mới đến thẻ <li>) thì mới có thể thấy được danh sách như thế nhé, các thẻ này có thể chứa bất kỳ thẻ nào, nhưng riêng thẻ <ul> hay <ol> thì phải cần có thêm thẻ <li> mới có thể hiện ra danh sách như thế và ngược lại.

Và đối với danh sách có thứ tự, bạn có thể lập một danh sách với số lượng vô hạn các mục ở trong đó. HTML5 không giới hạn số lượng mục con trong bất kỳ danh sách nào.

Cách ghi nhớ: cách ghi nhớ 3 thẻ trên rất dễ:

Trong tiếng Anh, “danh sách” có nghĩa là “list“, bạn lấy chữ “l” ghép với chữ “o” của từ “order” (nghĩa là có thứ tự) ta được danh sách có thứ tự <ol>.
Tiếp đó, bạn lấy từ “order” ghép thêm tiền tố un- ở phía trước sẽ được “un-order” (nghĩa là không có thứ tự), ta lấy chữ “u” ghép với chữ “l” như trên ta được danh sách không thứ tự <ul>
Cuối cùng, ta lấy chữ “l” ở trên ghép với chữ “i” của “item” (nghĩa là món đồ – nghĩa khác thường dùng là mục) ta được thẻ mục <li>

[Đọc thêm] Loại danh sách trong HTML5 khác ít dùng

Ngoài 2 loại danh sách trên, có thêm một danh sách nữa nhưng mình chưa thấy website nào dùng cả, đó chính là danh sách mô tả. Cú pháp của danh sách này như sau:

<!-- Ví dụ về danh sách ghi chú -->
<dl>
  <dt>Việt Nam</dt>
  <dd>- có vị trí ở khu vực Đông Nam Á, nằm trên bán đảo Đông Dương</dd>
  <dt>Cuba</dt>
  <dd>- có vị trí ở phía bắc vùng Caribe</dd>
</dl>

Dưới đây là kết quả:

Đối với loại danh sách này, thẻ <dd> sẽ được đẩy vào khoảng 1 khoảng trắng. Bên cạnh đó là không có dấu hiệu ở đầu dòng mỗi mục giống như hai danh sách kia.

Giải nghĩa:

dl là viết tắt của description list (nghĩa là danh sách mô tả)
dt là viết tắt của description term (nghĩa là thuật ngữ để mô tả) – chứa thuật ngữ để mô tả
dd là viết tắt của description data (nghĩa là mô tả nội dung) – chứa nội dung để mô tả thuật ngữ đó.