Các thẻ danh sách html là gì?

Danh sách được sử dụng để nhóm các phần thông tin có liên quan lại với nhau để chúng được liên kết rõ ràng với nhau và dễ đọc. Trong phát triển web hiện đại, danh sách là các yếu tố cần thiết, thường được sử dụng để điều hướng cũng như nội dung chung

Các danh sách là tốt từ quan điểm cấu trúc vì chúng giúp tạo ra một tài liệu có cấu trúc tốt, dễ truy cập hơn, dễ bảo trì. Chúng cũng hữu ích vì chúng cung cấp các yếu tố chuyên biệt mà bạn có thể đính kèm các kiểu CSS. Cuối cùng, danh sách chính xác về mặt ngữ nghĩa giúp khách truy cập đọc trang web của bạn và chúng đơn giản hóa việc bảo trì khi các trang của bạn cần được cập nhật

Ba loại danh sách

Có ba loại danh sách trong HTML

• danh sách không có thứ tự - được sử dụng để nhóm một tập hợp các mục liên quan không theo thứ tự cụ thể
• danh sách theo thứ tự - được sử dụng để nhóm một tập hợp các mục liên quan theo một thứ tự cụ thể
• danh sách mô tả — được sử dụng để hiển thị các cặp tên/giá trị như thuật ngữ và định nghĩa

Mỗi loại danh sách có một mục đích và ý nghĩa cụ thể trong một trang web

danh sách không có thứ tự

Danh sách không có thứ tự (gạch đầu dòng) được sử dụng khi một tập hợp các mục có thể được sắp xếp theo bất kỳ thứ tự nào. Một ví dụ là một danh sách mua sắm

• Sữa
• bánh mì
• bơ
• hạt cà phê

Mặc dù tất cả các mục đều là một phần của một danh sách, nhưng bạn có thể sắp xếp các mục theo bất kỳ thứ tự nào và danh sách vẫn có ý nghĩa

• bánh mì
• hạt cà phê
• Sữa
• bơ

Bạn có thể sử dụng CSS để thay đổi dấu đầu dòng thành một trong số các kiểu mặc định, sử dụng hình ảnh của riêng bạn hoặc thậm chí hiển thị danh sách mà không có dấu đầu dòng — chúng ta sẽ xem cách thực hiện điều đó trong bài viết Kiểu dáng danh sách và liên kết

Đánh dấu danh sách không có thứ tự

Danh sách không có thứ tự sử dụng một bộ

  
Gather ingredients
  
Mix ingredients together
  
Place ingredients in a baking dish
  
Bake in oven for an hour
  
Remove from oven
  
Allow to stand for ten minutes
  
Serve

  
bread
  
coffee beans
  
milk
  
butter

danh sách có thứ tự

Danh sách có thứ tự (được đánh số) được sử dụng để hiển thị danh sách các mục cần theo một thứ tự cụ thể. Một ví dụ sẽ là hướng dẫn nấu ăn

1. Thu thập các thành phần
2. Trộn các thành phần với nhau
3. Cho nguyên liệu vào khay nướng
4. Nướng trong lò trong một giờ
5. Lấy ra khỏi lò
6. Để yên trong mười phút
7. Phục vụ

Nếu các mục trong danh sách được chuyển sang một thứ tự khác, thông tin sẽ không còn ý nghĩa nữa

1. Thu thập các thành phần
2. Nướng trong lò trong một giờ
3. Phục vụ
4. Lấy ra khỏi lò
5. Cho nguyên liệu vào khay nướng
6. Để yên trong mười phút
7. Trộn các thành phần với nhau

Danh sách theo thứ tự có thể được hiển thị với một số tùy chọn trình tự. Mặc định trong hầu hết các trình duyệt là số thập phân, nhưng có những số khác có sẵn

• Bức thư
  • Chữ thường ascii (a, b, c…)
  • Chữ ascii viết hoa (A, B, C…)
  • Chữ thường Hy Lạp cổ điển. (έ, ή, ί…)
• số
  • Số thập phân (1, 2, 3…)
  • Số thập phân có số 0 đứng đầu (01, 02, 03…)
  • Chữ số La Mã viết thường (i, ii, iii…)
  • Chữ số La Mã viết hoa (I, II, III…)
  • Cách đánh số truyền thống của Gruzia (an, ban, gan…)
  • Cách đánh số truyền thống của người Armenia (mek, yerku, yerek…)

Cũng giống như danh sách không có thứ tự, bạn có thể sử dụng CSS để thay đổi kiểu của danh sách có thứ tự. Xem Danh sách tạo kiểu và liên kết để biết thêm thông tin

Đánh dấu danh sách theo thứ tự

Danh sách có thứ tự sử dụng một bộ

  
Gather ingredients
  
Mix ingredients together
  
Place ingredients in a baking dish
  
Bake in oven for an hour
  
Remove from oven
  
Allow to stand for ten minutes
  
Serve

  
Gather ingredients
  
Mix ingredients together
  
Place ingredients in a baking dish
  
Bake in oven for an hour
  
Remove from oven
  
Allow to stand for ten minutes
  
Serve

Bắt đầu danh sách theo thứ tự với các số khác 1

Một yêu cầu phổ biến trong việc sử dụng danh sách theo thứ tự là bắt đầu chúng bằng một số khác 1 (hoặc i, hoặc tôi, v.v. ). Điều này được thực hiện bằng cách sử dụng thuộc tính

  
Gather ingredients
  
Mix ingredients together
  
Place ingredients in a baking dish
  
Bake in oven for an hour
  
Remove from oven
  
Allow to stand for ten minutes
  
Serve

  
Gather ingredients
  
Mix ingredients together
  
Place ingredients in a baking dish


Before you place the ingredients in the baking dish, preheat the oven to
180 degrees centigrade/350 degrees fahrenheit in readiness for the next step.


  
Bake in oven for an hour
  
Remove from oven
  
Allow to stand for ten minutes
  
Serve

Điều này cho kết quả sau

1. Thu thập các thành phần
2. Trộn các thành phần với nhau
3. Cho nguyên liệu vào khay nướng

Trước khi bạn cho nguyên liệu vào đĩa nướng, hãy làm nóng lò nướng ở nhiệt độ 180 độ C/350 độ F để sẵn sàng cho bước tiếp theo

1. Nướng trong lò trong một giờ
2. Lấy ra khỏi lò
3. Để yên trong mười phút
4. Phục vụ

Lưu ý rằng thuộc tính này không được dùng trong HTML 4, vì vậy nó sẽ ngăn trang của bạn xác thực nếu bạn đang sử dụng loại tài liệu nghiêm ngặt HTML4. Nếu bạn muốn sử dụng chức năng như vậy trong một trang HTML4 nghiêm ngặt và nó hoàn toàn phải xác thực, bạn có thể thực hiện bằng cách sử dụng Bộ đếm CSS để thay thế. Tuy nhiên, may mắn thay, thuộc tính

  
Gather ingredients
  
Mix ingredients together
  
Place ingredients in a baking dish
  
Bake in oven for an hour
  
Remove from oven
  
Allow to stand for ten minutes
  
Serve

danh sách mô tả

Danh sách mô tả (trước đây được gọi là danh sách định nghĩa, nhưng được đổi tên trong HTML5) liên kết các tên và giá trị cụ thể trong danh sách. Ví dụ có thể là các mục trong danh sách thành phần và mô tả của chúng, tác giả bài viết và tiểu sử tóm tắt hoặc người chiến thắng cuộc thi và năm mà họ giành chiến thắng. Bạn có thể có bao nhiêu nhóm tên-giá trị tùy thích, nhưng phải có ít nhất một tên và ít nhất một giá trị trong mỗi cặp

Danh sách mô tả linh hoạt. bạn có thể liên kết nhiều giá trị với một tên hoặc ngược lại. Ví dụ: thuật ngữ “cà phê” có thể có nhiều nghĩa và bạn có thể chỉ ra từng nghĩa một

coffee

  a beverage made from roasted, ground coffee beans
  a cup of coffee
  a social gathering at which coffee is consumed
  a medium to dark brown colour

Hoặc, bạn có thể liên kết nhiều tên với cùng một giá trị. Điều này hữu ích để hiển thị các biến thể của một thuật ngữ, tất cả đều có cùng một nghĩa

Đánh dấu danh sách mô tả

Danh sách mô tả sử dụng một bộ

  
Gather ingredients
  
Mix ingredients together
  
Place ingredients in a baking dish
  
Bake in oven for an hour
  
Remove from oven
  
Allow to stand for ten minutes
  
Serve

  
Gather ingredients
  
Mix ingredients together
  
Place ingredients in a baking dish
  
Bake in oven for an hour
  
Remove from oven
  
Allow to stand for ten minutes
  
Serve

  
Gather ingredients
  
Mix ingredients together
  
Place ingredients in a baking dish
  
Bake in oven for an hour
  
Remove from oven
  
Allow to stand for ten minutes
  
Serve

  
Gather ingredients
  
Mix ingredients together
  
Place ingredients in a baking dish
  
Bake in oven for an hour
  
Remove from oven
  
Allow to stand for ten minutes
  
Serve

  
Gather ingredients
  
Mix ingredients together
  
Place ingredients in a baking dish
  
Bake in oven for an hour
  
Remove from oven
  
Allow to stand for ten minutes
  
Serve

Một danh sách mô tả đơn giản về các tên đơn lẻ với các giá trị đơn lẻ sẽ trông như thế này

  
bread
  
coffee beans
  
milk
  
butter

Điều này được hiển thị như sau

  
bread
  
coffee beans
  
milk
  
butter

Trong ví dụ sau, chúng tôi liên kết nhiều giá trị với một tên và ngược lại

  
bread
  
coffee beans
  
milk
  
butter

Mã đó sẽ hiển thị như thế này

  
bread
  
coffee beans
  
milk
  
butter

Lựa chọn giữa các loại danh sách

Khi cố gắng quyết định sử dụng loại danh sách nào, hãy tự hỏi bản thân hai câu hỏi đơn giản

1. Tôi có đang xác định thuật ngữ hoặc liên kết các cặp tên/giá trị khác không?

   • Nếu có, hãy sử dụng danh sách mô tả
   • Nếu không, đừng sử dụng danh sách mô tả

2. Thứ tự của các mục trong danh sách có quan trọng không?

   • Nếu có, hãy sử dụng danh sách có thứ tự
   • Nếu không, hãy sử dụng danh sách không có thứ tự

Ưu điểm của danh sách HTML

• Uyển chuyển. Nếu bạn phải thay đổi thứ tự của các mục danh sách trong một danh sách có thứ tự, bạn chỉ cần di chuyển xung quanh các thành phần mục danh sách;
• tạo kiểu. Sử dụng danh sách HTML cho phép bạn định kiểu danh sách đúng cách bằng CSS. Thẻ mục danh sách
• khác với các thẻ khác trong tài liệu của bạn, vì vậy bạn có thể nhắm mục tiêu cụ thể các quy tắc CSS tới chúng
• ngữ nghĩa. Danh sách HTML cung cấp cho nội dung cấu trúc ngữ nghĩa phù hợp. Điều này có những lợi ích quan trọng, chẳng hạn như cho phép trình đọc màn hình nói với người dùng khiếm thị rằng họ đang đọc một danh sách, thay vì chỉ đọc một mớ chữ và số khó hiểu.

Nói cách khác, không mã danh sách các mục bằng cách sử dụng các thẻ văn bản thông thường. Sử dụng văn bản thay vì danh sách giúp bạn làm việc nhiều hơn và có thể gây ra sự cố cho người đọc tài liệu của bạn. Vì vậy, nếu tài liệu của bạn cần một danh sách, bạn nên sử dụng đúng định dạng danh sách HTML

danh sách lồng nhau

Một mục danh sách riêng lẻ có thể chứa toàn bộ danh sách khác, được gọi là danh sách lồng nhau. Nó hữu ích cho những thứ như mục lục chứa các phần phụ

  
bread
  
coffee beans
  
milk
  
butter

Để phản ánh điều đó trong mã, toàn bộ danh sách lồng nhau được chứa bên trong mục danh sách đầu tiên. Mã trông như thế này

  
Gather ingredients
  
Mix ingredients together
  
Place ingredients in a baking dish
  
Bake in oven for an hour
  
Remove from oven
  
Allow to stand for ten minutes
  
Serve

Lưu ý rằng chúng tôi đã sử dụng thuộc tính CSS

  
Gather ingredients
  
Mix ingredients together
  
Place ingredients in a baking dish


Before you place the ingredients in the baking dish, preheat the oven to
180 degrees centigrade/350 degrees fahrenheit in readiness for the next step.


  
Bake in oven for an hour
  
Remove from oven
  
Allow to stand for ten minutes
  
Serve

Các danh sách lồng nhau khá hữu ích và thường tạo cơ sở cho các menu điều hướng vì chúng là một cách tốt để xác định cấu trúc phân cấp của trang web. Chúng cũng rất linh hoạt, vì danh sách có thứ tự hoặc không có thứ tự có thể được lồng vào bên trong các mục danh sách có thứ tự hoặc không có thứ tự. Để biết ví dụ về cách lồng các danh sách không có thứ tự trong một danh sách có thứ tự, hãy xem phần “Chọn giữa các loại danh sách” ở trên

Về mặt lý thuyết, bạn có thể lồng các danh sách vào bất kỳ cấp độ nào bạn muốn, mặc dù trên thực tế, việc lồng các danh sách quá sâu có thể trở nên khó hiểu. Đối với các danh sách rất lớn, thay vào đó, bạn nên chia nội dung thành nhiều danh sách có tiêu đề hoặc thậm chí chia thành các trang riêng biệt. Một nguyên tắc nhỏ là không lồng các danh sách sâu hơn ba cấp độ

Sự kết luận

Trong bài viết này, bạn đã thấy các loại danh sách HTML khác nhau được sử dụng như thế nào, cách chúng được mã hóa và khám phá một số tùy chọn danh sách cơ bản. Để biết thêm thông tin cụ thể về cách sửa đổi giao diện và hành vi của danh sách HTML, hãy xem Tạo kiểu cho danh sách và liên kết

2 loại thẻ danh sách HTML là gì?

3 loại danh sách trong HTML là gì?

Giải thích thẻ danh sách trong HTML là gì?

Thẻ HTML của danh sách mục là gì?