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

[Bài 8] Danh sách trong HTML5
  1. Giới thiệu về HTML5
  2. [Bài 1] Chuẩn bị trước khi học HTML5
  3. [Bài 2] Cấu trúc HTML5 đơn giản
  4. [Bài 3] Định dạng văn bản trong HTML5
  5. [Bài 4] Thuộc tính trong HTML5
  6. [Bài 5] Liên kết trong HTML5
  7. [Bài 6] Hình ảnh trong HTML5
  8. [Bài 7] Bình luận trong HTML5
  9. [Bài 8] Danh sách trong HTML5
  10. [Bài 9] Bảng biểu trong HTML5
  11. [Bài thực hành 1] Viết cấu trúc HTML5 đơn giản
  12. [Bài 10] Iframe trong HTML5
  13. [Bài 11] Video trong HTML5
  14. HTML5 nâng cao

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.

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ả

Danh sách trong HTML5
Danh sách trong HTML5

 

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ế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ả:

Danh sách trong HTML5
Danh sách trong HTML5 loại danh sách mô tả

Đố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ữ đó.

Tóm lại

Qua bài này, chúng ta đã học được các danh sách trong HTML5, bao gồm:

  • Danh sách theo thứ tự
  • Danh sách không theo thứ tự
  • Danh sách mô tả (Đọc thêm)

Bài viết sau chúng ta sẽ tìm hiểu về bảng biểu (table).

0 0 bình chọn
Đánh giá bài viết

Tiền Minh Vy

Xin chào! Tôi là Tiền Minh Vy, là một lập trình viên có nhiều kinh nghiệm với Wordpress, tập trung nhiều với PHP.
Đăng ký
Thông báo cho tôi về
guest
0 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận