Học HTML, CSS từ Zero Tới Hero
- #Thẻ p lồng thẻ p
- #Không sử dụng thẻ p
- #Sử dụng thẻ br để tạo khoảng cách
- #Quá nhiều nội dung trong một thẻ p
Thẻ p lồng thẻ p
Mỗi thẻ <p> là một đoạn văn độc lập. Không có tình huống một đoạn văn lại nằm trong một đoạn văn khác. Chính vì vậy, trong HTML thẻ <p> không thể sử dụng lồng trong thẻ <p>. Nếu bạn cố tình làm điều này, trình duyệt sẽ không làm việc đúng như bạn mong đợi, các thẻ <p> có thể bị tách ra khỏi nhau và sinh ra các thẻ <p> dư thừa.
Ví dụ sử dụng đúng:
Ví dụ sử dụng sai:
Nhìn kết quả có thể chúng ta sẽ không nhận ra sự khác biệt. Tuy nhiên, khi Kiểm tra các thẻ <p> này bạn sẽ thấy chúng có vấn đề.
Trong video, mình có minh họa rõ ràng điều này.
Như vậy, chúng ta sẽ không bao giờ sử dụng các thẻ <p> lồng trong các thẻ <p> các bạn nhé.
Không sử dụng thẻ p
Trong một số tình huống, có thể bạn sẽ nhận thấy việc không dùng thẻ <p> cũng cho kết quả không khác biệt nhiều so với việc có dùng thẻ <p>.
Ví dụ, có sử dụng thẻ <p>:
Ví dụ, không sử dụng thẻ <p>:
Không sử dụng thẻ <p> trong tình huống này có một số vấn đề:
- Không đảm bảo tính ngữ nghĩa
- Không thể CSS riêng cho đoạn văn bản
- Không tối ưu cho khả năng truy cập
Mình có giải thích chi tiết hơn trong video các bạn nhé.
Sử dụng thẻ br để tạo khoảng cách
Đây cũng là một sai lầm phổ biến. Thông thường, các nhà phát triển chưa hiểu rõ mục đích sử dụng của thẻ <br> hoặc đôi khi họ hơi “lười” có thể dẫn tới sai lầm này.
Trường hợp thường thấy là dùng thẻ <br> để ngăn cách hai đoạn văn. Trong khi, để đảm báo đúng ngữ nghĩa nên sử dụng 2 thẻ <p> riêng biệt.
Ví dụ, sử dụng chưa tốt:
Vấn đề tồn tại ở cách viết trên:
- Chưa đảm bảo tính ngữ nghĩa, 2 đoạn văn bản cần sử dụng 2 thẻ
<p>. - Chưa tối ưu cho khả năng tiếp cận, trình đọc màn hình sẽ không thể di chuyển giữa 2 đoạn văn (1 thẻ
<p>trình đọc sẽ thấy là 1 đoạn văn)
Khi đó, cách viết tốt hơn là:
Quá nhiều nội dung trong một thẻ p
Đây là tình huống có thể gặp phải khi viết code HTML hoặc viết blog, tài liệu, v.v. Hãy cùng xem xét 2 ví dụ dưới đây.
Ví dụ 1, nhiều văn bản trong 1 thẻ p:
Nhìn cảm thấy hơi nhiều chữ, giảm cảm hứng đọc, chưa tốt về ngữ nghĩa, chưa tối ưu về khả năng truy cập.
Ví dụ 2, chia nhỏ thành nhiều thẻ p:
Chia làm nhiều đoạn văn nhỏ, cảm giác “thông thoáng” hơn, đúng ngữ nghĩa, tối ưu về khả năng truy cập.
Trong hai ví dụ trên, ví dụ 2 là cách làm tốt hơn, bởi vì:
- Trình bày “thông thoáng” hơn, cảm giác dễ đọc hơn
- Tách thành các đoạn văn với những ý khác nhau
- Đảm bảo về tính ngữ nghĩa khi thể hiện nhiều đoạn văn
- Tối ưu hơn cho khả năng truy cập (Web accessibility)
Nắm chắc những kiến thức trong chương này có thể giúp bạn viết bài (blog, tài liệu, vv) tốt hơn.
Tóm tắt
- Mỗi thẻ
<p>là một đoạn văn độc lập. Không có tình huống một đoạn văn lại nằm trong một đoạn văn khác. - Luôn sử dụng thẻ
<p>cho các đoạn văn bản để đảm bảo tính ngữ nghĩa và tối ưu khả năng truy cập. - Thẻ
<br>chỉ sử dụng với mục đích ngắt dòng trong các đoạn văn, không sử dụng để tạo khoảng cách lề giữa các nội dung. - Tính ngữ nghĩa là rất quan trọng trong HTML, bản thân mỗi thẻ HTML được tạo ra là để đánh dấu giúp nội dung có ý nghĩa hơn.
Nhận xét