1. Lạm dụng thẻ <div>

Nhiều lập trình viên sử dụng <div> cho mọi thành phần trên trang web. Trong khi đó, HTML5 đã cung cấp các thẻ như <header>, <nav>, <main>, <section> và <footer> để mô tả rõ ý nghĩa của từng khu vực.

2. Đặt nhiều thẻ <main> trên cùng một trang

Theo tiêu chuẩn HTML5, mỗi trang chỉ nên có một thẻ <main> vì đây là nơi chứa nội dung chính.

3. Dùng <section> cho mọi thứ

<section> chỉ nên dùng khi nội dung có chung một chủ đề và thường có tiêu đề. Nếu chỉ cần nhóm các phần tử để tạo bố cục, hãy sử dụng <div>.

4. Nhầm lẫn giữa <article> và <section>

<article> là một nội dung độc lập như bài viết, tin tức hoặc bài blog có thể tách riêng mà vẫn có ý nghĩa. Trong khi đó, <section> chỉ là một phần của tài liệu.

5. Đặt menu điều hướng ngoài <nav>

Thanh menu chính hoặc các liên kết điều hướng nên được đặt trong thẻ <nav> để trình duyệt và công cụ tìm kiếm dễ nhận biết.

6. Không sử dụng <header> và <footer>

Hai thẻ này giúp xác định phần đầu và cuối của trang hoặc của từng bài viết, giúp cấu trúc website rõ ràng hơn.

7. Chỉ quan tâm đến giao diện mà quên ý nghĩa của HTML

HTML không chỉ để hiển thị nội dung mà còn giúp trình duyệt, công cụ tìm kiếm và các công nghệ hỗ trợ hiểu được cấu trúc của website. Một website đẹp nhưng không có cấu trúc ngữ nghĩa vẫn bị đánh giá thấp về chất lượng.

Kết luận

Semantic HTML không làm website đẹp hơn về giao diện, nhưng lại giúp mã nguồn dễ đọc, cải thiện SEO, tăng khả năng truy cập và giúp dự án chuyên nghiệp hơn. Ngay từ khi học HTML, hãy hình thành thói quen chọn đúng thẻ cho đúng mục đích thay vì chỉ sử dụng <div>.