HTML cho người mới bắt đầu: 5 sai lầm nghiêm trọng về danh sách đang làm hỏng UX

HTML cho người mới bắt đầu: 5 sai lầm nghiêm trọng về danh sách đang làm hỏng UX

Bạn có thể học cách tạo danh sách (list) trong HTML chỉ trong 20 phút. Chỉ cần thêm một vài thẻ <li> vào bên trong thẻ <ul>, xong việc. Giao đi.

Tuy nhiên, thực tế lại là người dùng thoát trang ngay lập tức. Nội dung của bạn trở nên lộn xộn. Và các trình đọc màn hình (screen reader) đang đọc menu điều hướng của bạn với tốc độ gấp rút như đang đọc một bản tuyên bố miễn trừ trách nhiệm pháp lý.

Âm thanh quen thuộc? Bạn không đơn độc. Danh sách HTML nhìn thì có vẻ đơn giản, nhưng ẩn bên dưới là 5 sai lầm cụ thể đang âm thầm bóp nghẹt trải nghiệm người dùng (UX) trước khi họ kịp đọc nội dung.

Hãy cùng khắc phục điều đó.

Danh sách HTML thực chất làm gì (Ngoài việc hiển thị dấu đầu dòng)

Trước khi đi sâu vào các sai lầm, đây là điều mà hầu hết các hướng dẫn thường bỏ qua: Danh sách HTML không phải là công cụ tạo hình ảnh. Nó là công cụ cấu trúc ngữ nghĩa (semantic structure). Khi bạn bọc nội dung trong thẻ <ul> hoặc <ol>, bạn đang thông báo cho trình duyệt, công cụ tìm kiếm và trình đọc màn hình rằng: các mục này thuộc về nhau và có mối quan hệ liên kết.

Điều này cực kỳ quan trọng đối với SEO và khả năng truy cập (accessibility).

<!-- Đây chỉ là định dạng hình ảnh -->
<p>• Trứng • Sữa • Bột mì</p>

<!-- Đây là cấu trúc ngữ nghĩa -->
<ul>
  <li>Trứng</li>
  <li>Sữa</li>
  <li>Bột mì</li>
</ul>

Google có thể phân tích cú pháp đoạn mã thứ hai. Trình đọc màn hình có thể thông báo chính xác nó. Và chính bạn trong tương lai cũng có thể bảo trì nó dễ dàng hơn.

Sai lầm 1: Dùng <ul> khi thứ tự thực sự quan trọng

Đây là lỗi phổ biến nhất mà người mới mắc phải. Danh sách không có thứ tự (<ul>) dùng cho các mục mà trình tự không quan trọng — ví dụ như topping pizza, danh sách tính năng, các nguyên liệu nấu ăn.

Danh sách có thứ tự (<ol>) dành cho các bước, xếp hạng và các chuỗi mà vị trí mang ý nghĩa riêng.

<!-- Sai: Các bước trình bày như danh sách không có thứ tự -->
<ul>
  <li>Cho trứng vào</li>
  <li>Bật lò nướng</li>
  <li>Trộn bột</li>
</ul>

<!-- Đúng: Các bước tuần tự dùng ol -->
<ol>
  <li>Bật lò nướng ở 180 độ C</li>
  <li>Trộn bột và trứng</li>
  <li>Nướng trong 25 phút</li>
</ol>

Tại sao điều này lại quan trọng với UX? Vì <ol> sẽ tự động đánh số các mục. Thêm một bước vào giữa và các con số sẽ tự động cập nhật. Không cần chỉnh sửa thủ công. Không có lỗi đánh số. Trình đọc màn hình cũng sẽ thông báo "Bước 2 trong tổng số 5", giúp người dùng định hướng rõ ràng qua quy trình.

Sai lầm 2: Lồng danh sách không đúng cách

Danh sách lồng nhau (nested lists) là nơi người mới tỏa sáng hoặc thất bại hoàn toàn. Có một quy tắc mà gần như không ai nhắc đến: danh sách lồng nhau phải nằm bên trong một thẻ <li>, không được nằm trực tiếp bên trong <ul> hoặc <ol>.

<!-- Sai: Danh sách lồng nằm trực tiếp bên trong ul -->
<ul>
  <li>Thứ Hai</li>
  <ul>
    <li>Họp 9 giờ sáng</li>
  </ul>
</ul>

<!-- Đúng: Danh sách lồng nằm bên trong thẻ li -->
<ul>
  <li>Thứ Hai
    <ul>
      <li>Họp 9 giờ sáng</li>
      <li>Uống cà phê 10 giờ (bắt buộc)</li>
    </ul>
  </li>
</ul>

Phiên bản sai về mặt kỹ thuật vẫn hiển thị trên hầu hết trình duyệt. Nhưng nó tạo ra HTML không hợp lệ, gây nhầm lẫn cho các công nghệ hỗ trợ và dẫn đến hành vi định dạng không thể đoán trước trên các trình duyệt khác nhau. Cấu trúc hợp lệ là bắt buộc nếu bạn quan tâm đến người dùng thực.

Sai lầm 3: Làm mất ngữ nghĩa danh sách bằng CSS và quên ARIA

Đây là lỗi thường đánh lừa những người đã có kinh nghiệm một chút. Khi bạn đặt list-style: none trong CSS để xóa các dấu đầu dòng cho menu điều hướng, Safari và VoiceOver thực sự sẽ ngừng thông báo phần tử đó là một danh sách.

Bạn đã giết chết ý nghĩa ngữ nghĩa chỉ bằng một dòng CSS.

Cách khắc phục là một thuộc tính duy nhất:

<ul role="list" style="list-style: none;">
  <li>Trang chủ</li>
  <li>Về chúng tôi</li>
  <li>Liên hệ</li>
</ul>

Việc thêm role="list" sẽ khôi phục lại thông báo khả năng truy cập. Hầu hết các hướng dẫn về danh sách HTML cho người mới đều không đề cập đến điều này. Đây là một trong những bản sửa lỗi có tác động lớn nhất mà bạn có thể thực hiện trong 10 giây.

Sai lầm 4: Dùng thẻ <br> thay vì cấu trúc danh sách chuẩn

Đây là thói quen còn sót lại từ những ngày đầu của HTML. Người mới đôi khi tạo danh sách giả bằng cách dùng ngắt dòng:

<!-- Đừng bao giờ làm như vậy -->
<p>
  Tính năng 1<br>
  Tính năng 2<br>
  Tính năng 3
</p>

<!-- Hãy làm điều này thay thế -->
<ul>
  <li>Tính năng 1</li>
  <li>Tính năng 2</li>
  <li>Tính năng 3</li>
</ul>

Phiên bản dùng <br> mang lại giá trị ngữ nghĩa bằng không. Các công cụ tìm kiếm không thể xác định các mục danh sách. Trình đọc màn hình không thể đếm mục hoặc điều hướng giữa chúng. Nó tương đương với việc viết bảng tính Excel trong Notepad.

Sai lầm 5: Lồng quá sâu đến mức không ai đọc được code của bạn

Việc lồng danh sách rất mạnh mẽ. Nhưng lồng danh sách sâu 4 cấp chỉ vì nội dung của bạn phức tạp thường là dấu hiệu cho thấy kiến trúc thông tin của bạn cần được suy nghĩ lại, chứ không phải là cần lồng nhiều hơn.

Một quy tắc vàng: nếu bạn đang lồng sâu quá hai cấp, hãy cân nhắc xem liệu các mục con đó có xứng đáng trở thành một phần riêng có tiêu đề (heading) hay không.

Những điểm chính cần nhớ

• Sử dụng <ol> cho các bước tuần tự, <ul> cho các tập hợp không có thứ tự.
• Luôn lồng danh sách con bên trong các thẻ <li>, không bao giờ trực tiếp bên trong <ul>.
• Thêm role="list" khi xóa dấu đầu dòng bằng CSS để giữ hành vi của trình đọc màn hình.
• Không bao giờ tạo danh sách giả bằng thẻ <br>.
• Hai cấp lồng nhau thường là đủ.

Năm bản sửa lỗi này sẽ ngay lập tức cải thiện cấu trúc HTML, điểm số khả năng truy cập và trải nghiệm người dùng của bạn. Nhưng còn một kỹ thuật nữa được đề cập trong bài viết đầy đủ — tùy chỉnh các dấu đầu dòng danh sách vượt xa CSS cơ bản — có thể hoàn toàn thay đổi giao diện và hoạt động của danh sách trên các thiết bị.

Bạn muốn tìm hướng dẫn hoàn chỉnh với các ví dụ tương tác và cách tùy chỉnh dấu đầu dòng chi tiết? Đọc bài viết đầy đủ tại Drive Coding.