Tại sao tôi nên sử dụng 'li' thay vì 'div'?

Tôi không chắc tại sao tôi cần sử dụng ul-li so với đơn giản là sử dụng div khi liệt kê các mục. Tôi có thể làm cho cả hai trông giống hệt nhau, vậy đâu là lợi thế chức năng để tạo một danh sách không có thứ tự so với sắp xếp các div?

Đối với tính đúng đắn về ngữ nghĩa. HTML có khả năng thể hiện danh sách mọi thứ và nó giúp rô-bốt của Google, trình đọc màn hình và tất cả những người dùng không chỉ quan tâm đến bản trình bày của trang web hiểu nội dung của bạn tốt hơn.

Tôi không chắc tại sao tôi cần sử dụng ul-li so với đơn giản là sử dụng div khi liệt kê các mục. Tôi có thể làm cho cả hai trông giống hệt nhau

Đó là từ khóa trong câu hỏi của bạn: "nhìn". Bạn cũng có thể làm cho họ nhập giống nhau cho người mù bằng cách sử dụng đầu đọc chữ nổi không? Bạn có thể làm cho họ âm thanh tương tự cho người khiếm thị sử dụng một text-to-speech synthesizer? Bạn vẫn có thể làm cho chúng trông giống nhau đối với người khiếm thị bằng cách sử dụng bảng định kiểu người dùng CSS phía máy khách tùy chỉnh?

Từ đó, "nhìn", là một từ rất nguy hiểm - khi bạn sử dụng từ đó liên quan đến HTML, mọi cảnh báo sẽ xuất hiện trong đầu bạn. HTML là một ngôn ngữ để mô tả cấu trúc ngữ nghĩa của một tài liệu siêu phương tiện. Một cấu trúc ngữ nghĩa không có "cái nhìn", nó là một khái niệm trừu tượng.

Ngay cả khi bạn không quan tâm đến tất cả các tiêu điểm ngữ nghĩa này và bạn không quan tâm đến những người mù, hãy xem xét điều này: Google, Yahoo, MSN và Co. không có mắt, họ không "nhìn" vào CSS được hiển thị của bạn .

Bằng cách sử dụng đánh dấu chính xác về mặt ngữ nghĩa, bạn đang nhúng thêm thông tin vào văn bản của mình. Bằng cách sử dụng ul / li, bạn đang giao tiếp với ứng dụng tiêu thụ rằng thông tin là một danh sách, và không chỉ là "cái gì đó" (ai biết được điều gì) mà là một số văn bản bên trong một phần tử tùy ý.

Câu trả lời trực tiếp cho câu hỏi của bạn: Ưu điểm về chức năng là div có nghĩa rất ít, trong khi ul lis có nghĩa rõ ràng là "đây là danh sách các mục chưa được sắp xếp / có thứ tự."

Thuật ngữ "ngữ nghĩa" đề cập đến cách bạn sử dụng ý nghĩa vốn có của các cấu trúc hiện có để tạo ra ý nghĩa rõ ràng. HTML bao gồm các thẻ có nghĩa là một số thứ. Và có các quy tắc / hướng dẫn / cách thức được thiết lập để sử dụng chúng để tài liệu HTML được xuất bản của bạn truyền tải những gì bạn muốn.

Nếu bạn liệt kê nội dung nào đó trong tài liệu của mình, thì hãy thêm danh sách có thứ tự (UL) hoặc danh sách không có thứ tự (OL). Mặt khác, phần tử chia trang (DIV) được sử dụng để tạo một phần nội dung cụ thể & riêng biệt.

Phần tử div "chia". Khi bạn xem một trang, có những phần cụ thể như nội dung, chân trang, đầu trang, điều hướng, menu, biểu mẫu, v.v. Và bạn có thể sử dụng thẻ div để tạo các phân chia này. Thông thường, các phần của trang tương ứng với bố cục trực quan, vì vậy việc sử dụng các phần chia trang rõ ràng (DIV) để cắt bố cục của bạn trong CSS là một điều phù hợp tự nhiên. Bằng cách này, các thẻ div trở thành cấu trúc.

Nếu bạn lạm dụng hoặc lạm dụng quá nhiều thẻ div , nó có thể tạo ra ý nghĩa không mong muốn và mã bị phình ra.

Để nhầm lẫn vấn đề: Google sử dụng h3 và div để "phân chia" các kết quả tìm kiếm được liệt kê của họ. ul> li> h3 + div

Vì vậy, khi bạn tắt tất cả các kiểu (Shift + Cmd / Crtl + S trong thanh công cụ Firefox w / WebDeveloper), các div sẽ biến mất và xếp chồng lên nhau một cách tự nhiên. HTML trần của bạn vẫn sẽ hiển thị một trang đẹp với thứ bậc rõ ràng: từ trên xuống dưới, nội dung quan trọng nhất trước tiên và danh sách có dấu đầu dòng & số cho các mục được liệt kê. Và bạn nên thêm một liên kết ở gần đầu (đối với người dùng không nhìn thấy rõ) cho phép bạn bỏ qua: nội dung chính, biểu mẫu quan trọng hoặc tiêu đề chính (như mục lục).

Cuối cùng, hãy nhớ rằng bạn đang xây dựng một tài liệu. Không có tất cả các hiệu ứng hình ảnh, nó vẫn phải là một tài liệu cogent.

Có rất nhiều cuộc thảo luận về việc sử dụng <li>hoặc sử dụng <div>nhưng không có một bình luận nào đưa ra một ví dụ rõ ràng về nội dung bên trong các thẻ này. Cảm giác của tôi là điều đó <ul>và <li>không thực sự quan trọng vì lần cuối cùng tôi không thể nói với bạn rằng tôi thực sự đọc một "danh sách" những thứ trên một trang web, báo hoặc tạp chí - trực tuyến hoặc in.

<div>linh hoạt hơn nhiều. Nếu bạn đang liệt kê các thành phần cho một chiếc bánh, thì đó là một danh sách. Nếu bạn đang liệt kê những thứ cần đóng gói cho một chuyến đi bộ đường dài, thì đó là một danh sách.

Nhưng đối với ví dụ, biểu mẫu người dùng liệt kê một số thứ ngẫu nhiên không thực sự là danh sách, cũng không phải một chuỗi các đoạn văn, cũng không phải tất cả "tiêu đề". Một số thứ là ngày tháng, một số là hộp kiểm và một số là văn bản. Chia nó ra, nếu bạn hỏi tôi. Một người mù sẽ bị thông báo sai nếu nó được đánh dấu bằng <ul>và <li>và họ nghe thấy "Đây là danh sách ..." khi nó chỉ là một đống thứ, không thực sự là một danh sách.

Bạn nên sử dụng các thẻ phù hợp với nội dung bạn muốn đưa vào bên trong. Điều này không chỉ có nghĩa là ul / li thích hợp hơn cho danh sách. Điều này cũng có nghĩa là bạn phải xem xét nội dung danh sách của mình và xem nó có phải là danh sách không có thứ tự / có thứ tự hoặc định nghĩa hay không.

Một lập luận khác là khi bạn tắt css. Trình duyệt sẽ hiển thị kiểu mặc định của nó, điều này làm cho nó trông đẹp hơn nếu các thiết bị duyệt thay thế được sử dụng. Nó cũng tăng cường khả năng tiếp nhận.

Nếu bạn sử dụng div thay thế, lynx sẽ không thể hiển thị trang theo kiểu có thể đọc được.

Cá nhân tôi thích li's về ngữ nghĩa. Khi xem nguồn, bạn ngay lập tức thấy rằng bạn có một danh sách của một cái gì đó nếu chúng được bao bọc bởi một cái li. Một tập hợp div không cung cấp ý nghĩa ngữ nghĩa và thường ngữ nghĩa duy nhất cho danh sách được đưa vào bởi các lớp css như "listItem". Điều này rõ ràng chỉ ra một thực tế là ngay từ đầu đã nên sử dụng chữ li.

Nếu bạn có một vòng lặp trong logic trình bày của mình, tôi luôn ưu tiên một li hơn một div.

<li> nghĩa là một mục trong danh sách và cho phép trình phân tích cú pháp (trình duyệt, công cụ tìm kiếm, trình thu thập dữ liệu) biết rằng bạn đang liệt kê các mục. Bạn có thể sử dụng DIV thay vì LI nhưng những trình phân tích cú pháp đó sẽ không bao giờ biết rằng những mục đó đang được liệt kê và DIV không thực sự mô tả bất cứ điều gì ngoại trừ đó là một khối.

Nó phụ thuộc vào dự án. Gần đây tôi đã thực hiện một dự án có menu được thiết kế bằng danh sách. Họ muốn thêm một loạt các hiệu ứng, như trượt / mờ dần và cũng muốn thu gọn nó với nhiều cấp độ.

Trong trường hợp này, DIV phù hợp hơn nhiều. Tôi đã có thể tạo vùng chứa cho div con và áp dụng jQuery để đạt được hiệu ứng mong muốn.

Ngay cả khi dự án của bạn chưa có những yêu cầu này, có thể cần thận trọng khi nghĩ về cách bạn có thể thay đổi nó trong tương lai ...

Việc sử dụng <li>(nếu thích hợp) sẽ giảm thiểu tình trạng <div>thẻ tag mà bạn thường thấy trong các trang web, giúp các nhà phát triển rất nhiều.

Điều đó không phải <div>là xấu, nhưng bất cứ khi nào một thẻ được sử dụng quá mức ( <div>thường xuyên), nó sẽ làm loãng ý nghĩa ngữ nghĩa của thẻ đến mức hoàn toàn vô dụng. Tôi đã biết điều này gần đây từ một nhà thầu mà chúng tôi thuê để trợ giúp CSS / UI của ứng dụng web của chúng tôi và sự khác biệt mà nó tạo ra đối với khả năng đọc / bảo trì của mã HTML là rất đáng chú ý đối với tôi.

Nếu tất cả những gì bạn quan tâm là làm cho danh sách trông theo một cách nhất định với nỗ lực tối thiểu, thì đây là điều không cần phải bàn cãi: <li>chỉ cần nhập ít hơn một ký tự <div> và thẻ đóng của nó là tùy chọn trong HTML.

Và đó là ngoài những gì mọi người khác đã nói về ngữ nghĩa.

Để hiển thị đúng cách trên các trình duyệt nguyên thủy hoặc thiết bị di động

Câu hỏi của bạn đã được trả lời bởi tôi muốn thêm hai xu của tôi vào đây. Tôi đang làm việc trong một dự án mà tôi đang thực hiện logic phụ trợ và dữ liệu của tôi đang được tổng hợp thành một mẫu trang do nhà thiết kế của tôi thực hiện. ông đã sử dụng các thẻ ul và li để đại diện cho mọi loại danh sách trên trang, một số trong số đó là các widget. Dữ liệu đến từ một cms nơi người dùng có thể nhập văn bản đa dạng thức thông qua các thẻ html. khi người dùng bắt đầu tạo danh sách trong nội dung của họ, danh sách không còn giống như danh sách có dấu đầu dòng thay vì làm rối tung toàn bộ trang.

bài học kinh nghiệm: không sử dụng các thẻ danh sách với các bộ chọn css chung chung nếu nội dung của bạn có thể chứa html.

một điều khác về ul li là; bạn có thể sử dụng ul làm vùng chứa giúp bạn thiết lập lớp Kiểu

<ul class="myHebe">
  <li><a href="#">.net</a></li>
  <li><a href="#">.net</a></li>
</ul>

Tôi thích mẫu này khi tôi sử dụng ul

.myHebe{} // container
.myHebe li {} // items
.myHebe li a {} // subitems

Tất nhiên nó phụ thuộc vào cách chúng ta muốn sử dụng nó và cách chúng ta thích nó. Đây là cách tôi thích

Hy vọng sẽ giúp Cảm ơn