Danh sách trong HTML

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

Một danh sách không có thứ tự được định nghĩa bằng thẻ <ul> và các phần tử của danh sách này định nghĩa bằng thẻ <li>.

Theo mặc định danh sách loại này sẽ có kí hiệu đầu dòng (bullet).

Ví dụ:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

See the Pen rVmopK by Nguyễn Duy Hiếu (@hieu3210) on CodePen.

Các kiểu kí hiệu đầu dòng

Với danh sách không thứ tự, theo mặc định có 4 giá trị cho thuộc tính list-style-type để định nghĩa kiểu kí hiệu đầu dòng.

Ví dụ, dạng hình tròn đậm:

<ul style="list-style-type:disc">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

See the Pen pJPqad by Nguyễn Duy Hiếu (@hieu3210) on CodePen.

 Ví dụ, dạng hình tròn rỗng:

<ul style="list-style-type:circle">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

See the Pen oXWJER by Nguyễn Duy Hiếu (@hieu3210) on CodePen.

 Ví dụ, dạng hình vuông:

<ul style="list-style-type:square">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

See the Pen ZGKVxx by Nguyễn Duy Hiếu (@hieu3210) on CodePen.

 Ví dụ, dạng không có kí hiệu:

<ul style="list-style-type:none">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

See the Pen JdNwLx by Nguyễn Duy Hiếu (@hieu3210) on CodePen.

 

Danh sách có thứ tự

Một danh sách có thứ tự trong HTML được định nghĩa bằng thẻ <ol> với các phần từ được định nghĩa bằng thẻ <li>.

Ví dụ về danh sách có thứ tự:

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

See the Pen pJPqVd by Nguyễn Duy Hiếu (@hieu3210) on CodePen.

Các kiểu danh sách có thứ tự

Dùng thuộc tính type để chọn kiểu danh sách có thứ tự, các kiểu theo bảng dưới:

Khai báoMô tả
type="1" Danh sách theo số dạng: 1, 2, 3, ... (mặc định)
type="A" Danh sách theo chữ in hoa dạng: A, B, C, ...
type="a" Danh sách theo chữ in thường dạng: a, b, c, ...
type="I" Danh sách theo số La Mã: I, II, III, ...
type="i" Danh sách theo số La Mã nhỏ: i, ii, iiiiii, ...

 

Ví dụ về danh sách dạng La Mã:

<ol type="I">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

See the Pen wadREg by Nguyễn Duy Hiếu (@hieu3210) on CodePen.

 

Cũng có thể dùng list-style-type trong CSS để định nghĩa kiểu của danh sách có thứ tự

Danh sách định nghĩa

Trong HTML, dùng thẻ <dl> để khai báo một danh sách định nghĩa (description list).

Dùng thẻ <dt> để khai báo các từ khoá hay mệnh đề (description term), và thẻ <dd> để khai báo phần mô tả (description data).

Ví dụ:

<dl>
  <dt>HTML</dt>
  <dd>- ngôn ngữ đánh dấu siêu văn bản.</dd>
  <dt>CSS</dt>
  <dd>- bảng định kiểu xếp tầng.</dd>
  <dt>JavaScript</dt>
  <dd>- ngôn ngữ lập trình kịch bản trên trang web.</dd>
</dl>

See the Pen JdNwmV by Nguyễn Duy Hiếu (@hieu3210) on CodePen.

Danh sách lồng nhau

Bạn có thể dùng cấu trúc bao đóng (nested) để định nghĩa danh sách lồng nhau (danh sách nằm trong danh sách).

Ví dụ:

<ul>
  <li>HTML</li>
  <li>CSS
    <ul>
      <li>CSS2</li>
      <li>CSS3</li>
    </ul>
  </li>
  <li>JavaScript</li>
</ul>

See the Pen EjmGOG by Nguyễn Duy Hiếu (@hieu3210) on CodePen.

Danh sách theo chiều ngang

Chúng ta có thể dùng CSS để định nghĩa theo chiều ngang với thuộc tính display:inline. Với một ít các trang trí trong CSS bạn có thể có một thanh điều hướng (menu) như ví dụ bên dưới.

Ví dụ:

<h2>Danh mục các hướng dẫn tại TBit</h2>

<ul id="menu">
  <li><a href="http://tut.tbit.vn/thiet-ke-web/co-ban/hoc-html.html">HTML</a></li>
  <li><a href="http://tut.tbit.vn/thiet-ke-web/co-ban/hoc-css.html">CSS</a></li>
  <li><a href="http://tut.tbit.vn/thiet-ke-web/co-ban/hoc-javascript.html">JavaScript</a></li>
  <li><a href="http://tut.tbit.vn/thiet-ke-web/co-ban/hoc-php.html">PHP</a></li>
</ul>

See the Pen ZGKVVj by Nguyễn Duy Hiếu (@hieu3210) on CodePen.