Tìm hiểu thẻ SPAN trong HTML

Thẻ span trong HTML có tính chất gần giống với thẻ DIV. Hai thẻ này đều dùng để gom nhóm các phần tử nội tuyến thành một nhóm. Nhưng <span> khác <div> ở điểm nào, nếu bạn đang thắc mắc hãy tiếp tục đọc bài dưới nhé!

Thẻ Span trong HTML Là gì?

Trong HTML, thẻ <span> là một thẻ không có ý nghĩa ngữ nghĩa mà được sử dụng để đánh dấu một phần văn bản hoặc một phần tử nhỏ hơn trong một đoạn văn. Thẻ <span> thường được sử dụng để áp dụng các kiểu định dạng hoặc CSS đặc biệt cho một phần nhỏ của văn bản.

Khi học về HTML căn bản mình không biết khi nào dùng <div> và khi nào dùng <span>. Sau một thời gian tìm hiểu mới biết rằng chúng có cách sử dụng không hề giống nhau.

Thẻ <div>: Đây là thẻ block có nghĩa là thuộc kiểu dạng khối. Nó cũng tương tự như các thẻ <h1>,<h2>,<p>…
Thẻ <span>: Đây là thẻ inline có nghĩa là thuộc kiểu dòng. Dùng để định dạng cho chữ hoặc một đoạn văn bản.

<span> có tính chất trung tính vì thế khi thêm vào sẽ không ảnh hưởng đến hiển thị của phần tử khác. Chỉ khi áp dụng CSS vào thì phần tử đó mới bị thay đổi.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<div class="entry">
<p>Đây là ví dụ về <span style="font-size:20px;font-family:arial;color:red">thẻ span</span></p>

</div>
</body>
</html>

Qua ví dụ trên bạn sẽ thấy thẻ <div> có thể chứa được <span> còn <span> thì không thể chứa được <div>. Nó chỉ dùng để gom nhóm phần tử kiểu inline mà thôi.

Các phần tử inline (Không có sự ngắt dòng mới) như:

<b>, <a>, <strong>, <img>, <input>, <em>, <span> …

Kết luận: Hi vọng với bài viết này bạn đã hiểu được các sử dụng của thẻ <span> trong HTML rồi. Nếu cần sự hỗ trợ hãy comment bên dưới nhé!

Tìm hiểu thêm: Thẻ DIV trong HTML là gì