Sử dụng tuyệt vời các danh sách HTML trong thiết kế web

Bạn có thể tìm thấy danh sách được thiết kế tốt trên Internet. Các nhà thiết kế đã sử dụng chúng trong nhiều thập kỷ để phối hợp thông tin trang và bố cục, và trong web ngày nay, bạn có thể thấy sự sáng tạo tuyệt vời trong cách các nhà thiết kế web đang sử dụng danh sách. Chúng bao gồm menu điều hướng, liên kết hồ sơ, lưu trữ, nhiệm vụ / danh sách kiểm tra và hàng tấn sử dụng khác!

Trong bài đăng này, tôi sẽ giới thiệu các loại danh sách HTML khác nhau, với các mẹo về thiết kế chúng, đặc biệt là về cách thêm một cạnh duy nhất vào danh sách của bạn. Ngoài ra, tôi sẽ đưa bạn qua một vài ví dụ về các trang web có thiết kế danh sách tuyệt vời và cuối cùng bạn sẽ nhận được một danh sách các trang web có danh sách HTML được thiết kế độc đáo. Không còn nghi ngờ gì nữa về cách làm cho danh sách đơn giản của bạn trông độc đáo và hãy bắt đầu tận dụng tối đa chúng từ hôm nay!

Các yếu tố danh sách

Các nhà thiết kế web liên tục nhảy từ nhóm này sang nhóm khác, do đó làm cho phong cách trang web thay đổi theo thời gian, nhưng danh sách đã đứng trước thử thách của thời gian và rất có thể sẽ xuất hiện trong sự đổi mới trong tương lai của World Wide Web.

Trước khi kiểm tra các ví dụ tôi muốn đề cập đến một vài điểm với danh sách HTML. Có một vài loại danh sách khác nhau mà bạn có thể sử dụng trong công việc thiết kế của riêng bạn. Phần lớn các nhà thiết kế web tập trung vào Danh sách không theo thứ tự được mở bằng

nhưng cũng có hai biến thể ít phổ biến khác: Danh sách đặt hàng và Định nghĩa dữ liệu. Tôi đã đi sâu vào chi tiết bên dưới.

Danh sách không theo thứ tự (

)

Có thể là một trong những yếu tố được sử dụng nhiều nhất trong các tiêu chuẩn HTML4 / HTML5. Danh sách không có thứ tự sẽ xuất dữ liệu theo cùng một cách với danh sách được sắp xếp, tuy nhiên bạn sẽ không thấy bất kỳ dấu số nào ở bên cạnh. Thay vào đó, mỗi mục được đưa ra một vòng tròn nhỏ hoặc đĩa và chia nhỏ thành một dòng mới. Biểu tượng này cũng có thể được thay đổi với thuộc tính kiểu kiểu danh sách tìm thấy trong CSS.

Dưới đây là mã ví dụ của danh sách không có thứ tự:

 
 
Mục 1
 
Mục 2
 
Mục 3
 
 

Danh sách không có thứ tự là phương thuốc hoàn hảo để xây dựng liên kết điều hướng. Vì bạn có thể dễ dàng lồng toàn bộ danh sách trong bất kỳ mục danh sách nó là một vấn đề đơn giản để tạo liên kết điều hướng phụ cũng. Sau khi xóa kiểu danh sách, bạn sẽ để lại một thành phần mục trống. Từ đây, bạn có thể định kiểu các liên kết neo để xuất hiện dưới dạng các thành phần khối trên trang của mình, do đó điền vào thiết kế menu điều hướng và với một số mã jQuery, bạn có thể đặt một tiêu đề đẹp cho trang web của mình.

Thông thường nhất bạn sẽ tìm thấy danh sách không có thứ tự ở giữa các bài viết web hoặc hướng dẫn cài đặt. Hãy chú ý rằng Google và các bot tìm kiếm khác không xử lý nội dung trang của bạn theo cách khác, vậy bạn SEO không nên bị ảnh hưởng cho dù bạn chọn loại danh sách nào.

Danh sách đặt hàng (

)

Khi bạn cần đặt một bộ dữ liệu, có thể thiết lập khung bố cục của riêng bạn từ đầu, nhưng theo cách này, bạn sẽ cần phải thêm từng số tăng dần bằng tay, có thể gây mệt mỏi. Danh sách đặt hàng là tuyệt vời cho giữ các nhiệm vụ được đánh số theo hàng mà không có bất kỳ vít-up. Thứ tự của các mục danh sách nội bộ của bạn (

• ) sẽ ra lệnh làm thế nào dữ liệu được trình bày.

  Dưới đây là mã ví dụ của danh sách được đặt hàng:

   
   
  Mục 1
   
  Mục 2
   
  Mục 3
   
   

  Cũng có thể thay đổi bộ đếm từ số thường thành một số tùy chọn khác. Bao gồm các chữ cái và chữ số La Mã, đến tên một vài. Các nhà thiết kế web sẽ sử dụng danh sách theo thứ tự cho danh sách cụ thể theo nội dung. Dữ liệu công thức, nhiệm vụ hàng ngày, yêu thích, hoặc là người dùng đăng nhập hàng đầu / gần đây chỉ là một vài ví dụ. Thường thì bạn sẽ thấy bình luận blog được xây dựng bằng cách sử dụng danh sách theo thứ tự để giữ mỗi bình luận theo một chuỗi được đánh số.

  Danh sách định nghĩa dữ liệu (

  )

  Danh sách định nghĩa không được nhìn thấy thường xuyên nữa (không giống như chúng đã từng phổ biến). Chúng từng được nhìn thấy với các nhà thiết kế web tạo ra các định dạng phức tạp của liên kết hoặc nội dung hộp. Các thẻ danh sách dữ liệu (

  ) ngày nay thường bị hiểu lầm bởi các lập trình viên. Trong HTML4.01 danh sách dữ liệu thông số kỹ thuật đã được sử dụng để ghép các mục với mô tả của họ. Chúng được gọi là danh sách định nghĩa.

  Dưới đây là mã ví dụ của danh sách định nghĩa dữ liệu:

   
   
  Mục 1
   
  Sự miêu tả
   
  Mục 2
   
  Sự miêu tả
   
  Mục 3
   
  Sự miêu tả
   
   

  Tuy nhiên, với danh sách dữ liệu thông số kỹ thuật HTML5 mới đã được sao chép. Không có bất kỳ sự khác biệt nào với cú pháp trong cách bạn sử dụng các yếu tố, tuy nhiên mục đích của chúng đã được cập nhật dưới dạng danh sách mô tả bao gồm một hoặc nhiều thuật ngữ dữ liệu (

  ) theo sau là một hoặc nhiều định nghĩa dữ liệu (

  ).

  Một ví dụ mạnh mẽ từ bài viết của Bác sĩ HTML5 là một danh sách định dạng siêu dữ liệu. Bên trong một dl liệt kê yếu tố bạn sẽ định nghĩa một thuật ngữ, chẳng hạn như tên của bạn, sau đó mỗi lần tiếp theo thẻ định nghĩa có thể mô tả dữ liệu về bạn, có thể là tuổi tác, nghề nghiệp, thị trấn / thành phố hiện tại, v.v ... Cuối cùng bất kỳ tập hợp dữ liệu nào có cặp khóa / giá trị đều khớp với danh sách mô tả. Bạn có thể sử dụng nhiều thuật ngữ dữ liệu trong danh sách, nhưng W3C nói rằng mỗi thuật ngữ nên là duy nhất trong danh sách.

  Bây giờ chúng tôi đã đóng đinh 3 kiểu danh sách phổ biến, hãy chuyển sang một số ví dụ! Các nhà thiết kế web đã rất sáng tạo với danh sách của họ trong những năm gần đây. Tôi đã lập danh mục 7 trang web yêu thích của tôi dưới đây với trọng tâm cụ thể về cách sử dụng danh sách sáng tạo của họ.

  Điều hướng danh sách đơn giản

  Menu điều hướng đơn giản hơn nhiều để xây dựng với các kỹ thuật CSS hiện đại. Đây là lý do tại sao danh sách không có thứ tự và thậm chí danh sách theo thứ tự đã trở thành một lựa chọn phổ biến. Một trong những ví dụ yêu thích của tôi về điều này xuất hiện trên blog truyền thông xã hội, Mashable.

  

  Về phía trên tiêu đề của họ, bạn sẽ nhận thấy 2 bộ liên kết chính. Trực tiếp trên đầu logo của họ là một danh sách nhỏ không có thứ tự chứa các liên kết cộng đồng như Câu chuyện hàng đầu, Chủ đề xu hướng và Con người. Nhà thiết kế đã tạo ra một phong cách di chuột mượt mà với nền tảng và màu sắc vững chắc.

  Ngay bên dưới này bạn sẽ thấy các liên kết điều hướng phụ của họ. Menu điều hướng này dẫn đến các danh mục blog như Social Media hoặc Tech. Cả hai danh sách không có thứ tự được chứa trong một HTML5