Thẻ blockquote trong HTML
Bùi Tấn Lực - 933
- 26/09/2025
Chức năng của Thẻ blockquote trong HTML
Thẻ blockquote trong HTML dùng để trích dẫn một đoạn văn bản dài từ một nguồn khác và gắn liên kết nguồn vào thuộc tính cite, đoạn văn bản trích dẫn sẽ được thuộc lề trái so với các văn bản khác.
Cú pháp của Thẻ blockquote trong HTML
<blockquote cite="lienlet" >vanban</blockquote>
vanban: Đoạn văn bản trích dẫn dài từ nguồn khác
lienlet: Đường dẫn liên kết nguồn trong thuộc tính cite.
Code Thẻ blockquote trong HTML
<style>
blockquote { position: relative; margin: 25px 0; padding: 20px 25px 20px 55px; background: #f8f9fa; border-left: 5px solid #f8b416; border-radius: 8px; color: #555; font-size: 16px; line-height: 1.8; font-style: italic; }
blockquote::before { content: "“"; position: absolute; left: 18px; top: 10px; font-size: 50px; color: #f8b416; font-family: Georgia, serif; line-height: 1; }
</style>
<!--cite là liên kết từ một trang web khác-->
<blockquote cite="https://webmoi.vn/code-the-blockquote-trong-html/" >
Đoạn trích dẫn từ trang web khác. Đoạn trích dẫn từ trang web khác. Đoạn trích dẫn từ trang web khác. Đoạn trích dẫn từ trang web khác. Đoạn trích dẫn từ trang web khác.
</blockquote>
Các trường hợp nên và không nên sử dụng blockquote
Khi nào nên dùng blockquote để trích dẫn nội dung
Thẻ blockquote nên được sử dụng khi bạn muốn hiển thị một đoạn nội dung được trích dẫn từ tài liệu, bài viết hoặc nguồn khác. Việc sử dụng đúng giúp trình duyệt, công cụ tìm kiếm và các công nghệ hỗ trợ hiểu rằng đây là nội dung trích dẫn chứ không phải phần nội dung chính của trang.
Một số trường hợp phù hợp để sử dụng gồm:
- Trích dẫn câu nói của một cá nhân.
- Đưa một đoạn nội dung từ sách, báo hoặc tài liệu tham khảo.
- Hiển thị nhận xét, đánh giá hoặc lời chứng thực có nguồn rõ ràng.
- Đăng lại một đoạn nội dung và muốn thể hiện sự tách biệt với phần nội dung của bài viết.
Khi kết hợp với thuộc tính cite, bạn còn có thể chỉ định nguồn tham khảo để tăng tính minh bạch cho nội dung.
Những trường hợp không nên sử dụng blockquote
Không phải mọi đoạn văn được thụt lề hoặc muốn tạo điểm nhấn đều nên dùng blockquote. Nếu nội dung không phải là trích dẫn, việc sử dụng thẻ này sẽ làm sai ý nghĩa ngữ nghĩa của HTML.
Không nên dùng blockquote trong các trường hợp sau:
- Chỉ muốn tạo khoảng trắng hoặc căn lề cho đoạn văn.
- Muốn làm nổi bật thông báo hoặc ghi chú.
- Hiển thị nội dung do chính bạn viết.
- Tạo hiệu ứng trình bày thay cho CSS.
Việc lạm dụng blockquote khiến cấu trúc tài liệu kém chính xác và làm giảm khả năng hiểu nội dung của các công cụ hỗ trợ đọc trang.
Cách thay thế blockquote khi chỉ muốn tạo khoảng cách hoặc làm nổi bật văn bản
Nếu mục tiêu chỉ là thay đổi cách hiển thị, bạn nên sử dụng CSS để điều chỉnh giao diện thay vì dùng blockquote. Điều này giúp mã HTML giữ đúng ý nghĩa và dễ bảo trì hơn.
Một số giải pháp phù hợp gồm:
- Sử dụng đoạn văn thông thường kết hợp CSS để thay đổi khoảng cách.
- Tạo vùng nhấn mạnh bằng màu nền, đường viền hoặc kiểu chữ.
- Dùng danh sách khi cần trình bày các ý quan trọng.
- Chỉ sử dụng blockquote khi nội dung thực sự là một đoạn trích dẫn.
Tuân thủ nguyên tắc này sẽ giúp trang web có cấu trúc HTML rõ ràng, cải thiện khả năng tiếp cận và tạo nền tảng tốt cho SEO lâu dài.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thẻ blockquote trong HTML.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
