💡 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: 31 tháng 5 năm 2026
Trang trí bằng thẻ span | Hướng dẫn và bài tập
📌
Kết luận
<span> là "điểm đánh dấu" để trang trí một phần văn bản
<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 |
<div> là chiếc "hộp", còn <span> là chiếc "bút đánh dấu".
Kết hợp với CSS
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>Tổng kết
-<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ử trong phần bài tập
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).