[Bài đọc] Kiến trúc Web Semantic

1. Mục tiêu của bài đọc

• Hiểu và sử dụng được các thẻ HTML cơ bản cùng hệ thống thẻ Semantic (HTML5) như <header>, <nav>, <main>, <section>, <article>, <footer>...

• Xây dựng được cấu trúc trang web mạch lạc, thân thiện với các công cụ tìm kiếm (SEO) và người dùng khiếm thị (Accessibility), đồng thời tránh được lỗi lạm dụng thẻ vô nghĩa (Div-soup).

2. Giới thiệu: Tại sao lại là "Semantic"?

Hãy tưởng tượng bạn đang đọc một cuốn sách không có tựa đề, không chia chương hồi, tất cả các chữ đều bằng nhau và viết liền tù tì từ đầu đến cuối. Bạn sẽ cảm thấy rất khó chịu để tìm thông tin đúng không?

Trình duyệt web và các bộ máy tìm kiếm (như Google) cũng "đọc" trang web của bạn giống như vậy. Nếu bạn xây dựng một trang web chỉ toàn bằng các khối hộp vô nghĩa (như thẻ <div> hay <span>), Google Bot sẽ không biết đâu là nội dung chính, đâu là quảng cáo, đâu là menu điều hướng.

Đó là lý do Web Semantic (HTML theo ngữ nghĩa) ra đời. Semantic HTML là việc bạn dùng đúng thẻ cho đúng mục đích, giúp bộ khung trang web có "ý nghĩa" thay vì chỉ dùng để hiển thị giao diện.

3. Khái niệm cốt lõi: Thoát khỏi "Bát súp Div" (Div-Soup)

Trước khi HTML5 ra đời, lập trình viên thường dùng thẻ <div> để bọc mọi thứ, tạo ra các đoạn code trông như thế này:

HTML

<div id="header">...</div>
<div class="menu">...</div>
<div class="content">...</div>
<div class="footer">...</div>

Đây được gọi là Div-soup. Mặc dù trang web vẫn hiển thị đẹp (nếu có CSS), nhưng nó hoàn toàn vô nghĩa với máy móc. Thay vào đó, HTML5 cung cấp một bộ công cụ "có học thức" hơn.

4. Các thẻ Semantic HTML5 cốt lõi bạn cần nắm

Dưới đây là các khu vực chính của một trang web và thẻ tương ứng bạn phải sử dụng:

• <header>: Thể hiện phần mở đầu của một trang web hoặc một bài viết. Thường chứa Logo, thanh tìm kiếm, tiêu đề lớn.

• <nav>: (Navigation) Khối chứa các liên kết điều hướng chính của trang web (Thanh Menu).

• <main>: Chứa toàn bộ nội dung chính, độc nhất của trang web đó. Lưu ý: Mỗi trang web chỉ được phép có duy nhất MỘT thẻ <main>.

• <section>: Một phân vùng nội dung độc lập mang một chủ đề cụ thể. Thường bên trong <section> phải đi kèm với một thẻ tiêu đề (từ <h1> đến <h6>).

• <article>: Một nội dung hoàn chỉnh, có thể đem đi phân phối độc lập ở nơi khác mà người đọc vẫn hiểu trọn vẹn (Ví dụ: Một bài tin tức, một thẻ sản phẩm, một bài đăng blog).

• <aside>: Chứa các thông tin phụ, bổ trợ cho nội dung chính (Ví dụ: Cột sidebar chứa quảng cáo, danh mục bài viết liên quan).

• <footer>: Phần chân trang hoặc chân bài viết, thường chứa thông tin bản quyền, địa chỉ liên hệ, link mạng xã hội.

5. Ví dụ minh họa: Một cấu trúc Semantic chuẩn mực

Hãy xem cách các thẻ trên phối hợp với nhau trong một trang Blog đơn giản:

6. Những lỗi sai "chết người" cần tránh

• Quên thẻ tiêu đề trong <section>: Đã dùng <section> thì phải cho trình duyệt biết section đó nói về cái gì bằng các thẻ heading (<h1> - <h6>).

• Dùng <section> thay thế hoàn toàn cho <div>: Không phải lúc nào cũng dùng Semantic. Nếu bạn chỉ cần tạo một khối hộp để bọc các phần tử lại cho dễ thiết kế CSS (không mang ý nghĩa về mặt nội dung), hãy cứ mạnh dạn dùng <div>.