Thẻ span trong HTML

• Trần Thị Vân
• 1796
• 08/07/2025

Chức năng của Thẻ span trong HTML

Thẻ span trong HTML dùng để chứa một đoạn câu chữ, sau đó dùng css để định dạng những câu chữ mà thẻ span đã chứa.

Cú pháp của Thẻ span trong HTML

<span>vanban</span>

vanban: Văn bản.

Ví dụ thực tế về Thẻ span trong HTML

<style>
p span.maudo{color:red}
p span.indam{font-weight:bold}
</style>
<p>Định dạng chữ màu <span style="color:red">đỏ</span></p>
<p>Định dạng chữ màu <span class="maudo">đỏ</span></p>
<p>Định dạng chữ màu <span class="maudo">đỏ</span></p>
<p>Định dạng chữ <span class="indam">in đậm</span></p>

Bạn có thể css trực tiếp vào thẻ span hoặc đặt class, id để css.

Chạy Thử

Các lỗi thường gặp khi sử dụng thẻ span

Dùng span thay cho các thẻ mang ý nghĩa ngữ nghĩa

Thẻ span chỉ là một phần tử nội tuyến dùng để nhóm hoặc đánh dấu một đoạn nội dung nhỏ. Vì không mang ý nghĩa ngữ nghĩa nên không nên sử dụng để thay thế các phần tử thể hiện cấu trúc hoặc chức năng của nội dung. Việc lạm dụng sẽ khiến mã HTML khó hiểu, giảm khả năng hỗ trợ của công cụ tìm kiếm cũng như các công nghệ hỗ trợ người dùng.

Hãy ưu tiên sử dụng đúng phần tử theo mục đích. Chỉ dùng span khi cần áp dụng CSS, JavaScript hoặc đánh dấu một đoạn văn bản mà không có phần tử phù hợp hơn.

Lạm dụng span khiến cấu trúc HTML rối và khó bảo trì

Nhiều người có thói quen bọc gần như mọi nội dung bằng span dù không phục vụ bất kỳ mục đích nào. Điều này làm số lượng phần tử trong tài liệu tăng lên, khiến mã nguồn dài hơn, khó đọc và khó chỉnh sửa khi dự án phát triển.

Chỉ thêm span khi thực sự cần định dạng, gắn sự kiện hoặc đánh dấu một phần nội dung riêng biệt. Nếu không có mục đích rõ ràng, hãy để HTML đơn giản nhất có thể.

Quên gán class hoặc id khi cần định dạng bằng CSS

Nếu có nhiều thẻ span trên cùng một trang nhưng không gán class hoặc id, việc áp dụng CSS hoặc thao tác bằng JavaScript sẽ trở nên khó khăn. Điều này khiến mã nguồn thiếu tính tổ chức và dễ phát sinh lỗi khi bảo trì.

Hãy đặt tên class hoặc id rõ ràng, phản ánh đúng chức năng của nội dung để việc quản lý mã nguồn thuận tiện hơn.

<span class="price">299.000đ</span>

Sử dụng span cho nội dung dạng khối

span là phần tử nội tuyến nên không phù hợp để chứa các khối nội dung lớn hoặc nhiều phần tử khác. Nếu cố gắng sử dụng trong những trường hợp này, bố cục có thể hiển thị không như mong muốn hoặc phải can thiệp CSS không cần thiết.

Khi cần tạo một khu vực độc lập hoặc nhóm nhiều phần tử, nên lựa chọn phần tử dạng khối phù hợp thay vì cố gắng sử dụng span.

Lồng quá nhiều thẻ span không cần thiết

Việc lồng nhiều lớp span chỉ để tạo hiệu ứng đơn giản sẽ làm cấu trúc HTML trở nên phức tạp. Mỗi lớp dư thừa đều khiến mã nguồn khó đọc, khó bảo trì và tăng thời gian chỉnh sửa về sau.

Nên kết hợp CSS hiệu quả để giảm số lượng phần tử không cần thiết. Một cấu trúc HTML gọn gàng luôn dễ mở rộng, tối ưu hiệu suất và giúp người khác hiểu mã nguồn nhanh hơn.

<span class="product">
    <span class="name">Tai nghe Bluetooth</span>
</span>

Trong ví dụ trên, nếu không có mục đích riêng cho từng lớp span, bạn nên rút gọn cấu trúc để mã nguồn ngắn gọn và dễ quản lý hơn.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ span trong HTML.