Các thẻ tạo danh sách (List)

Phần tử danh sách (list) được sử dụng rất thường xuyên trong một tài liệu web bằng HTML. Trong một trang web thường người ta sử dụng các phần tử danh sách rất nhiều, chẳng hạn như menu, danh sách những thông tin nào đó,…v…v…đều được tạo ra bởi các thẻ tạo danh sách trong HTML.

Trong HTML có ba kiểu danh sách (list type) đó là kiểu sắp xếp (ordered list), kiểu không sắp xếp (unordered list) và kiểu danh sách mô tả (description list). Cụ thể:

• Kiểu sắp xếp (Ordered List): Là kiểu hiển thị một danh sách mà các mục con của nó được sắp xếp theo thứ tự bằng số hoặc chữ cái.

• Kiểu không sắp xếp (Unordered List): Là kiểu hiển thị danh sách mà các mục con của nó sẽ không được sắp xếp theo thứ tự mà chỉ được đánh dấu bằng một ký tự đặc trưng.

• Kiểu mô tả (Description List): Là kiểu hiển thị danh sách mà các mục con của nó sẽ không được đánh dấu thứ tự, nhưng sẽ có kèm theo một đoạn miêu tả.

Dưới đây là hình ảnh sự khác nhau giữa ba kiểu danh sách do W3School mô tả:

Mô tả thẻ list của W3School

Ordered List

Để khai báo một danh sách với kiểu được sắp xếp, bạn phải bắt đầu bằng cặp thẻ <ol> </ol>. Bên trong cặp thẻ này sẽ là danh sách các mục con, mỗi mục sẽ đặt trong cặp thẻ <li> </li>, xem ví dụ bên dưới.

<ol>
  <li>Mục con 1</li>
  <li>Mục con 2</li>
  <li>Mục con 3</li>
  <li>Mục con 4</li>
  <li>Mục con 5</li>
</ol>

<p>Một kiểu hiển thị khác của Ordered List</p>

<ol type="I">
  <li>Mục con 1</li>
  <li>Mục con 2</li>
  <li>Mục con 3</li>
  <li>Mục con 4</li>
  <li>Mục con 5</li>
</ol>

Thẻ <ol> cũng hỗ trợ thêm một thuộc tính nữa tên làtype, thuộc tính này là để bạn thiết lập kiểu sắp xếp các mục con bên trong danh sách. Giá trị của thuộc tính type là 1, i, I, a, A.

Unordered List

Giống như Ordered List, kiểu danh sách Unordered List sẽ bắt đầu bằng cặp thẻ <ul> </ul> và bên trong nó các mục con sẽ được khai báo bằng cặp thẻ <li> </li>.

<ul>
  <li>Mục con 1</li>
  <li>Mục con 2</li>
  <li>Mục con 3</li>
  <li>Mục con 4</li>
  <li>Mục con 5</li>
</ul>

<p>Một kiểu hiển thị khác của Unordered List</p>

<ul style="list-style-type: square">
  <li>Mục con 1</li>
  <li>Mục con 2</li>
  <li>Mục con 3</li>
  <li>Mục con 4</li>
  <li>Mục con 5</li>
</ul>

Bạn cũng có thể thay đổi kiểu hiển thị của thẻ <ol> bằng cách thêm thuộc tính style với thuộc tính CSS là list-style-type và giá trị làdisc,square, circle vànone.

Description List

Với kiểu danh sách này thì cách viết thẻ hơi khác một tí, đó là nó sẽ bắt đầu danh sách bằng cặp thẻ <dl> </dl>, trong đó tên mỗi mục con sẽ được khai báo bằng cặp thẻ <dt> </dt> và mô tả cho mục con sẽ được khai báo bằng cặp thẻ <dd> </dd>.

<p>Một website gồm có</p>
<dl>
  <dt>HTML</dt>
  <dd>- khung xương của website.</dd>
  
  <dt>CSS</dt>
  <dd>- bộ da của website</dd>
  
  <dt>Javascript</dt>
  <dd>- bộ cánh của website</dd>
  
  <dt>Ngôn ngữ server-side (ASP.NET, PHP, RUBY,..)</dt>
  <dd>- linh hồn của website</dd>
</dl>

Xếp chồng danh sách

Trong HTML, bạn có thể tiến hành xếp chồng một danh sách vào nhiều tầng bằng cách lồng thêm một danh sách nữa vào cặp thẻ <li> </li> của mục con mà bạn muốn thêm tầng cho nó, như ví dụ dưới đây.

<ul>
  <li>WordPress
    <ul>
      <li>WordPress Themes</li>
      <li>WordPress Plugin</li>
    </ul>
  </li>
  <li>Front-end
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>Javascript (jQuery, AngularJS,..)</li>
    </ul>
  </li>
</ul>