[Học HTML] Bài 06: Tạo danh sách trong HTML

Tạo danh sách trong HTML- HTML Lists - Ảnh minh họa

Tạo danh sách trong HTML- HTML Lists – Ảnh minh họa

Trong bài này chúng ta sẽ cùng tìm hiểu cách tạo danh sách trong HTML. Cái này các bạn sẽ sử dụng nhiều trong tạo menu và danh sách trong bài viết.

Các kiểu danh sách trong HTML

Trong HTML có 03 kiểu danh sách, tuy nhiên ở đây mình đề xuất tìm hiểu 02 kiểu thôi, kiểu còn lại các bạn tham khảo thêm trên Google nhé !

Kiểu có sắp xếp : các mục con của nó được sắp xếp theo một trình tự nào đó, có thể là chữ số hoặc chữ cái.

Ví dụ kiểu có sắp xếp:

  1. Vấn đề thứ nhất
  2. Vấn đề thứ hai
  3. Vấn đề thứ ba

Kiểu không sắp xếp: các mục con không được sắp xếp theo thứ tự mà chúng được đánh dấu bằng một ký tự đặc biệt.

Ví dụ kiểu không sắp xếp:

  • Vấn đề thứ nhất
  • Vấn đề thứ hai
  • Vấn đề thứ ba

Cách tạo danh sách trong HTML

Qua 02 ví dụ trên thì chắc các bạn đã hình dung ra 02 kiểu danh sách trong HTML rồi, để tạo chúng các bạn thực hiện như sau và nhớ copy vào công cụ Codepen để xem thành quả nhé !

Tạo danh sách có sắp xếp

Để tạo một danh sách kiểu có sắp xếp, bạn đặt nội dung danh sách cặp thẻ <ul> </ul>. Trong đó các mục của danh sách sẽ đặt trong cặp thẻ <li> </li>, Ví dụ như sau:

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

Tạo danh sách không sắp xếp

Để tạo một danh sách kiểu không sắp xếp, bạn đặt nội dung danh sách cặp thẻ <ol> </ol>. Trong đó các mục của danh sách sẽ đặt trong cặp thẻ <li> </li>, Ví dụ như sau:

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

Tạo danh sách có cả hai kiểu

Áp dụng nguyên tắc như trên, các bạc chèn kiểu danh sách này trong kiểu kia cũng khá đơn giản. Ví dụ ở đây mình chèn kiểu không danh sách trong kiểu có danh sách như sau:

<ol>
   <li>Mục 1</li>
   <ul>
      <li>Mục  cháu</li>
      <li>Mục  cháu</li>
      <li>Mục  cháu</li>
   </ul>
   <li>Mục 2</li>
   <li>Mục 3</li>
   <li>Mục 4</li>
   <li>Mục 5</li>
</ol>

Khá đơn giản đúng không nào ? như vậy là qua bài này các bạn đã hiểu thêm về cách tạo danh sách trong HTML rồi đấy. Hãy copy >> dán đoạn code ví dụ vào tạo danh sách theo ý muốn của các bạn đi nào !

Mình cũng nhắc lại thêm, những nội dung mình tổng hợp ở đây giảm bớt khá nhiều nội dung. Điều này giúp mình và các bạn dễ làm quen và không cảm thấy khó khăn. Còn muốn tìm hiểu để vận dụng nhiều hơn thì cứ W3C mà học nhé !

Bài học trước đó và tiếp theo

4.5/5 - (2 votes)




Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Ưu đãi Hosting, VPS lên đến 80% và tặng bộ theme, plugin bản quyền hơn 1.600$XEM CHI TIẾT
+