Trong HTML, thẻ <div> và thẻ <span> đều là các phần tử không có nghĩa ngữ nghĩa (non-semantic elements), nhưng chúng được sử dụng trong các ngữ cảnh khác nhau. Bài viết này sẽ giải thích chi tiết về sự khác biệt giữa chúng, cách sử dụng, cũng như các ví dụ minh họa.
<div>:
<span>:
<div>:
<h1>, <p>, <ul>, hoặc thậm chí các thẻ <div> khác.<span>:
<a>, hoặc thẻ <strong>.Sử dụng thẻ <div>:
<div style="background-color: lightblue; padding: 10px;">
<h2>Tiêu đề</h2>
<p>Đây là một đoạn văn bản nằm trong thẻ div.</p>
</div><div> sẽ tạo ra một khối riêng biệt với tiêu đề và đoạn văn nằm trong đó.Sử dụng thẻ <span>:
<p>Đây là một đoạn văn bản có <span style="color: red;">màu đỏ</span> bên trong.</p><span> chỉ thay đổi màu của một phần của đoạn văn mà không tạo ra một dòng mới.<div> khi bạn cần:
<span> khi bạn cần:
Tóm lại, thẻ <div> và <span> có những chức năng và cách sử dụng khác nhau trong HTML. Việc hiểu rõ sự khác biệt giữa chúng sẽ giúp bạn tổ chức và cấu trúc mã HTML một cách hợp lý hơn, từ đó tạo ra các trang web rõ ràng và dễ hiểu. Khi bạn cần tạo các khối cấu trúc lớn hoặc phân vùng cho nội dung, hãy chọn <div>. Ngược lại, khi bạn chỉ cần điều chỉnh hoặc nhóm một phần nhỏ của nội dung, hãy sử dụng <span>.
