Categories HTML

Thẻ dfn trong HTML

Ví dụ

Dùng để đánh dấu định nghĩa cho một thuật ngữ:

<p><dfn>HTML</dfn> là ngôn ngữ đánh dấu tiêu chuẩn để tạo ra các trang web.</p>

Kết quả:

HTML là ngôn ngữ đánh dấu tiêu chuẩn để tạo ra các trang web.


Định nghĩa và cách dùng

Thẻ <dfn> dùng để định nghĩa một thuật ngữ trong HTML.

Thẻ này thường được dùng cho thuật ngữ xuất hiện lần đầu trong tài liệu.

Thẻ cha gần nhất (tức thẻ bao ngoài gần nhất) của thẻ <dfn> phải chứa định nghĩa / giải thích về thuật ngữ bên trong thẻ<dfn>.

Các thuật ngữ bên trong thẻ <dfn> có thể có các trường hợp sau đây:


1. Nội dung của phần tử <dfn> (không có thuộc tính title)

Ví dụ:

<p><dfn>HTML</dfn> là ngôn ngữ đánh dấu tiêu chuẩn để tạo ra các trang web.</p>

2. Thuộc tính title của thẻ<dfn>

Ví dụ:

<p><dfn title="HyperText Markup Language">HTML</dfn> là ngôn ngữ đánh dấu tiêu chuẩn để tạo ra các trang web.</p>

Kết quả (bạn dùng chuột hover vào chữ HTML sẽ thấy khác biệt):

HTML là ngôn ngữ đánh dấu tiêu chuẩn để tạo ra các trang web.


3. Thuộc tính title của thẻ <abbr> bên trong thẻ <dfn>:

Ví dụ:

<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> là ngôn ngữ đánh dấu tiêu chuẩn để tạo ra các trang web.</p>

Kết quả (bạn dùng chuột hover vào chữ HTML sẽ thấy khác biệt):

HTML là ngôn ngữ đánh dấu tiêu chuẩn để tạo ra các trang web.

Bạn cũng có thể thêm thuộc tính id vào phần tử <dfn>. Sau đó, bất cứ khi nào thuật ngữ được sử dụng, người dùng có thể tìm lại định nghĩa bằng cách nhấn vào thẻ <a>

Ví dụ:

<p><dfn id="html-def">HTML</dfn> là ngôn ngữ đánh dấu tiêu chuẩn để tạo ra các trang web.</p>

<p>Đây là văn bản text..</p>
<p>Đây là văn bản text…</p>
<p>Học <a href="#html-def">HTML</a> ngay.</p>

Kết quả:

HTML là ngôn ngữ đánh dấu tiêu chuẩn để tạo ra các trang web.

Đây là văn bản text..

Đây là văn bản text…

Học HTML ngay.


Trình duyệt hỗ trợ

Thẻ  Chrome  IE  FireFox  Safari  Opera
<dfn>

Thiết lập CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị phần tử <dfn> với các giá trị sau:

Ví dụ

dfn {
font-style: italic;
}
Back to Top