Thẻ <div> và <span> trong HTML

• Thẻ <div>
• Thẻ <span>

HTML có hai phần tử sử dụng với mục đích tổng quát (nó không như thẻ khác - hàm ý nội dung và cấu trúc trong nó như a thì chứa liên kết, table chứa nội dung về bảng biểu, ul tạo danh sách ...), một phần tử dạng block là <div> và một ở dạng inline là <span>, hai loại thẻ này dùng rất nhiều để tạo ra cấu trúc trang HTML hiện đại.

Thẻ <div>

Thẻ <div> (viết tắt của division - chia) là phần tử cấp độ block dùng để phân nội dung thành các phân đoạn, chứa các phần tử HTML khác. Thẻ <div> thường dùng CSS để thiết lập các đặc tính của nó (thông qua thiết lập class và id).

<style>
    .divparent {background: #0b5088; padding: 5px;}
    .div1 {height: 70px; background: green;}
    .div2 {height: 70px; background: yellowgreen; margin-top: 5px}
</style>

<div class="divparent">
    <div class="div1">
        <p>Nội dung trong thẻ div 1</p>
    </div>
    <div class="div2">
        <p>Nội dung trong thẻ div 2</p>
    </div>
</div>

Thẻ <span>

Thẻ <span> thì lại là loại thẻ cấp độ inline với mục đích dùng tổng quát, thường nó được dùng để chứa dữ liệu (văn bản), chứa phần tử inline khác. Tương tự div, span cũng thường dùng CSS để định dạng trình bày:

<h4>Học <span style="color:red">HTML</span> cơ bản</h4>

Kết quả:

Học HTML cơ bản

Tóm lại:
Thẻ <div> dùng để tạo khối block, phân chia nội dung trong HTML. Thẻ <span> tạo các phần tử dạng inline, phần văn bản dạng inline không ngắt dòng.