thẻ danh sách html

Tìm hiểu về các thẻ danh sách trong tài liệu HTML

Ở những bài viết trước bạn đã tìm hiểu các thẻ để tạo văn bản và định dạng văn bản trong HTML. Tuy nhiên, trong văn bản chúng ta hay sử dụng các hoa thị để liệt kê nội dung hay nhóm các thông tin có liên hệ với nhau mà trong HTML gọi là list (danh sách). Bài viết sau đây, mình sẽ cùng các bạn tìm hiểu các thẻ giúp tạo ra list ( danh sách) trong trang web.

Các thuật ngữ

List: danh sách gồm các phần tử

Nesting lists: Các danh sách lồng nhau

Un-order list: Danh sách không có thứ tự

Order List: Danh sách được đánh số thứ tự

Ví dụ về List trong HTML

Mình sẽ cho các bạn xem một số ví dụ về list mà chúng ta hay gọi là hoa thị hay mục số. Dựa vào các ví dụ này, chúng ta thấy rằng có 3 loại List:

Un-order list: Là những hoa thị không cần sắp xếp theo thứ tự. Ví dụ như sau

  • Mục 1
  • Mục 2
  • Mục 3

Order-list: Là nội dung trong list được đánh thứ tự. Ví dụ như sau:

  1. Mục A
  2. Mục B
  3. Mục C

Description-list: Là loại danh sách mô tả cho các thuật ngữ

Danh sách không thứ tự

Đây là dạng danh sách không cần thứ tự. Những mục ta liệt kê sẽ được thể hiện là những hình hoa thị. Ví dụ cú pháp thẻ <ul> như sau:

<html>
<head>
</head>
<body>
<ul style="...">
<li>Mục 1</li>
<li>Mục 2</li>
<li>Mục 3</li>
</ul>
</body>
</html>

Kết quả hiển thị như sau:

  • Mục 1
  • Mục 2
  • Mục 3

Để chỉ định là dạng un-order list ta sẽ bắt đầu bằng thẻ <ul>, thẻ này khá đặc biệt vì Content của nó chỉ là các thẻ <li>, không được có văn bản hay bất kỳ thẻ nào khác. Hãy lưu ý điều này nhé các bạn. Còn thẻ  <li>, được viết tắt là list item. Nội dung của thẻ là nội dung tương ứng với một hoa thị, vậy <li> đại diện cho một hoa thị trong un-order list. Cú pháp đầy đủ ta sẽ có thêm thuộc tính style là các kỹ thuật CSS. Nhưng ta sẽ mượn tạm nó trong việc lựa chọn hình dạng hoa thị, bao gồm hình tròn, hình vuông, hình tròn rỗng.

Các bạn nên chú ý, thẻ <ul> không đặt nằm trong thẻ <p>. Đó cũng là quy tắc của W3C

Danh sách có thứ tự

Bạn có thể chọn loại theo số thứ tự, hoặc sô la mã, thậm chí là chữ cái. Cú pháp thẻ <ol> như sau:

<html>
<head>
</head>
<body>
<ol type="">
<li>Mục A</li>
<li>Mục B</li>
<li>Mục C</li>
</ol>
</body>
</html>

Kết quả hiển thị như sau:

  1. Mục A
  2. Mục B
  3. Mục C

Cú pháp của order list được bắt đầu bằng thẻ <ol> và content của nó cũng gồm các thẻ <li>, như vậy ta thấy cách sử dụng của order list giống như un-order list. Tuy nhiên, order list sẽ có thuộc tính type để chỉ định việc đánh thứ tự là số hay chữ cái hoặc là số la mã

Các giá trị của type bao gồm:

1: danh sách sẽ được đánh số bắt đầu từ 1,2,3…

A: danh sách sẽ được đánh số bắt đầu từ A,B,C…

a: danh sách sẽ được đánh số bắt đầu từ a,b,c…

I: danh sách sẽ được đánh số bắt đầu từ I, II, III, IV,…

i: danh sách sẽ được đánh số bắt đầu từ i, ii, iii, iv,…

Tìm hiểu về Description List

Cuối cùng trong HTML List, ta tìm hiểu về Description List, đây là tên gọi mới trong HTML5, ở các version trước nó được gọi là Definition List. Loại này ít phổ biến hơn hai loại trước.

Tuy nhiên, trong một số trường hợp chúng ta sẽ cần sử dụng hợp lý. Ví dụ như, các thông tin mô tả về một ai đó, hoặc các định nghĩa khác nhau của thuật ngữ,…

Descripition List đưa ra các cặp Name và Value, ứng với mỗi name ta sẽ có một hay nhiều mẫu Value. Name ở đây chính là các thuật ngữ hoặc tên người nào đó hoặc một từ nào đó mà ta muốn mô tả thông tin. Còn Value chính là thông tin mô tả cho Name. Ví dụ đoạn mã theo cú pháp Descripition List sau đây:

<!doctype html>
<html>
<head>
</head>
<body>
<dl>
<dt>Name 1</dt>
<dd>Value 1</dd>
<dt>Name 2</dt>
<dd>Value 2</dd>
<dt>Name 3</dt>
<dd>Value 3</dd>
</dl>
</body>
</html>

Ta sẽ bắt đầu bằng một thẻ <dl>, viết tắt là Descripition List. Trong thẻ <dl> này sẽ chứa ít nhất một hoặc nhiều thẻ <dt>, được viết tắt bởi từ Description Title, chính là thẻ chỉ định phần Name. Content của nó là giá trị Name mà ta muốn mô tả. Mỗi thẻ Description Title ta có thể có một hoặc nhiều thẻ <dd>, chính là thẻ chỉ định phần value.

Nhìn vào đoạn mã Description List, có thể chúng ta gặp một chút bối rối vì các thẻ <dd> lại không thụt vào trong so với thẻ <dt>. Thật ra, các thẻ <dd> không phải là con của thẻ <dt>. Trong định nghĩa của Description List rõ ràng nó bao gồm các cặp thẻ là Name và Value, vậy thẻ <dt> và <dd> ngang hàng với nhau. Các bạn hãy nhớ qui tắc chỉ thụt vào (hay còn gọi là lồng vào) khi thẻ đó là con của thẻ được lồng vào.

Kết quả của đoạn mã ở trên nhé:

Name 1
Value 1
Name 2
Value 2
Name 3
Value 3

Danh sách lồng nhau

Trên đây các bạn đã tìm hiểu qua tất cả các dạng List trong HTML. Và các bạn thấy các sử dụng cũng đơn giản phải không? Trên thực tế, bạn sẽ bắt gặp những dạng thể hiện List lồng vào nhau

Ví dụ sau đây:

  1. HTML
    • Thiết kế cấu trúc một website
    • Tạo website đúng chuẩn W3C
  2. CSS
    • Bố cục và trình bày website đẹp mắt
    • Kỹ thuật tái sử dụng bộ giao diện cho nhiều website
  3. JavaScript
    • Lập trình ứng dụng phía client

Cơ chế lồng danh sách với nhau, được gọi là Nesting Lists. Đây là đoạn mã tạo nên cấu trúc lồng nhau ở ví dụ bên trên:

<!doctype>
<html>
<head>
</head>
<body>
<ol>
<li>HTML
<ul>
<li>Thiết kế cấu trúc một website</li>
<li>Tạo website đúng chuẩn W3C</li>
</ul>
<li>CSS
<ul>
<li>Bố cục và trình bày website đẹp mắt</li>
<li>Kỹ thuật tái sử dụng bộ giao diện cho nhiều website</li>
</ul>
<li>JavaScript
<ul>
<li>Lập trình ứng dụng phía client</li>
</ul>
</li>
</ol>
</body>
</html>

Tại mỗi thẻ <li> ta sẽ lồng bên trong nó là một thẻ un-order list (thẻ <ul>)

Tổng kết

Bài viết trên đây mình đã giúp bạn tìm hiểu về HTML List, cách trình bày danh sách trong website. Các bạn hãy cố gắng tự tay làm tất cả các ví dụ mà mình đã trình bày ở trên. Ngoài việc thể hiện dưới dạng danh sách, HTML List còn giúp trang web tạo ra cấu trúc về nội dung.

Cảm ơn các bạn đã theo dõi đọc bài viết của mình! Hãy để lại những ý kiến đóng góp cho mình nhé!

 

Để lại bình luận của bạn

avatar