2010-07-26 37 views
22

Tôi mới sử dụng HTML. Khi tôi bắt đầu đọc tài liệu về danh sách, tôi đã nhận thấy rằng ở mọi nơi, cấu trúc <ul>, <li> được sử dụng, ngay cả khi tạo danh sách rất đơn giản.Tại sao nó được chấp nhận sử dụng cấu trúc UL, LI trong danh sách menu?

Nhưng đối với tôi đó là thoải mái nhất để sử dụng chỉ <a> yếu tố với CSS:

display: block; 
/* and/or */ 
float: left; 

Vì vậy, tại sao sử dụng <ul>, <li> thay vì chỉ <a>?

Cảm ơn rất nhiều.

Trả lời

27

Vì cấu trúc là những yếu tố phù hợp nhất cho mục đích đó. Đồng thời giúp người dùng trình đọc màn hình đọc chính xác các yếu tố của trang.

Hãy nhớ rằng HTML là để đánh dấu/nội dung (văn bản này là gì? Một đoạn? Bọc nó trong thẻ p), CSS là để tạo kiểu, JS là dành cho hành vi.

Bạn có thể có hàng nghìn neo trên trang web của mình, nhưng điều gì sẽ xảy ra nếu bạn muốn neo kiểu được lồng trong các mục được liệt kê khác với các neo khác?

<ul> 
<li><a href="#">blah</a></li> 
</ul> 

<a href="#">sfl</a> 

Nếu bạn đã làm điều đúng, css của bạn sẽ là tầm thường để thực hiện

a { } 
ul li a { } 

Nếu không, bạn sẽ phải ném các lớp xung quanh neo và nó sẽ là lộn xộn và unstructural.

Liên quan đến SEO - Tôi tin rằng trong quá khứ được đánh dấu bằng mã ngữ nghĩa không có nhiều mang nhưng ngày nay với các thông số như RDF, HTML 5 yếu tố web ngày càng trở nên ngữ nghĩa hơn, vì vậy nó chỉ mang lại lợi ích cho như ngữ nghĩa như bạn có thể.

Trong năm 2010, Google được chỉ định ba hình thức của siêu dữ liệu có cấu trúc mà hệ thống của họ sẽ sử dụng để tìm cấu trúc nội dung ngữ nghĩa trong các trang web. Thông tin như vậy, khi có liên quan đến đánh giá, tiểu sử người, danh sách doanh nghiệp, và sự kiện sẽ được Google sử dụng để tăng cường 'đoạn mã' hoặc đoạn ngắn văn bản được trích dẫn được hiển thị khi trang xuất hiện trong danh sách tìm kiếm . Google chỉ định rằng dữ liệu đó có thể là được cung cấp bằng microdata, microformats hoặc RDFa. [13] Microdata được chỉ định bên trong itemtype và itemprop thuộc tính được thêm vào HTML hiện tại yếu tố; từ khóa microformat được được thêm vào bên trong các thuộc tính lớp như được thảo luận ở trên; và RDFa dựa trên các thuộc tính rel, typeof và thuộc tính được thêm vào các phần tử hiện có. [14]

+0

Cảm ơn và có ảnh hưởng gì đến công cụ tìm kiếm không? –

12

Vì đánh dấu của bạn được cho là ngữ nghĩa hơn là chỉ cho mục đích hiển thị.

Bất kỳ ai hoặc bất kỳ thứ gì đọc tài liệu của bạn có thể ngay lập tức cho biết rằng phần được đánh dấu bằng <ul><li>...</li></ul> thẻ là danh sách.

CSS không mô tả nội dung nào đó là, chỉ cách hiển thị. Lý tưởng nhất là bạn nên đánh dấu tài liệu của mình để mô tả mỗi phần là và sau đó sử dụng CSS để hiển thị các phần đó một cách thích hợp.

3

Vì UL, LI và OL là các phần tử HTML được tạo với mục đích cụ thể là danh sách. Bằng cách sử dụng đánh dấu thích hợp, bạn sẽ thêm nhiều thông tin hơn vào nội dung của mình, bất kỳ công cụ tự động nào nhìn thấy mã của bạn sẽ biết rằng đó là các danh sách và có thể hành động tương ứng.

Nếu bạn muốn liên kết bên trong một mục trong danh sách, bạn có thể đặt một Một yếu tố lồng bên trong LI:

<ul> 
    <li><a href="example.com">Example</a></li> 
</ul> 
0

Đối với những người không đủ thuyết phục bởi ngữ nghĩa, tôi nghĩ công bằng của nó để cũng đề cập đến việc sử dụng một danh sách thẻ có thể được mở rộng độc đáo để bao gồm điều hướng cấp hai. Sau đó, thêm vào một số css (và một số javascript vì lợi ích của IE) và bosh ... bạn có superfish menu.

Các vấn đề liên quan