Tìm hiểu cách sử dụng phần tử HTML <span>.
Phần tử HTML <span> là một phần tử chứa dòng (inline container) chung, dùng để đánh dấu văn bản. Nó thường được dùng bên trong một phần tử khác.
<span> thường được dùng để làm cho một phần của văn bản trông khác biệt so với phần còn lại.
Ví dụ:
<p>Mũ của tôi là <span style="color:red">màu đỏ.</span></p>Bạn cũng có thể dùng <span> để nhóm các phần tử chia sẻ cùng các giá trị thuộc tính định kiểu thông qua một class.
Ví dụ, giả sử bạn đang viết công thức nấu ăn, và muốn nhấn mạnh mọi từ trong khối văn bản là tên nguyên liệu, với một màu cụ thể:
<p> Để làm phần bơ tỏi ngon của tôi, bạn chỉ cần bốn nguyên liệu, <span class="ingredient">bơ</span>, <span class="ingredient">tỏi</span>, <span class="ingredient">muối</span> và <span class="ingredient">tiêu đen.</span> </p>Bạn có thể tạo lớp CSS như sau:
.ingredient { color: green; }Điều thông minh khi sử dụng một lớp có thể tái sử dụng là nếu bạn sau này thay đổi ý định về cách hiển thị các từ nguyên liệu, bạn chỉ cần thay đổi kiểu một lần trong lớp .ingredient, và hiệu ứng sẽ áp dụng cho mọi phần tử <span> sử dụng lớp này.
Ví dụ, giả sử bạn muốn dùng chữ in đậm thay vì màu để nhấn mạnh nguyên liệu:
.ingredient { font-weight: bold; }Tính chất chung của phần tử <span> khiến nó trở thành một phần tử phi ngữ nghĩa. Do đó, phần tử này chỉ nên được dùng khi không có phần tử nào khác phù hợp hơn.
Phần tử <span> tương tự như phần tử <div>, nhưng khác biệt chính là mặc định <span> là phần tử dòng (inline), trong khi <div> là phần tử cấp khối (block-level). Bạn có thể ghi đè kiểu mặc định của các phần tử bằng CSS.