Html list là gì? Tìm hiểu về các thẻ HTML danh sách

Html list bao gồm những gì? Các để tạo ra một list trên html như thế nào? Cần phải lưu ý những điều gì trong quá trình tạo này hay không? Tất tần tật sẽ được Tenten chia sẻ qua bài viết dưới đây.

Html list là gì?

Trước hết, bạn cần phải biết rằng, trong một trang web sẽ có rất nhiều những phần tử khác nhau. Các trang web được người ta sử dụng rất nhiều và cần phải được đưa vào trong những danh mục nhất định. Những mục này đều được tạo ra từ các thẻ tạo danh sách trong html.

Những html list này giúp cho việc theo dõi thông tin trên website của cả khách hàng lẫn doanh nghiệp trở nên đơn giản, dễ dàng hơn.
Bạn có thể tạo dấu đầu dòng bằng cách sử dụng phần tử danh sách không có html list. Phần tử này được sử dụng để nhóm các mặt hàng khi thứ tự không quan trọng. Ví dụ: mô tả sản phẩm không cần theo một thứ tự cụ thể. Mặt khác, hướng dẫn công thức thực sự cần thiết.
Trong HTML có ba kiểu html list, đó là kiểu sắp xếp (ordered list), kiểu không sắp xếp (unordered list) và kiểu danh sách mô tả (description list). Cụ thể:
Kiểu sắp xếp (Ordered List): Là kiểu hiển thị một danh sách mà các mục con của nó được sắp xếp theo thứ tự bằng số hoặc chữ cái.
Kiểu không sắp xếp (Unordered List): Là kiểu hiển thị danh sách mà các mục con của nó sẽ không được sắp xếp theo thứ tự mà chỉ được đánh dấu bằng một ký tự đặc trưng.
Kiểu mô tả (Description List): Là kiểu hiển thị danh sách mà các mục con của nó sẽ không được đánh dấu thứ tự, nhưng sẽ có kèm theo một đoạn miêu tả.
Cách tạo ra một html list không có thứ tự
Bước 1: Viết ra các mục trong danh sách của bạn.
Để bắt đầu, hãy viết ra văn bản sẽ trở thành các mục trong danh sách của bạn hoặc các dấu đầu dòng. Chẳng hạn, bạn đang muốn tạo một list bán hàng gồm các mục, bạn có thể chia ra thành:
Mục 1: Quần
Mục 2: Áo
Mục 3: Váy
Mục 4: Phụ kiện
Bước 2: Gói từng mục danh sách trong thẻ <li>.
Tiếp theo, bạn cần phải cho những thành phần nhỏ có trong các thẻ để cho vào trong thẻ <li>.
Những thành phần này sẽ trở thành các mục trong danh sách của bạn. Mỗi mục danh sách phải có một thẻ mở và thẻ đóng.
Một lưu ý nhỏ dành cho bạn là các mục danh sách mà bạn vừa chia không nhất thiết phải chỉ chứa văn bản. Chúng cũng có thể chứa các phần tử HTML khác.
Nói một cách dễ hiểu, trong mỗi mục của một danh sách, bạn có thể cho vào những mục là văn bản, hoặc cũng có thể cho vào trong đó cách thẻ có chứa link dẫn đến html khác.
Bước 3: Gói tất cả các mục danh sách trong thẻ <ul>.
Sau khi gói các thẻ trong danh sách <li>, bạn cần bọc tất cả các mục danh sách trong thẻ <ul>. Điều này sẽ yêu cầu trình duyệt hiển thị một danh sách các mục không có thứ tự, đây là một danh sách có dấu đầu dòng theo mặc định.

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

Có rất nhiều kiểu tạo ra html list, có thể kể đến như:

Dấu chấm

Thuộc tính kiểu danh sách CSS xác định điểm đánh dấu của một mục danh sách. Theo mặc định, giá trị là “•”, đặt điểm đánh dấu thành dấu đầu dòng. Do đó, một danh sách không có thứ tự sẽ xuất hiện dưới dạng danh sách có dấu đầu dòng cho dù thuộc tính CSS list-style-type được đặt thành “•” hay không được xác định.

Dấu vòng tròn

Bên cạnh máy dấu •, điểm đánh dấu vòng tròn º cũng là một html list. Để thay đổi điểm đánh dấu mục danh sách mặc định thành một vòng tròn, hãy đặt thuộc tính CSS list-style-type thành “list-style-type: circle”.

Điểm đánh dấu hình vuông

Để thay đổi điểm đánh dấu mục danh sách mặc định thành hình vuông, hãy đặt thuộc tính kiểu danh sách CSS thành “list-style-type: square;”.

Không có điểm đánh dấu

Bạn cũng có thể xóa hoàn toàn điểm đánh dấu mục danh sách bằng cách đặt thuộc tính CSS list-style-type thành “list-style-type: none;”. Các mục trong danh sách sẽ vẫn được thụt vào, nhưng không có điểm đánh dấu nào xuất hiện trước chúng.

Danh sách lồng nhau

Bạn có thể tạo một danh sách bên trong một danh sách khác – hay còn gọi là danh sách lồng nhau – trong HTML.
Bạn có thể lồng một danh sách không có thứ tự hoặc có thứ tự vào bên trong một danh sách không có thứ tự, nhưng chúng tôi sẽ tập trung vào danh sách trước vì chủ đề của bài đăng này là danh sách không có thứ tự.
Để tạo một danh sách không có thứ tự lồng nhau, chỉ cần thêm danh sách không có thứ tự thứ hai bên dưới một mục danh sách trong danh sách không có thứ tự đầu tiên.
Danh sách thứ hai này cũng phải chứa phần tử <ul> chính và phần tử con <li>. Bạn phải bao gồm thẻ đóng </ul> nếu không trình duyệt sẽ hiển thị tất cả các mục danh sách sau dưới dạng lồng nhau.

Căn chỉnh lề

Thẻ HTML <ul> sẽ thụt lề các mục trong danh sách của nó theo mặc định. Nếu bạn muốn thay đổi khoảng cách thụt lề, thì bạn có thể sử dụng thuộc tính CSS margin-left hoặc padding-left. Giá trị dương sẽ đẩy các mục trong danh sách sang bên phải, trong khi giá trị âm sẽ đẩy các mục sang phải.

Danh sách ngang

Theo mặc định, các mục trong Html list sẽ được liệt kê theo chiều dọc, nhưng bạn có thể hiển thị chúng theo chiều ngang với một số CSS. Đây thường là một lựa chọn phổ biến khi tạo menu điều hướng.
Ví dụ bên dưới Html list các phần tử neo theo chiều ngang. CSS được áp dụng cho phần tử danh sách không có thứ tự để xóa các điểm đánh dấu mục danh sách và đặt lề, phần đệm và màu nền. Thuộc tính phần bổ sung cũng được đặt thành “ẩn” để ẩn bất kỳ phần bổ sung nào hiển thị bên ngoài hộp của phần tử.
Mỗi mục Html list được xác định bởi thuộc tính float CSS và được đặt thành “left” để chúng nổi ở bên trái vùng chứa của chúng (tức là phần tử danh sách không có thứ tự).
Cuối cùng, mỗi phần tử neo được CSS tạo kiểu để xuất hiện được in đậm, căn giữa, màu xanh nước biển và không có gạch dưới. Thuộc tính display và padding đảm bảo có khoảng trống giữa mỗi mục danh sách.

Cách sử dụng Html list không có thứ tự

Dưới đây là những tóm lược về những gì liên quan đến Html list:

Thẻ HTML	Nội dung
<ul>	Xác định một danh sách không có thứ tự.
<li>	Xác định một mục danh sách. Các mục danh sách có thể chứa các phần tử HTML khác, như phần tử neo.
list-style-type	Xác định điểm đánh dấu mục danh sách
	Danh sách không có thứ tự có thể được lồng vào nhau.
margin-left hoặc padding-left	Thay đổi khoảng cách thụt lề mặc định của danh sách không có thứ tự.
float CSS	Hiển thị danh sách không có thứ tự theo chiều ngang

Qua bài viết trên, bạn đã hiểu về Html list rồi chứ. Theo dõi Tenten để cập nhật thêm nhiều kiến thức khác nhé!

Các tìm kiếm liên quan đến chủ đề “HTML list”

drop-down list html	li HTML
List HTML CSS	Input list HTML
Select list HTML	Unordered list HTML
list-item css	HTML list-style

Bài viết liên quan

10 yếu tố khi tạo form html là gì?
3 thẻ HTML thông dụng hiện nay là gì?
3 điều cần biết về HTML comment
HTML5 là gì? Ưu điểm nổi bật của HTML5
Web Design là gì? Những điều cần biết về web design