Bạn hãy xem đoạn code sau:
<div>
<div class="container">
<div class="top-section">
<div class="title"><h1>My Website</h1></div>
<div class="menu">
<div class="menu-item">Home</div>
<div class="menu-item">About</div>
<div class="menu-item">Contact</div>
</div>
</div>
<div class="content">
<div class="main-content">
<div class="post">
<div class="post-title">Welcome to My Blog</div>
<div class="post-body">This is the main content of the page.</div>
</div>
</div>
<div class="sidebar">
<div class="sidebar-item">Related Links</div>
<div class="sidebar-item">Categories</div>
</div>
</div>
<div class="bottom-section">
<div class="footer-text">© 2025 My Website</div>
</div>
</div>
</div>
Bạn vẫn đang viết mã như vậy sao? Hãy dừng lại! Có một cách tốt hơn để lập trình frontend bằng cách sử dụng HTML ngữ nghĩa (semantic HTML). Phương pháp này không chỉ cải thiện khả năng truy cập (accessibility), tối ưu hóa công cụ tìm kiếm (SEO) mà còn tăng tính đọc hiểu (readability) cho mã nguồn của bạn.
Vấn Đề Khi Lạm Dụng Thẻ Div
Việc sử dụng quá nhiều thẻ <div> trong lập trình frontend gây ra nhiều vấn đề. Thẻ <div> không mang ý nghĩa ngữ nghĩa, khiến các công cụ tìm kiếm (search engines) và trình đọc màn hình (screen readers) không thể hiểu được nội dung. Cụ thể:
- Về accessibility: Trình đọc màn hình thường bỏ qua thẻ <div> trừ khi bạn thêm các vai trò ARIA (Accessible Rich Internet Applications), điều này làm tăng độ phức tạp không cần thiết.
- Về SEO: Thẻ <div> không cung cấp thông tin gì cho các công cụ tìm kiếm, khiến trang web của bạn khó được xếp hạng cao.
- Về bảo trì: Mã nguồn không ngữ nghĩa (non-semantic markup) dễ gây nhầm lẫn cho các lập trình viên khác khi đọc và chỉnh sửa.
Ví dụ, một đoạn mã chỉ toàn thẻ <div> như sau sẽ không nói lên được điều gì:
<div> <div>Tiêu đề</div> <div>Nội dung chính</div> </div>
Đoạn mã này chẳng giúp ích gì cho cả công cụ tìm kiếm lẫn trình đọc màn hình.
Giải Pháp: Sử Dụng Thẻ Ngữ Nghĩa
Thay vì lạm dụng <div>, bạn nên sử dụng các thẻ HTML ngữ nghĩa để mô tả rõ ràng mục đích của từng phần nội dung. Dưới đây là những thẻ quan trọng bạn nên áp dụng:
- <header>: Dùng cho tiêu đề của trang hoặc một phần cụ thể.
- <nav>: Đánh dấu khu vực chứa menu điều hướng.
- <main>: Phần nội dung chính của trang web.
- <section>: Nhóm các nội dung liên quan với nhau.
- <article>: Nội dung độc lập như bài blog, tin tức.
- <aside>: Phần nội dung phụ như thanh bên (sidebar).
- <footer>: Chân trang hoặc chân của một phần nội dung.
Ví Dụ Mã Ngữ Nghĩa
<header>Tiêu đề trang</header>
<nav>Menu điều hướng</nav>
<main>
<section>
<article>Nội dung bài viết</article>
</section>
<aside>Thông tin phụ</aside>
</main>
<footer>Chân trang</footer>
Cách viết này không chỉ cải thiện SEO mà còn giúp người dùng khuyết tật dễ dàng truy cập trang web của bạn hơn.
Khi Nào Nên Dùng Thẻ Div?
Hãy chỉ sử dụng thẻ <div> khi không có thẻ ngữ nghĩa nào phù hợp hơn. Điều này giúp mã nguồn của bạn trở nên sạch sẽ, dễ hiểu và tối ưu hơn.
Kết Luận
Ngừng lạm dụng thẻ <div> trong lúc lập trình frontend ngay hôm nay! Việc chuyển sang sử dụng HTML ngữ nghĩa không chỉ nâng cao chất lượng mã nguồn mà còn cải thiện trải nghiệm người dùng, khả năng truy cập và thứ hạng trên công cụ tìm kiếm. Hãy bắt đầu áp dụng ngay để tạo ra những trang web chuyên nghiệp và hiệu quả hơn!
