Thẻ HTML <span> cho phép bạn áp dụng kiểu dáng cho một phần của trang web hoặc một đoạn văn. Nó thường được dùng để tạo kiểu cho văn bản trong đoạn văn, chẳng hạn như thay đổi màu của một từ. Thẻ <span> mặc định không có kiểu dáng nào.
Khi bạn lập trình bằng HTML, bạn có thể quyết định muốn tạo kiểu cho một thứ cụ thể trên trang web. Ví dụ, bạn có thể muốn nhấn mạnh một từ cụ thể trong câu hoặc một liên kết cụ thể trong danh sách liên kết.
Đó là nơi thẻ HTML <span> xuất hiện. <span> là một bộ chứa nội tuyến (inline container) chung chung cho phép bạn cụm từ nội dung trên tài liệu web. Thẻ <span> thường được dùng cho mục đích tạo kiểu—đặc biệt là tạo kiểu cho văn bản.
Hướng dẫn này sẽ thảo luận, kèm ví dụ, cách sử dụng HTML <span> để tạo kiểu cho các phần tử trên trang web. Sau khi đọc xong hướng dẫn này, bạn sẽ thành chuyên gia trong việc sử dụng thẻ HTML <span>.
Thẻ HTML <span>
Thẻ HTML <span> thao tác một phần của trang web. Nó thường được dùng bên trong phần tử <p> để áp dụng kiểu dáng cho một phần cụ thể của đoạn văn. Ví dụ, bạn có thể dùng <span> để thay đổi màu của một từ trong đoạn văn.
Đơn lẻ, thẻ <span> không có hiển thị mặc định hay giá trị nào. Điều này nghĩa là nếu bạn dùng thẻ không có bất kỳ thuộc tính nào, nó sẽ không có tác động đến cách trang web được hiển thị.
Thẻ <span> thường được dùng kết hợp với CSS để áp dụng kiểu dáng nhất định cho một phần tử hoặc các phần tử cụ thể trên trang web. <span> giúp bạn dễ dàng áp dụng kiểu dáng nhất định cho nhiều phần tử trên trang web cùng một lúc.
Cú pháp HTML <span>
Thẻ HTML Span có cả phần tử mở (<span>) và phần tử đóng (</span>). Chúng ta có thể sử dụng cú pháp sau để dùng thẻ <span>:
<span></span>
Thẻ HTML <span> không có thuộc tính dành riêng cho thẻ. Ví dụ, thẻ <img> có "height" và "width" là thuộc tính dành riêng. <span> không có loại thuộc tính này vì nó dựa vào CSS để tạo kiểu. Thẻ <span> hỗ trợ tất cả các thuộc tính HTML toàn cục (global attributes).
Bạn có thể nghĩ về thẻ <span> tương tự như <div> vì <span> không có bất kỳ kiểu dáng cụ thể nào. Nhưng, thẻ <div> được dùng để định nghĩa các phần và khối của văn bản vì <div> là phần tử khối (block element). <span> được dùng để áp dụng kiểu dáng cho các phần cụ thể của tài liệu, như một đoạn văn.
Trong phần tiếp theo, chúng ta sẽ đi qua một vài ví dụ minh họa cách thẻ <span> hoạt động trong HTML.
Ví dụ thẻ <span> HTML
Hãy cùng xem một vài ví dụ mã sử dụng thẻ <span> để tạo kiểu cho các phần tử nội tuyến trong HTML. Ví dụ đầu tiên sẽ dùng thẻ <span> trong đoạn văn; ví dụ thứ hai sẽ dùng nó trong danh sách.
<span> HTML trong đoạn văn
Giả sử chúng ta đang thiết kế trang web cho một tiệm bánh địa phương—Pringle and Sons Bakery. Trang web này sẽ phác thảo lịch sử của tiệm bánh. Chủ tiệm, ông Pringle, yêu cầu chúng ta nhấn mạnh một số sự kiện quan trọng bằng văn bản màu đỏ.
Chúng ta có thể sử dụng mã sau để hoàn thành nhiệm vụ:
index.html
<p>Pringle and Sons Bakery là điểm đến không thể thiếu của cộng đồng Oakbridge, Indiana. Tiệm bánh, được thành lập bởi James Pringle vào năm 1975, phục vụ <span class="redText">các sản phẩm nướng ngon miệng</span> và cà phê cho khu vực Oakbridge. Nó đã phục vụ <span class="redText">hàng ngàn</span> khách hàng kể từ khi thành lập.</p>
styles.css
.redText { color: red; }
Mã của chúng ta trả về:
Trong ví dụ, chúng ta nhấn mạnh các thuật ngữ "các sản phẩm nướng ngon miệng" và "hàng ngàn". Ông Pringle nói rằng các thuật ngữ này quan trọng, nên chúng ta chỉ đạo chương trình hiển thị chúng bằng màu đỏ.
Chúng ta định nghĩa một chuỗi văn bản được bao quanh bởi thẻ <p> HTML. Văn bản này phác thảo lịch sử của Pringle and Sons Bakery. Sau đó, chúng ta bao quanh các thuật ngữ muốn xuất hiện màu đỏ trong thẻ <span>.
Trong tệp CSS, chúng ta chỉ định rằng màu của bất kỳ phần tử nào được gán lớp redText nên là đỏ. Điều này cho phép chúng ta thay đổi màu văn bản thành đỏ khi sử dụng thẻ <span class="redText">.
Thẻ <span> hữu ích trong trường hợp này vì chúng ta chỉ muốn nhấn mạnh các từ cụ thể trong văn bản. Chúng ta có thể áp dụng kiểu dáng chữ đỏ cho chính thẻ <p>. Nhưng, điều đó sẽ dẫn đến cả đoạn văn màu đỏ.
<span> HTML trong danh sách
Giả sử Pringle and Sons Bakery yêu cầu chúng ta thêm danh sách vào trang web với liên kết đến các trang mạng xã hội của họ.
Tiệm bánh lưu ý rằng liên kết đến trang Twitter và Facebook của họ đặc biệt quan trọng vì nhóm hoạt động sôi nổi nhất trên các nền tảng đó. Vì vậy, họ muốn chúng ta làm nổi bật các liên kết đó bằng văn bản màu xanh nhạt.
Chúng ta có thể sử dụng mã sau:
index.html
<ul>
<li><span class="blue"><a href="twitter.com">Twitter</a></span></li>
<li><span class="blue"><a href="facebook.com">Facebook</a></span></li>
<li><a href="instagram.com">Instagram</a></li>
</ul>
styles.css
.blue { background: lightblue; }
Mã của chúng ta trả về:
Trong mã HTML, chúng ta tạo danh sách không thứ tự bằng thẻ <ul>. Danh sách này có ba mục, mỗi mục được chứa trong thẻ <li>.
Các mục danh sách cho Twitter và Facebook được bao quanh bởi thẻ HTML Span (<span class="blue"> và </span>). Thẻ span mở cho mỗi mục danh sách chỉ định thuộc tính class. Giá trị của thuộc tính class là "blue".
Chúng ta định nghĩa kiểu .blue thay đổi màu nền của bất kỳ phần tử nào được áp dụng thành xanh nhạt. Điều này khiến màu nền của tất cả liên kết với lớp CSS .blue trong mã HTML thay đổi thành xanh nhạt.
Màu nền liên quan đến liên kết Instagram không thay đổi vì chúng ta không bao quanh văn bản cho liên kết đó trong thẻ <span>.
Kết luận
Thẻ HTML <span> là một bộ chứa chung dùng để áp dụng kiểu dáng cho các phần tử cụ thể trên trang HTML. Mặc định, thẻ <span> không làm gì, nhưng nó có thể dùng kết hợp với CSS để áp dụng kiểu dáng cho các phần tử.
Là một thách thức, hãy định nghĩa thẻ <span> làm cho một từ trong câu xuất hiện bằng chữ HOA. Bạn sẽ cần dùng quy tắc CSS để chuyển văn bản thành chữ hoa với thẻ <span>.
Hướng dẫn này đã thảo luận, kèm ví dụ, cách sử dụng thẻ HTML <span> trong mã của bạn. Bây giờ bạn đã sẵn sàng bắt đầu sử dụng thẻ <span> như một nhà phát triển web chuyên nghiệp!
Để được hướng dẫn và hỗ trợ về cách học HTML, hãy đọc hướng dẫn đầy đủ Cách học HTML.