Nếu bạn đã từng xem danh sách các phần tử HTML, bạn có thể thấy mình hỏi "blockquote là gì?" Phần tử blockquote là một cặp thẻ HTML được sử dụng để định nghĩa các trích dẫn dài. Đây là định nghĩa của phần tử này theo đặc tả HTML5 của W3C:
Phần tử blockquote đại diện cho một phần được trích dẫn từ một nguồn khác.
Cách sử dụng Blockquote trên trang web của bạn
Khi bạn đang viết văn bản trong một trang web và tạo bố cục của trang đó, đôi khi bạn muốn gọi ra một khối văn bản làm báo giá.
Đây có thể là một trích dẫn từ một nơi khác, như lời chứng thực của khách hàng đi kèm với một nghiên cứu tình huống hoặc câu chuyện thành công của dự án. Điều này cũng có thể là một điều trị thiết kế lặp lại một số văn bản quan trọng từ bài viết hoặc nội dung của chính nó. Trong xuất bản, điều này đôi khi được gọi là một báo giá kéo , Trong thiết kế web, một trong những cách để đạt được điều này (và cách mà chúng ta đang đề cập trong bài viết này) được gọi là một blockquote.
Vì vậy, hãy xem cách bạn sẽ sử dụng thẻ blockquote để định nghĩa các trích dẫn dài, chẳng hạn như trích đoạn này từ “The Jabberwocky” của Lewis Carroll:
'Twas brillig và toith slithey
Gyre và gimble trong wabe:
Tất cả đều là borogoves,
Và mome raths outgrabe.
(bởi Lewis Carroll)
Ví dụ về sử dụng thẻ Blockquote
Thẻ blockquote là một thẻ ngữ nghĩa cho trình duyệt hoặc tác nhân người dùng biết rằng nội dung là một báo giá dài. Như vậy, bạn không nên kèm theo văn bản không phải là trích dẫn bên trong thẻ blockquote. Hãy nhớ rằng, "trích dẫn" thường là những từ thực tế mà ai đó đã nói hoặc văn bản từ một nguồn bên ngoài (như văn bản Lewis Carroll trong bài viết này), nhưng nó cũng có thể là khái niệm pullquote mà chúng tôi đã đề cập trước đây.
Khi bạn nghĩ về nó, pullquote đó là một trích dẫn của văn bản, nó chỉ xảy ra từ cùng một bài báo mà chính nó xuất hiện.
Hầu hết các trình duyệt web thêm một số thụt đầu dòng (khoảng 5 khoảng trắng) cho cả hai mặt của một blockquote để làm cho nó nổi bật so với văn bản xung quanh. Một số trình duyệt cực kỳ cũ thậm chí có thể hiển thị văn bản được trích dẫn bằng chữ in nghiêng.
Hãy nhớ rằng đây chỉ đơn giản là kiểu dáng mặc định của phần tử blockquote. Với CSS, bạn có toàn quyền kiểm soát cách khối của bạn sẽ hiển thị. Bạn có thể tăng hoặc thậm chí loại bỏ thụt lề, thêm màu nền hoặc tăng kích thước văn bản để tiếp tục gọi báo giá. Bạn có thể nổi báo giá đó sang một bên của trang và có văn bản khác quấn quanh nó, đó là một phong cách hình ảnh thường được sử dụng cho pullquotes trong các tạp chí in. Bạn có quyền kiểm soát sự xuất hiện của blockquote với CSS, một cái gì đó chúng ta sẽ thảo luận thêm một chút ngay. Bây giờ, hãy tiếp tục xem xét cách thêm chính trích dẫn vào đánh dấu HTML của bạn.
Để thêm thẻ blockquote vào văn bản của bạn, chỉ cần bao quanh văn bản là báo giá với cặp thẻ sau -
Ví dụ:
'Twas brillig và toith slithey
Gyre và gimble trong wabe:
Tất cả đều là borogoves,
Và mome raths outgrabe.
Như bạn có thể thấy, bạn chỉ cần thêm cặp thẻ blockquote xung quanh nội dung của chính trích dẫn đó. Trong ví dụ này, chúng tôi cũng đã sử dụng một số thẻ ngắt (
) để thêm các ngắt dòng đơn lẻ ở vị trí thích hợp bên trong văn bản. Điều này là do chúng tôi đang tái tạo văn bản từ một bài thơ, trong đó những khoảng ngắt cụ thể đó là quan trọng. Nếu bạn đã tạo báo giá lời chứng thực của khách hàng và các dòng không cần phải chia nhỏ các phần cụ thể, bạn sẽ không muốn thêm các thẻ ngắt này và cho phép trình duyệt tự bao bọc và ngắt khi cần dựa trên kích thước màn hình.
Không sử dụng Blockquote cho văn bản thụt lề
Trong nhiều năm, mọi người sử dụng thẻ blockquote nếu họ muốn thụt lề văn bản trên trang web của họ, ngay cả khi văn bản đó không phải là một pullquote. Đây là một thực tế tồi tệ! Bạn không muốn sử dụng ngữ nghĩa của blockquote chỉ vì lý do trực quan. Nếu bạn cần thụt lề văn bản của mình, bạn nên sử dụng các tờ định kiểu, không phải các thẻ blockquote (trừ khi, tất nhiên, những gì bạn đang cố gắng thụt lề là một câu trích dẫn!). Hãy thử đặt mã này vào trang web của bạn nếu bạn đang cố gắng chỉ cần thêm thụt lề:
Đây sẽ là văn bản được thụt lề.
Tiếp theo, bạn sẽ nhắm mục tiêu lớp đó bằng kiểu CSS
.indented {
padding: 0 10px;
}
Điều này cho biết thêm 10 pixel đệm ở hai bên của đoạn văn.
Bài báo gốc của Jennifer Krynin. Được chỉnh sửa bởi Jeremy Girard vào ngày 5/8/17.