Web Cơ Bản

Thẻ <ul> 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ẻ <ul> trong HTML

- Thẻ <ul> dùng để xác định một "danh sách không 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ử <ul>.

Ví dụ:

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

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

3) Thuộc tính type của thẻ <ul>

- 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ó ba giá trị:

disc
  • HTML
  • CSS
  • JavaScript
 (đây là kiểu mặc định của danh sách không có thứ tự)
circle
  • HTML
  • CSS
  • JavaScript
square
  • HTML
  • CSS
  • JavaScript
Ví dụ:
<ul type="circle">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
Xem ví dụ

- Lưu ý: Ngoài việc sử dụng thuộc tính type của thẻ <ul> để 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ế.

Ví dụ:
<ul stype="list-style-type:circle">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
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ử <ul> với định dạng CSS như sau:

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