Define terms with HTML
HTML cung cấp một số cách để truyền đạt ngữ nghĩa mô tả, dù là inline hay dưới dạng bảng chú giải có cấu trúc. Trong bài viết này, chúng ta sẽ đề cập đến cách đánh dấu từ khóa đúng cách khi bạn đang định nghĩa chúng.
| Điều kiện tiên quyết: | Bạn cần quen thuộc với cách tạo một tài liệu HTML cơ bản. |
|---|---|
| Mục tiêu: | Tìm hiểu cách giới thiệu các từ khóa mới và cách xây dựng danh sách mô tả. |
Khi bạn cần một thuật ngữ được định nghĩa, bạn có thể trực tiếp đến một từ điển hay bảng chú giải. Từ điển và bảng chú giải chính thức liên kết các từ khóa với một hoặc nhiều mô tả, như trong trường hợp này:
- Blue (Tính từ)
Có màu như bầu trời trong một ngày nắng đẹp. "Bầu trời xanh trong vắt"
Nhưng chúng ta liên tục định nghĩa các từ khóa một cách không chính thức, như ở đây:
Firefox là trình duyệt web do Mozilla Foundation tạo ra.
Để xử lý các trường hợp sử dụng này, HTML cung cấp thẻ để đánh dấu mô tả và từ được mô tả, để ý nghĩa của bạn được truyền đạt đúng cách đến người đọc.
Cách đánh dấu mô tả không chính thức
Trong sách giáo khoa, lần đầu tiên một từ khóa xuất hiện, thường được in đậm và định nghĩa ngay lập tức.
Chúng ta làm điều đó trong HTML cũng vậy, ngoại trừ HTML không phải là một phương tiện trực quan và vì vậy chúng ta không sử dụng in đậm. Chúng ta sử dụng <dfn>, là một phần tử đặc biệt chỉ dùng để đánh dấu lần xuất hiện đầu tiên của từ khóa. Lưu ý rằng thẻ <dfn> bao quanh từ cần định nghĩa, không phải định nghĩa (định nghĩa bao gồm toàn bộ đoạn văn):
<p><dfn>Firefox</dfn> là trình duyệt web do Mozilla Foundation tạo ra.</p>
Note: Một cách sử dụng khác của in đậm là để nhấn mạnh nội dung. Bản thân in đậm là một khái niệm xa lạ với HTML, nhưng có các thẻ để chỉ ra sự nhấn mạnh.
Trường hợp đặc biệt: Viết tắt
Tốt nhất nên đánh dấu viết tắt một cách đặc biệt bằng <abbr>, để trình đọc màn hình đọc chúng một cách phù hợp và để bạn có thể thao tác trên tất cả các viết tắt một cách đồng nhất. Cũng như bất kỳ từ khóa mới nào, bạn nên định nghĩa viết tắt khi chúng xuất hiện lần đầu tiên.
<p>
<dfn><abbr>HTML</abbr> (hypertext markup language)</dfn>
là ngôn ngữ mô tả được sử dụng để cấu trúc tài liệu trên web.
</p>
Note:
Đặc tả HTML thực sự dành riêng thuộc tính title để mở rộng viết tắt. Tuy nhiên, đây không phải là giải pháp thay thế chấp nhận được để cung cấp mở rộng inline. Nội dung của title hoàn toàn ẩn khỏi người dùng của bạn, trừ khi họ đang sử dụng chuột và tình cờ di chuột qua viết tắt. Đặc tả thừa nhận điều này cũng vậy.
Cải thiện khả năng tiếp cận
<dfn> đánh dấu từ khóa được định nghĩa và chỉ ra rằng đoạn văn hiện tại định nghĩa từ khóa. Nói cách khác, có một mối quan hệ ngầm giữa phần tử <dfn> và container của nó. Nếu bạn muốn một mối quan hệ chính thức hơn, hoặc định nghĩa của bạn chỉ bao gồm một câu thay vì toàn bộ đoạn văn, bạn có thể sử dụng thuộc tính aria-describedby để liên kết chính thức hơn một thuật ngữ với định nghĩa của nó:
<p>
<span id="ff">
<dfn aria-describedby="ff">Firefox</dfn>
là trình duyệt web do Mozilla Foundation tạo ra.
</span>
Bạn có thể tải xuống tại <a href="https://www.mozilla.org">mozilla.org</a>
</p>
Công nghệ hỗ trợ thường có thể sử dụng thuộc tính này để tìm một lựa chọn thay thế văn bản cho một thuật ngữ nhất định. Bạn có thể sử dụng aria-describedby trên bất kỳ thẻ nào bao quanh một từ khóa cần được định nghĩa (không chỉ phần tử <dfn>). aria-describedby tham chiếu đến id của phần tử chứa mô tả.
Cách xây dựng danh sách mô tả
Danh sách mô tả chính là như tên gọi: danh sách các thuật ngữ và mô tả khớp của chúng (ví dụ, danh sách định nghĩa, mục từ điển, FAQ và các cặp khóa-giá trị).
Note: Danh sách mô tả không phù hợp để đánh dấu hội thoại, vì cuộc trò chuyện không trực tiếp mô tả người nói. Đây là các khuyến nghị để đánh dấu hội thoại.
Các thuật ngữ được mô tả nằm bên trong các phần tử <dt>. Mô tả khớp theo ngay sau, chứa trong một hoặc nhiều phần tử <dd>. Bao gồm toàn bộ danh sách mô tả bằng một phần tử <dl>.
Ví dụ đơn giản
Đây là ví dụ mô tả các loại thức ăn và đồ uống:
<dl>
<dt>jambalaya</dt>
<dd>
rice-based entree typically containing chicken, sausage, seafood, and spices
</dd>
<dt>sukiyaki</dt>
<dd>
Japanese specialty consisting of thinly sliced meat, vegetables, and
noodles, cooked in sake and soy sauce
</dd>
<dt>chianti</dt>
<dd>dry Italian red wine originating in Tuscany</dd>
</dl>
Note:
Mẫu cơ bản, như bạn có thể thấy, là xen kẽ các thuật ngữ <dt> với mô tả <dd>. Nếu hai hoặc nhiều thuật ngữ xuất hiện liên tiếp, mô tả sau áp dụng cho tất cả chúng. Nếu hai hoặc nhiều mô tả xuất hiện liên tiếp, tất cả đều áp dụng cho thuật ngữ cuối cùng được đưa ra.
Cải thiện đầu ra trực quan
Đây là cách một trình duyệt đồ họa hiển thị danh sách trên:
Nếu bạn muốn các từ khóa nổi bật hơn, bạn có thể thử in đậm chúng. Hãy nhớ, HTML không phải là phương tiện trực quan; chúng ta cần CSS cho tất cả các hiệu ứng trực quan. Thuộc tính CSS font-weight là những gì bạn cần ở đây:
dt {
font-weight: bold;
}
Điều này tạo ra kết quả dễ đọc hơn một chút dưới đây: