Thẻ <ol> trong HTML


1) Giới thiệu các loại danh sách trong HTML

- Trong HTML có hai loại danh sách cơ bản:

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

1.1) Danh sách có thứ tự

- Danh sách có thứ tự là loại danh sách mà "chỉ mục" của các danh mục trong danh sách sẽ có thứ tự.

- Ví dụ: Bên dưới là một số mẫu danh sách có thứ tự.

  1. HTML
  2. CSS
  3. JavaScript
  4. MySQL
  5. PHP
  1. HTML
  2. CSS
  3. JavaScript
  4. MySQL
  5. PHP
  1. HTML
  2. CSS
  3. JavaScript
  4. MySQL
  5. PHP

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

- Danh sách không có thứ tự là loại danh sách mà "chỉ mục" của các danh mục trong danh sách đều có chung một kiểu.

- Ví dụ: Bên dưới là một số mẫu danh sách không có thứ tự.

  • HTML
  • CSS
  • JavaScript
  • MySQL
  • PHP
  • HTML
  • CSS
  • JavaScript
  • MySQL
  • PHP
  • HTML
  • CSS
  • JavaScript
  • MySQL
  • PHP

2) Thẻ <ol> trong HTML

- Thẻ <ol> dùng để xác định một "danh sách có thứ tự"

- Tuy nhiên, để tạo các danh mục trong danh sách thì phải sử dụng kết hợp với thẻ <li>.

- Thẻ <li> phải được đặt bên trong phần tử <ol>.

Ví dụ:

- Dưới đây là đoạn mã dùng để tạo một danh sách có thứ tự


<ol>
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
   <li>MySQL</li>
   <li>PHP</li>
</ol>
Xem ví dụ

3) Các thuộc tính của thẻ <ol>

- Thẻ <ol> có ba thuộc tính thường hay được sử dụng nhất.

- Dưới đây là bảng mô tả sơ lược về ba thuộc tính đó:

type

Xác định "kiểu chỉ mục" cho các danh mục trong danh sách

reversed

Đảo ngược thứ tự chỉ mục của các danh mục trong danh sách

start

Xác định "thứ tự bắt đầu" của chỉ mục của danh mục đầu tiên trong danh sách

3.1) Thuộc tính type

- Thuộc tính type dùng để xác định "kiểu chỉ mục" cho các danh mục trong danh sách.

- Thuộc tính type có năm giá trị cơ bản:

1
  1. HTML
  2. CSS
  3. JavaScript
(đây là kiểu mặc định của danh sách có thứ tự)
a
  1. HTML
  2. CSS
  3. JavaScript
A
  1. HTML
  2. CSS
  3. JavaScript
i
  1. HTML
  2. CSS
  3. JavaScript
I
  1. HTML
  2. CSS
  3. JavaScript
Ví dụ:

<ol type="A">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>
Xem ví dụ

- Lưu ý: Ngoài việc sử dụng thuộc tính type của thẻ <ol> để xác định kiểu chỉ mục cho các danh mục trong danh sách thì chúng ta cũng có thể dùng thuộc tính list-style-type trong CSS để thay thế.

- Tuy nhiên, giá trị của thuộc tính list-style-type trong CSS tương đối khác so với giá trị của thuộc tính type trong thẻ <ol>

decimal
  1. HTML
  2. CSS
  3. JavaScript
lower-alpha
  1. HTML
  2. CSS
  3. JavaScript
upper-alpha
  1. HTML
  2. CSS
  3. JavaScript
lower-roman
  1. HTML
  2. CSS
  3. JavaScript
upper-roman
  1. HTML
  2. CSS
  3. JavaScript
Ví dụ:

<ul style="list-style-type:upper-alpha">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
Xem ví dụ

3.2) Thuộc tính reversed

- Thuộc tính reversed dùng để đảo ngược thứ tự chỉ mục của các danh mục trong danh sách.

Ví dụ:

<ol reversed>
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
</ol>
Xem ví dụ

3.3) Thuộc tính start

- Thuộc tính start xác định "thứ tự bắt đầu" của chỉ mục của danh mục đầu tiên trong danh sách.

Ví dụ:

<ol type="a" start="3">
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
   <li>PHP</li>
   <li>MySQL</li>
</ol>
Xem ví dụ

4) Định dạng CSS mặc định

- Hầu hết các trình duyệt sẽ hiển thị phần tử <ol> với định dạng CSS như sau:

ol {
    display: block;
    list-style-type: decimal;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}