Rate this post

Thẻ <span> trong HTML là một thẻ inline (thẻ nằm trong dòng) dùng để bao quanh và nhóm các phần tử văn bản hoặc các phần tử khác. Nó không tạo ra bất kỳ khoảng trống hoặc xuống dòng mới như thẻ <div> hoặc <p>.

các bài viết liên quan

Ví dụ:

<p>This is a <span>sample</span> text.</p>

Trong ví dụ trên, từ “sample” được bao quanh bởi thẻ <span> để nhóm nó lại với các phần tử khác trong đoạn văn bản.

Thẻ span có thể sử dụng với các thuộc tính css để tùy chỉnh hiển thị của phần tử bên trong nó, ví dụ như thay đổi màu chữ, font-size, hoặc thêm background.

Ví dụ:

<p>This is a <span style="color:red">important</span> text.</p>

Trong ví dụ trên, từ “important” sẽ hiển thị màu đỏ do thuộc tính “color” trong thẻ span.

Thẻ span cũng có thể sử dụng với các thuộc tính class hoặc id để tùy chỉnh hiển thị trong các file css.

Ví dụ:

<p>This is a <span class="highlight">highlighted</span> text.</p>

Trong ví dụ trên, từ “highlighted” sẽ được tùy chỉnh hiển thị trong file css sử dụng class “highlight”

Thẻ span là một công cụ hữu ích để tùy chỉnh và nhóm các phần tử văn bản trong trang web của bạn, nhưng nó cần sử dụng cùng với các thuộc tính css để tùy chỉnh hiển thị và giao diện.

các thuộc tính của thẻ span trong html

Thẻ <span> trong HTML có một số thuộc tính chính sau:

  1. class: cho phép gán một hoặc nhiều class cho thẻ <span> để tùy chỉnh hiển thị bằng CSS.
  2. id: cho phép gán một id duy nhất cho thẻ <span> để tùy chỉnh hiển thị bằng CSS hoặc JavaScript.
  3. style: cho phép gán một hoặc nhiều thuộc tính CSS trực tiếp cho thẻ <span>.
  4. title: cho phép gán một chuỗi văn bản cho thuộc tính title của thẻ <span> để hiển thị như là một chú thích khi người dùng di chuột vào thẻ <span>.
  5. role: cho phép gán một vai trò cho thẻ <span> để cung cấp thông tin cho các thiết bị đọc màn hình hoặc các công cụ trợ giúp khác.
  6. aria-*: cho phép gán các thuộc tính ARIA (Accessible Rich Internet Applications) để cung cấp thông tin khả dụng cho người dùng có thiểu khả năng hoặc để cung cấp thông tin bổ sung cho các thiết bị đọc màn hình.

Lưu ý rằng các thuộc tính này có thể sử dụng cho các thẻ HTML khác nhau và có thể sử dụng kết hợp với nhau để tùy chỉnh hiển thị và tác động của thẻ.

một số ví dụ thẻ span trong html

Đây là một số ví dụ về cách sử dụng thẻ <span> trong HTML:

  1. Sử dụng thuộc tính class để tùy chỉnh hiển thị bằng CSS:
<p>This is a <span class="highlight">highlighted</span> text.</p>

Trong ví dụ trên, từ “highlighted” sẽ được tùy chỉnh hiển thị bằng CSS sử dụng class “highlight”.

  1. Sử dụng thuộc tính id để tùy chỉnh hiển thị bằng CSS hoặc JavaScript:
<p>This is a <span id="special">special</span> text.</p>

Trong ví dụ trên, từ “special” sẽ được tùy chỉnh hiển thị bằng CSS hoặc JavaScript sử dụng id “special”.

  1. Sử dụng thuộc tính style để tùy chỉnh hiển thị trực tiếp:
<p>This is a <span style="color:red">important</span> text.</p>

Trong ví dụ trên, từ “important” sẽ hiển thị màu đỏ do thuộc tính “color:red” trong thuộc tính style của thẻ span.

  1. Sử dụng thuộc tính title để hiển thị chú thích khi di chuột vào thẻ:
<p>This is a <span title="This text is important">important</span> text.</p>

Trong ví dụ trên, khi di chuột vào từ “important” sẽ hiển thị chú thích “This text is important”

  1. Sử dụng thuộc tính role để cung cấp thông tin cho các thiết bị đọc màn hình:
<p>This is a <span role="alert">alert</span> text.</p>

Trong ví dụ trên, thẻ span sẽ cung cấp thông tin rằng phần tử trong thẻ span là một “alert” cho các thiết bị đọc màn hình

Các ví dụ trên chỉ là một số cách sử dụng thẻ span trong HTML, tuy nhiên bạn có thể sử dụng thẻ này để tùy chỉnh và nhóm các phần tử văn bản hoặc các phần tử khác trong trang web của mình.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now