Thẻ <article> là gì? Ưu và nhược điểm?
Published on: May 16, 2023
Last updated: May 18, 2025 Xem trên toàn màn hình
Last updated: May 18, 2025 Xem trên toàn màn hình
Recommended for you
- 10 Sep 2023
Định luật Murphy giải thích tại sao chúng ta luôn gặp xui xẻo vào những lúc tưởng thuận lợi 549 - 01 Mar 2024 Tạo hàng trăm video bằng AI dễ dàng với công cụ VideoGen 474
- 12 Sep 2022 Bí quyết sáng tạo nội dung video với A-Roll và B-Roll Footage (cảnh phụ) 283
- 01 May 2022 Có thể xác định vị trí địa lý của địa chỉ IP với độ chính xác đến từng địa chỉ con phố? 282
- 04 Sep 2023 Giải mã nhóm tính cách (ISTP - Nhà kỹ thuật) 182
Thẻ <article> là một phần tử HTML5 được dùng để xác định nội dung độc lập, có thể tái sử dụng, và có ý nghĩa riêng biệt trong tài liệu hoặc ứng dụng web.
1. Định nghĩa thẻ <article>
Thẻ <article> được dùng để chứa một phần nội dung độc lập, như:
- Bài viết trên blog
- Bài báo
- Bài post trên mạng xã hội
- Mục hỏi-đáp (FAQ)
- Bình luận độc lập
Mỗi <article> nên có thể đứng độc lập và có thể được phân phối lại (syndicated) riêng biệt.
Ví dụ:
<article> <h2>10 mẹo học hiệu quả</h2> <p>Đây là các mẹo giúp bạn học tốt hơn mỗi ngày...</p> </article>
2. Ưu điểm
| Ưu điểm | Chi tiết |
|---|---|
| 📚 Semantic rõ ràng | Giúp trình duyệt, công cụ tìm kiếm và phần mềm hỗ trợ hiểu rõ đâu là một phần nội dung độc lập. |
| 📈 Thân thiện SEO | Các công cụ tìm kiếm (Google, Bing...) ưu tiên nội dung có cấu trúc rõ ràng, semantic tốt. |
| ♿ Hỗ trợ truy cập tốt hơn | Các trình đọc màn hình (screen readers) dễ dàng hiểu bố cục và luồng nội dung. |
| 🔁 Tái sử dụng nội dung | Dễ tái sử dụng hoặc hiển thị nội dung trong các widget (ví dụ: các bài viết liên quan). |
3. Nhược điểm
| Nhược điểm | Chi tiết |
|---|---|
| 🧩 Hiểu nhầm về mục đích | Nhiều người dùng nhầm lẫn với <section>, <div> hoặc dùng sai ngữ cảnh. |
| 🎯 Không phù hợp mọi tình huống | Không nên dùng <article> cho nội dung không độc lập như bố cục, điều hướng, hay nhóm nội dung phụ. |
| 🧱 Yêu cầu cấu trúc tốt | Cần đảm bảo mỗi <article> có tiêu đề và nội dung đầy đủ để thực sự có ý nghĩa độc lập. |
4. Có nên dùng trong CMS không?
Có, nếu bạn:
- Phát triển CMS có nội dung dạng blog, tin tức, diễn đàn, portfolio, v.v.
- Muốn tổ chức nội dung theo tiêu chuẩn SEO và semantic tốt.
- Cần mỗi phần nội dung (post) có thể hiển thị riêng hoặc chia sẻ độc lập.
Tuy nhiên:
- Không nên lạm dụng – chỉ dùng khi nội dung đó có tính độc lập và đầy đủ nghĩa.
- Trong CMS, thường
<article>dùng cho mỗi post, còn<section>cho từng phần trong bài viết, và<div>cho bố cục.
Tóm lại
| Tiêu chí | Có nên dùng <article> không? |
|---|---|
| Bài viết blog, tin tức | ✅ Rất nên dùng |
| Nội dung trong một bài (ví dụ: các phần mục nhỏ) | ❌ Không nên dùng <article> |
| CMS hoặc website dạng nội dung | ✅ Hữu ích |
| Layout, bố cục không có ý nghĩa ngữ nghĩa | ❌ Dùng <div> thay thế |
Nếu bạn đang phát triển hoặc tùy chỉnh CMS (WordPress, Ghost, custom CMS…), việc dùng <article> đúng cách sẽ giúp hệ thống dễ bảo trì hơn, có khả năng SEO và accessibility cao hơn.
[{"displaySettingInfo":"[{\"isFullLayout\":false,\"layoutWidthRatio\":\"\",\"showBlogMetadata\":true,\"showAds\":true,\"showQuickNoticeBar\":true,\"includeSuggestedAndRelatedBlogs\":true,\"enableLazyLoad\":true,\"quoteStyle\":\"1\",\"bigHeadingFontStyle\":\"1\",\"postPictureFrameStyle\":\"1\",\"isFaqLayout\":false,\"isIncludedCaption\":false,\"faqLayoutTheme\":\"1\",\"isSliderLayout\":false}]"},{"articleSourceInfo":"[{\"sourceName\":\"\",\"sourceValue\":\"\"}]"},{"privacyInfo":"[{\"isOutsideVietnam\":false}]"},{"tocInfo":"[{\"isEnabledTOC\":true,\"isAutoNumbering\":false,\"isShowKeyHeadingWithIcon\":false}]"},{"bannerInfo":"[{\"isBannerBrightnessAdjust\":false,\"bannerBrightnessLevel\":\"\",\"isRandomBannerDisplay\":true}]"},{"termSettingInfo":"[{\"showTermsOnPage\":true,\"displaySequentialTermNumber\":true}]"}]
Nguồn
{content}
Khám phá thêm các chủ đề sau
Guest Blogging: The Definitive Guide
