HTML - Trích dẫn: Thêm Sâu và Tin cậy cho Nội dung Web của Bạn

Xin chào các bạn đang học phát triển web! Hôm nay, chúng ta sẽ cùng khám phá thế giới của HTML trích dẫn. Như một người giáo viên máy tính gần gũi, tôi rất vui được hướng dẫn các bạn trong hành trình này. Tin tôi đi, vào cuối bài học này, bạn sẽ biết trích dẫn như Shakespeare trong HTML! ?

Danh sách Thẻ Trích dẫn HTML

Trước khi bắt đầu, hãy cùng nhanh chóng xem qua tất cả các thẻ liên quan đến trích dẫn mà chúng ta sẽ thảo luận hôm nay:

Thẻ	Mô tả
<q>	Dành cho trích dẫn ngắn, trong dòng
<blockquote>	Dành cho trích dẫn dài, mức block
<cite>	Để chỉ định nguồn của một trích dẫn
<address>	Dành cho thông tin liên hệ
<bdo>	Để thay đổi hướng văn bản
<abbr>	Dành cho viết tắt hoặc từ viết tắt

Bây giờ, hãy cùng khám phá chi tiết từng thẻ này!

HTML "" cho Trích dẫn

Thẻ <q> hoàn hảo cho các trích dẫn ngắn, trong dòng. Nó giống như cây kéo đa năng của các thẻ trích dẫn - nhỏ gọn nhưng vô cùng hữu ích!

<p> Như Shakespeare曾经说过, <q> To be or not to be, that is the question. </q></p>

Khi hiển thị trong trình duyệt, điều này sẽ xuất hiện như sau:

Như Shakespeare曾经说过, "To be or not to be, that is the question."

Chú ý rằng trình duyệt tự động thêm dấu trích dẫn xung quanh văn bản trong thẻ <q>. Đó như có một editor nhỏ bé, chăm chỉ làm việc sau hậu trường!

HTML "

" cho Trích dẫn

Vậy nếu bạn muốn trích dẫn một đoạn văn hoàn chỉnh? Đó là lúc bạn cần đến người bạn <blockquote>. Nó là anh em lớn của <q>, thiết kế cho các trích dẫn dài.

<blockquote>
<p>Two roads diverged in a wood, and I—
I took the one less traveled by,
And that has made all the difference.</p>
</blockquote>

Điều này sẽ hiển thị như một khối văn bản thụt vào, hoàn hảo để làm nổi bật các trích dẫn dài:

Two roads diverged in a wood, and I— I took the one less traveled by, And that has made all the difference.

Mẹo chuyên nghiệp: <blockquote> rất tốt cho các lời chứng thực trên website. Nó làm cho trích dẫn nổi bật và có thêm trọng lượng!

HTML "" cho Trích dẫn

Bây giờ chúng ta đã trích dẫn ai đó, có lẽ nên công nhận họ, phải không? Đó là lúc thẻ <cite> được sử dụng. Nó được sử dụng để tham chiếu nguồn của một trích dẫn.

<blockquote>
<p>The only way to do great work is to love what you do.</p>
<cite>Steve Jobs</cite>
</blockquote>

Điều này sẽ hiển thị như sau:

The only way to do great work is to love what you do.

— Steve Jobs

Thẻ <cite> thường được hiển thị in nghiêng theo mặc định, cho nó một的外观 riêng biệt.

HTML "

" cho Trích dẫn

Mặc dù có tên là <address>, thẻ này không chỉ dành cho địa chỉ đường phố. Nó được sử dụng cho bất kỳ loại thông tin liên hệ nào cho tác giả của tài liệu hoặc bài viết.

<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

Điều này sẽ hiển thị như sau:

Written by John Doe. Visit us at: Example.com Box 564, Disneyland USA

Lưu ý, <address> thường được hiển thị in nghiêng và các trình duyệt sẽ thêm một dòng trống trước và sau phần tử này.

HTML "" cho Trích dẫn

Bạn có bao giờ muốn viết ngược không? Thẻ <bdo> (Bi-Directional Override) là vé của bạn để điều chỉnh hướng văn bản!

<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>

Điều này sẽ hiển thị như sau:

This text will go left to right.

.tfel ot thgir og lliw txet sihT

Thuộc tính dir có thể được đặt thành "ltr" (trái sang phải) hoặc "rtl" (phải sang trái). Nó rất hữu ích cho các ngôn ngữ viết từ phải sang trái, như阿拉伯语 hoặc Hebrew.

HTML "" cho Trích dẫn

Cuối cùng nhưng không kém phần quan trọng, chúng ta có thẻ <abbr>. Nó được sử dụng để đại diện cho một viết tắt hoặc từ viết tắt.

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

Điều này sẽ xuất hiện như sau:

The WHO was founded in 1948.

Nhưng phần hay nhất là: khi bạn di chuột qua "WHO", bạn sẽ thấy tiêu đề đầy đủ "World Health Organization". Đó như có một vòng解码器 cho trang web của bạn!

Và thế là xong, các bạn! Bây giờ bạn đã được trang bị một bộ công cụ các thẻ trích dẫn HTML. Nhớ rằng, các thẻ này không chỉ về định dạng - chúng thêm ý nghĩa và cấu trúc cho nội dung của bạn, làm cho nó dễ tiếp cận hơn và thân thiện với SEO.

Khi chúng ta kết thúc, tôi nhớ lại một câu trích dẫn (thấy gì đó?) từ một học sinh từng nói với tôi, "HTML như LEGO cho người lớn!" Và bạn biết đấy? Họ đã đúng. Mỗi thẻ như một mảnh LEGO khác nhau, và bạn là người thợ xây dựng tạo ra các cấu trúc web tuyệt vời.

Vậy hãy điềm tĩnh và trích dẫn, trích dẫn và viết tắt theo ý muốn của bạn. Và nhớ rằng, trong những lời vĩnh cửu của một nhà phát triển web thông thái: With great HTML power comes great responsibility! Chúc các bạn may mắn trong việc mã hóa! ?

Credits: Image by storyset