<abbr>: The Abbreviation element

Try it

<p>
  You can use <abbr>CSS</abbr> (Cascading Style Sheets) to style your
  <abbr>HTML</abbr> (HyperText Markup Language). Using style sheets, you can
  keep your <abbr>CSS</abbr> presentation layer and <abbr>HTML</abbr> content
  layer separate. This is called "separation of concerns."
</p>

abbr {
  font-style: italic;
  color: chocolate;
}

Thuộc tính

Phần tử này chỉ hỗ trợ các thuộc tính toàn cục. Thuộc tính title có ý nghĩa ngữ nghĩa cụ thể khi được sử dụng với phần tử <abbr>; nó phải chứa mô tả hoặc phần mở rộng đầy đủ có thể đọc được bởi con người về chữ viết tắt. Văn bản này thường được các trình duyệt hiển thị như tooltip khi con trỏ chuột di chuyển qua phần tử.

Mỗi phần tử <abbr> bạn sử dụng độc lập với tất cả các phần tử khác; cung cấp title cho một phần tử không tự động gắn cùng văn bản mở rộng đó vào các phần tử khác có cùng nội dung văn bản.

Ghi chú sử dụng

Các trường hợp sử dụng điển hình

Không nhất thiết phải đánh dấu tất cả các chữ viết tắt bằng <abbr>. Tuy nhiên, có một vài trường hợp khi nên làm vậy:

• Khi sử dụng chữ viết tắt và bạn muốn cung cấp phần mở rộng hoặc định nghĩa bên ngoài luồng nội dung của tài liệu, sử dụng <abbr> với title phù hợp.
• Để định nghĩa một chữ viết tắt có thể không quen thuộc với người đọc, hãy trình bày thuật ngữ bằng <abbr> và văn bản inline cung cấp định nghĩa. Chỉ bao gồm thuộc tính title khi phần mở rộng hoặc định nghĩa inline không có sẵn.
• Khi sự hiện diện của chữ viết tắt trong văn bản cần được ghi chú về mặt ngữ nghĩa, phần tử <abbr> rất hữu ích. Điều này có thể được sử dụng, lần lượt, cho mục đích tạo kiểu hoặc lập trình.
• Bạn có thể sử dụng <abbr> kết hợp với <dfn> để thiết lập các định nghĩa cho các thuật ngữ là chữ viết tắt hoặc từ viết tắt. Xem ví dụ Định nghĩa một chữ viết tắt dưới đây.

Cân nhắc về ngữ pháp

Trong các ngôn ngữ có số ngữ pháp (tức là các ngôn ngữ nơi số lượng các mục ảnh hưởng đến ngữ pháp của một câu), hãy sử dụng cùng số ngữ pháp trong thuộc tính title của bạn như bên trong phần tử <abbr> của bạn. Điều này đặc biệt quan trọng trong các ngôn ngữ có hơn hai số, chẳng hạn như tiếng Ả Rập, nhưng cũng liên quan đến tiếng Anh.

Kiểu dáng mặc định

Mục đích của phần tử này hoàn toàn là để thuận tiện cho tác giả và tất cả các trình duyệt hiển thị nó inline (display: inline) theo mặc định, mặc dù kiểu dáng mặc định của nó thay đổi từ trình duyệt này sang trình duyệt khác:

Một số trình duyệt thêm gạch chân chấm vào nội dung của phần tử. Các trình duyệt khác thêm gạch chân chấm trong khi chuyển đổi nội dung thành chữ hoa nhỏ. Các trình duyệt khác có thể không tạo kiểu khác so với phần tử <span>. Để kiểm soát kiểu dáng này, sử dụng text-decoration và font-variant.

Khả năng tiếp cận

Đánh vần đầy đủ từ viết tắt hoặc chữ viết tắt lần đầu tiên nó được sử dụng trên một trang có lợi cho việc giúp mọi người hiểu nó, đặc biệt là nếu nội dung là kỹ thuật hoặc thuật ngữ chuyên ngành.

Chỉ bao gồm title nếu không thể mở rộng chữ viết tắt hoặc từ viết tắt trong văn bản. Sự khác biệt giữa từ được thông báo hoặc cụm từ và những gì được hiển thị trên màn hình, đặc biệt nếu đó là thuật ngữ kỹ thuật mà người đọc có thể không quen thuộc, có thể gây khó chịu.

<p>
  JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight
  data-interchange format.
</p>

Điều này đặc biệt hữu ích cho những người không quen thuộc với thuật ngữ hoặc khái niệm được thảo luận trong nội dung, những người mới học ngôn ngữ và những người có mối quan tâm nhận thức.

Ví dụ

Đánh dấu chữ viết tắt về mặt ngữ nghĩa

Để đánh dấu một chữ viết tắt mà không cung cấp phần mở rộng hoặc mô tả, hãy sử dụng <abbr> không có thuộc tính nào, như được thấy trong ví dụ này.

HTML

<p>Using <abbr>HTML</abbr> is fun and easy!</p>

Kết quả

Tạo kiểu cho chữ viết tắt

Bạn có thể sử dụng CSS để đặt một kiểu tùy chỉnh cho các chữ viết tắt, như được thấy trong ví dụ cơ bản này.

HTML

<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>

CSS

abbr {
  font-variant: all-small-caps;
}

Kết quả

Cung cấp phần mở rộng

Thêm thuộc tính title cho phép bạn cung cấp phần mở rộng hoặc định nghĩa cho chữ viết tắt hoặc từ viết tắt.

HTML

<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big time.</p>

Kết quả

Định nghĩa một chữ viết tắt

Bạn có thể sử dụng <abbr> kết hợp với <dfn> để định nghĩa chính thức hơn một chữ viết tắt, như được hiển thị ở đây.

HTML

<p>
  <dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> </dfn> is a
  markup language used to create the semantics and structure of a web page.
</p>

<p>
  A <dfn id="spec">Specification</dfn> (<abbr>spec</abbr>) is a document that
  outlines in detail how a technology or API is intended to function and how it
  is accessed.
</p>

Kết quả

Tóm tắt kỹ thuật

Thông số kỹ thuật

Khả năng tương thích trình duyệt

Xem thêm

• Sử dụng phần tử <abbr>