HTML/CSS | Thẻ danh sách - Những sai lầm thường gặp

Học HTML, CSS từ Zero Tới Hero

• Dùng danh sách trong thẻ p
• Sử dụng nội dung không hợp lệ trong ul, ol
• Nên sử dụng thẻ p cho đoạn văn trong thẻ li (khi cần tối ưu cho Web accessibility)
• Viết thẻ li trên một hàng khi viết code

Dùng danh sách trong thẻ p

Thẻ <p> chỉ sử dụng để chứa nội dung văn bản và các thẻ inline như <br>, <img>, <a>, <b>, <strong>, <i>, <em>, v.v

Thẻ inline các bạn sẽ được học ở vài chương tới nhé.

Ví dụ, sử dụng sai:

<p>
    Top 3 Hành Tinh Lớn Nhất Trong Hệ Mặt Trời:
    <!-- Thẻ danh sách nằm trong thẻ <p> -->
    <ol>
        <li>Sao Mộc (đường kính 142.796km)</li>
        <li>Sao Thổ (đường kính 120.660km)</li>
        <li>Sao Thiên Vương (đường kính 51.120 km)</li>
    </ol>
</p>

Trong khi đó, cách sử dụng đúng là:

<p>Top 3 Hành Tinh Lớn Nhất Trong Hệ Mặt Trời:</p>
<!-- Thẻ danh sách nằm ngoài thẻ <p> -->
<ol>
    <li>Sao Mộc (đường kính 142.796km)</li>
    <li>Sao Thổ (đường kính 120.660km)</li>
    <li>Sao Thiên Vương (đường kính 51.120 km)</li>
</ol>

Các bạn lưu ý điều này để tránh nhầm lẫn khi làm việc trong tương lai nhé.

Sử dụng nội dung không hợp lệ trong ul, ol

Như đã được học ở bài học trước, thẻ <ul> và <ol> luôn có thẻ con trực tiếp là <li>. Nếu đưa nội dung khác như văn bản, hình ảnh, thẻ khác <li>, v.v vào trực tiếp trong <ul>, <ol> đều là không hợp lệ.

Dưới đây là một số tình huống sử dụng sai để bạn tham khảo nhé.

Đưa văn bản trực tiếp vào <ul>:

<ul>
    Fruits:
    <li>Apple</li>
    <li>Orange</li>
</ul>

hoặc đưa thẻ <p> trực tiếp vào <ul>:

<ul>
    <p>Fruits:</p>
    <li>Apple</li>
    <li>Orange</li>
</ul>

hoặc đưa thẻ <ul> trực tiếp vào <ul>:

<ul>
    <li>Apple</li>
    <ul>
        <li>Vietnamese apple</li>
        <li>American apple</li>
    </ul>
    <li>Orange</li>
</ul>

Trong khi đó, cách sử dụng hợp lệ là:

<p>Fruits:</p>
<ul>
    <li>
        Apple
        <ul>
            <li>Vietnamese apple</li>
            <li>American apple</li>
        </ul>
    </li>
    <li>Orange</li>
</ul>

Nên sử dụng thẻ p cho đoạn văn trong thẻ li (khi cần tối ưu cho Web accessibility)

Để rõ ràng về ngữ nghĩa và tối ưu cho khả năng truy cập (Web accessibility) thì các đoạn văn bản trong thẻ <li> vẫn nên được đưa vào trong thẻ <p>.

Thêm thẻ <p> cho đoạn văn trong thẻ <li>:

<p>Top 3 Hành Tinh Lớn Nhất Trong Hệ Mặt Trời:</p>
<ol>
    <li>
        <p>Sao Mộc (đường kính 142.796km)</p>
    </li>
    <li>
        <p>Sao Thổ (đường kính 120.660km)</p>
    </li>
    <li>
        <p>Sao Thiên Vương (đường kính 51.120 km)</p>
    </li>
</ol>

Tuy nhiên, điều này không thực sự cần thiết cho những tình huống không cần tối ưu về Web accessibility.

Viết thẻ li trên một hàng khi viết code

Đây là một vấn đề về việc trình bày code, làm cho code trở nên khó đọc hơn.

Nên tránh trình bày trên một hàng thế này:

<ul>
    <li>HTML</li><li>CSS</li><li>JavaScript</li>
</ul>

Còn đây là cách trình bày nên sử dụng:

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Cách trình bày code không làm ảnh hưởng tới kết quả hiển thị trên trình duyệt. Tuy nhiên, nếu trình bày không tốt có thể gây khó khăn trong việc đọc code, dễ nhầm lẫn (thừa/thiếu thẻ mở/thẻ đóng).

Một số tình huống, việc không chú ý cải thiện cách trình bày code có thể tạo thành thói quen không tốt, khó bỏ.

Tóm tắt

• Sử dụng thẻ <ul>, <ol> trong thẻ <p> là không hợp lệ. Thẻ <p> chỉ sử dụng để chứa nội dung văn bản và các thẻ inline như <b>, <strong>, <em>, v.v.
• Thẻ <ul> và <ol> luôn có thẻ con trực tiếp là <li>. Nếu đưa nội dung khác như văn bản, hình ảnh, thẻ khác <li>, v.v vào trực tiếp trong <ul>, <ol> đều là không hợp lệ.
• Nên sử dụng thẻ <p> cho các đoạn văn trong thẻ <li> khi cần tối ưu về Web accessibility.
• Tránh trình bày các thẻ <li> trên cùng một hàng vì có thể gây khó khăn trong việc đọc code, dễ nhầm lẫn (thừa/thiếu thẻ mở/thẻ đóng).