Trong HTML, có rất nhiều thẻ dùng để nhóm nội dung lại với nhau. Nhưng bạn có bao giờ bối rối khi chọn giữa div, span, section, hay article? Bài viết này sẽ giúp bạn hiểu rõ điểm khác nhau giữa chúng, khi nào nên dùng thẻ nào, và tại sao điều này lại quan trọng cho SEO.
1. Thẻ div
- Là thẻ khối (block-level)
- Không mang ý nghĩa ngữ nghĩa (semantic)
- Thường dùng để chia layout, chia vùng giao diện
<div class="box">
<h2>Tiêu đề</h2>
<p>Nội dung bên trong box.</p>
</div>2. Thẻ span
- Là thẻ nội tuyến (inline)
- Cũng không có ngữ nghĩa
- Dùng để bao quanh 1 phần văn bản cần định dạng đặc biệt
<p>Tôi thích <span style="color:red;">màu đỏ</span>.</p>3. Thẻ section
- Có ý nghĩa ngữ nghĩa: dùng cho các phần nội dung có liên quan đến nhau
- Tốt cho SEO và chia rõ bố cục
<section>
<h2>Dịch vụ</h2>
<p>Chúng tôi cung cấp dịch vụ thiết kế web.</p>
</section>4. Thẻ article
- Dùng cho nội dung độc lập, có thể tách riêng và vẫn có ý nghĩa
- Ví dụ: bài viết blog, bình luận, tin tức…
<article>
<h2>HTML cơ bản</h2>
<p>Hướng dẫn học HTML cho người mới.</p>
</article>Khi nào nên dùng thẻ nào?
| Mục đích | Nên dùng thẻ |
|---|---|
| Tổ chức bố cục | div |
| Làm nổi bật chữ nhỏ trong dòng | span |
| Chia phần rõ ràng (giới thiệu, dịch vụ…) | section |
| Bài viết, nội dung độc lập | article |
Lời kết:
Việc dùng đúng thẻ không chỉ giúp mã HTML dễ hiểu hơn mà còn cải thiện SEO và khả năng tiếp cận (accessibility). Hãy tập dùng section và article thay vì dùng div quá mức.
