Tạo danh sách với thẻ ul, ol, li

HTML cung cấp thẻ để hiển thị danh sách ul, ol, li.
Thẻ ul thể hiện danh sách không sắp thứ tự.
Thẻ ol cho danh sách có thứ tự.
Thẻ li dùng cho các phần tử.

Thẻ <li> thể hiện phần tử của danh sách

Mỗi phần tử trong một danh sách được thể hiện bằng thẻ <li> (list item) . Thẻ <li> chứa bất cứ nội dung HML nào, nó có thuộc tính value và có thể gán giá trị bằng một số nguyên để thiết lập chỉ số khi nằm trong danh sách có thứ tự.

Thẻ <ol> thể hiện danh sách có thứ tự

Thẻ <ol> (ordered list) dùng để tạo danh sách có thứ tự, mỗi phần tử trong danh sách được thể hiện bởi thẻ <li>.

Đầu mỗi danh sách được đánh dấu bởi số thứ tự (mặc định), số la mã, ký tự alphabet thường, hoặc ký tự alphabet hoa.

Thuộc tính type

Ta dùng thuộc tính type của thẻ ol để thay đổi kiểu hiển thị với các giá trị sau:

  • 1 dùng kiểu số 1,2,3…. (kiểu mặc định)
  • i hoặc I kiểu số la mã i,ii,iii…
  • a dùng chữ thường a,b,c…
  • A dùng chữ in hoa A,B,C…

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ví dụ về các thẻ đánh dấu</title>
</head>
    <body>
       <strong>Kiểu mặc định (type="1")</strong>
        <ol>
            <li>HTML</li>
            <li>CSS</li>
            <li>Javascript</li>
            <li>PHP</li>
        </ol>
       <strong>Số la mã (type="i")</strong>
       <ol type="i">
           <li>HTML</li>
           <li>CSS</li>
           <li>Javascript</li>
           <li>PHP</li>
       </ol>
       <strong>Số la mã (type="I")</strong>
       <ol type="I">
           <li>HTML</li>
           <li>CSS</li>
           <li>Javascript</li>
           <li>PHP</li>
       </ol>
       <strong>Chữ thường (type="a")</strong>
       <ol type="a">
           <li>HTML</li>
           <li>CSS</li>
           <li>Javascript</li>
           <li>PHP</li>
       </ol>
       <strong>Chữ hoa (type="A")</strong>
       <ol type="A">
           <li>HTML</li>
           <li>CSS</li>
           <li>Javascript</li>
           <li>PHP</li>
       </ol>
    </body>
</html>

Kết quả:

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

 

Thuộc tính start

Ta dùng thuộc tính start với giá trị là số nguyên để thiết lập cho vị trí đầu tiên, các phần tử tiếp theo có giá trị tăng dần 1 đơn vị

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ví dụ về các thẻ đánh dấu</title>
</head>
    <body>
       <strong>Kiểu mặc định (type="1") start="20"</strong>
        <ol start="20">
            <li>HTML</li>
            <li>CSS</li>
            <li>Javascript</li>
            <li>PHP</li>
        </ol>
       <strong>Số la mã (type="i") start="50"</strong>
       <ol type="i" start="50">
           <li>HTML</li>
           <li>CSS</li>
           <li>Javascript</li>
           <li>PHP</li>
       </ol>
       <strong>Chữ thường (type="a") start="50"</strong>
       <ol type="a" start="50">
           <li>HTML</li>
           <li>CSS</li>
           <li>Javascript</li>
           <li>PHP</li>
       </ol>
       <strong>Chữ hoa (type="A") start="50"</strong>
       <ol type="A" start="50">
           <li>HTML</li>
           <li>CSS</li>
           <li>Javascript</li>
           <li>PHP</li>
       </ol>
    </body>
</html>

Kết quả:

ví dụ thuộc tính start

Bạn có thể thay đổi giá trị start để hiểu rõ hơn.

Thuộc tính reversed đánh dấu danh sách từ lớn đến bé

Thuộc tính reversed với giá trị bằng true để hiển thị danh sách từ lớn đến bé.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ví dụ về danh sách có thứ tự</title>
</head>
    <body>
       <strong>Kiểu mặc định (type="1") reversed="true" </strong>
        <ol reversed="true">
            <li>HTML</li>
            <li>CSS</li>
            <li>Javascript</li>
            <li>PHP</li>
        </ol>
       <strong>Chữ thường (type="a")</strong>
       <ol type="a" reversed="true">
           <li>HTML</li>
           <li>CSS</li>
           <li>Javascript</li>
           <li>PHP</li>
       </ol>

    </body>
</html>

Kết quả:

Ví dụ về reversed

Bạn có thể thử với các trường hợp khác

Dùng thuộc tính value của thẻ li

Thuộc tính value của thẻ li với giá trị là số nguyên thể hiện chỉ số của phần tử đó (các phần tử tiếp theo có chỉ số tăng dần 1 đơn vị)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ví dụ về danh sách có thứ tự</title>
</head>
    <body>
        <ol>
            <li>HTML</li>
            <li value="5">CSS</li>
            <li>Javascript</li>
            <li>PHP</li>
            <li value="10">VUE JS</li>
            <li>REACT</li>
            <li>LARAVEL</li>
        </ol>

    </body>
</html>

kết quả:

Danh sách không thứ tự <ul>

Danh sách không thứ tự được tao giống như danh sách không thứ tự chỉ thay <ol> bằng <ul>

Các phần tử trong danh sách này mặc đinh được đánh dấu bằng ký hiệu hình tròn ở đầu dòng, để thay đổi ký hiệu này ta dùng thuộc tính type với các giá trị circle,disc, square

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ví dụ về danh sách không có thứ tự</title>
</head>
    <body>
        <strong> kiểu mặc định (type="disc")</strong>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>Javascript</li>
            <li>PHP</li>
            <li>VUE JS</li>
            <li>REACT</li>
            <li>LARAVEL</li>
        </ul>
        <strong>  (type="circle")</strong>
        <ul type="circle">
            <li>HTML</li>
            <li>CSS</li>
            <li>Javascript</li>
            <li>PHP</li>
            <li>VUE JS</li>
            <li>REACT</li>
            <li>LARAVEL</li>
        </ul>

        <strong>  (type="square")</strong>
        <ul type="square">
            <li>HTML</li>
            <li>CSS</li>
            <li>Javascript</li>
            <li>PHP</li>
            <li>VUE JS</li>
            <li>REACT</li>
            <li>LARAVEL</li>
        </ul>
    </body>
</html>

Kết quả:

Danh sách có mô tả

Ngày nay HTML cung cấp thêm một loại danh sách nữa là danh sách có mô tả, nghĩa là danh sách có thêm phần mô tả của phần tử.

Thẻ <dl> để định nghĩa danh sách có mô tả.

Thẻ <dt> định nghĩa phần tử (tên phần tử).

Thẻ <dd> định nghĩa mô tả của phần tử.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ví dụ về danh sách có mô tả</title>
</head>
    <body>

        <dl>
            <dt>HTML</dt>
            <dd>Hyper Text Markup Language</dd>
            <dd>Ngôn ngữ đánh dấu siêu văn bản</dd>
            <dt>CSS</dt>
            <dd>Ngôn ngữ định dạng văn bản</dd>
            <dt>PHP</dt>
            <dd>Ngôn ngữ lập trình website</dd>
        </dl>
    </body>
</html>

Kết quả:

Danh sách có mô tả

Tổng kết

  • Thẻ <li> để thể hiện phần tử của danh sách
  • Thẻ <ol> thể hiện danh sách có thứ tự
  • Thẻ <ul> thể hiện danh sách không có thứ tự
  • Thẻ <dl> thể hiện danh sách có mô tả
  • Thẻ <dt> thể hiện phần tử của danh sách có mô tả
  • Thẻ <dd> thể hiện mô tả của từng phần tử trong danh sách có mô tả

Danh sách có thứ tự có các thuộc tính riêng:

  • type dùng để chỉ định kiểu hiển thị của danh sách có một trong các giá trị 1, i, I, a, A
  • start có giá trị là số nguyên chỉ định giá trị của hiển thị của phần tử đầu tiên, phần tửu tiếp theo tăng dần 1 đơn vị
  • reversed có giá trị true chỉ số được đánh tử lớn xuống bé

Danh sách không thứ tự có cách thuộc tính riêng:

  • type định nghĩa kiểu đánh dấu có giá trị: disc, circle, square

Thẻ li của danh sách có thứ tự có thuộc tính riêng:

  • value có giá trị số nguyên định nghĩa vị trí của phần tử.

Lưu ý:

Nên hạn chế dùng thuộc tính type của thẻ <ul>, <ol> , thay bằng cách sử dụng CSS để định nghĩa các kểu hiển thị.

 

« Bài trước Các thẻ định dạng
Chèn ảnh vào HTML với thẻ img
Bài mới
Mục lục