💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!

Cập nhật: 2025年3月1日

Trang trí bằng thẻ span

📌

Kết luận

<span> là "điểm đánh dấu" để trang trí một phần văn bản

Khi bạn muốn đổi màu hoặc đổi font chữ cho chỉ một phần nhỏ trong câu văn, hãy dùng thẻ <span>.

📝 Mã thực tế tại đây

<p>Đây là một đoạn <span style="color: red;">chữ màu đỏ</span>.</p>

Sự khác biệt giữa span và div

Hai thẻ này thường xuyên được so sánh với nhau.

Thẻ	Loại phần tử	Hiển thị	Cách dùng
`<div>`	Khối (Block)	Tự động xuống dòng trước và sau	Gom nhóm, tạo bố cục
`<span>`	Nội dòng (Inline)	Nằm gọn trong cùng một dòng	Trang trí một phần văn bản

Hãy nhớ: <div> là chiếc "hộp", còn <span> là chiếc "bút đánh dấu".

Bản thân thẻ <span> không làm thay đổi vẻ ngoài của văn bản. Nó chỉ thực sự có tác dụng khi kết hợp với CSS.

📝 Mã thực tế tại đây

<p>Đây là <span class="highlight">điểm nhấn</span>.</p>

Trong thực tế, chúng ta sẽ dùng class thay vì thuộc tính style, nhưng nguyên lý hoạt động là hoàn toàn giống nhau.

- <span> là phần tử nội dòng dùng để trang trí văn bản - <div> dùng cho khối, <span> dùng cho dòng - Thường được sử dụng kết hợp với CSS

Hãy thử bao quanh cụm từ "Chữ màu đỏ" bằng thẻ span nhé.

🧪 Thử nghiệm tại đây

Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.

■ Bài tập thực hành

Hãy bao quanh cụm từ 'Chữ màu đỏ' bằng thẻ span.

Gợi ý khi gặp khó khăn

span là một phần tử nội dòng (inline element).