Ngữ nghĩa trong các tags HTML

Ngày nay, ngoài việc phát triển một trang web có tính thẩm mỹ. Các lập trình viên còn phải đảm bảo tính ngữ nghĩa cho tài liệu HTML. Tính ngữ nghĩa của tài liệu HTML sẽ giúp cho các bộ máy tìm kiếm (search engine) dễ dàng nhận biết nội dung của trang web. Qua đó, sẽ đưa ra gợi ý chính xác hơn cho người dùng.

Bố cục cơ bản của một trang web

Ngày này, khi sử dụng trang web, có lẽ các bạn rất quen thuộc với việc bố trí nội dung như ảnh bên dưới. Những bố cục phổ thông này đem lại lợi ích gì cho người dùng?

bố cục một trang web
bố cục một trang web

Khi phát triển các trang web theo một bố cục như vậy, có thể trang web sẽ giảm bớt tính thẩm mỹ. Tuy nhiên, lợi ích mang lại cho chúng ta là thói quen của người dùng. Ví dụ: khi các bạn truy cập vào trang web thương mại điện tử, các bạn sẽ tìm kiếm những thông tin này ở đâu:

  • Thanh menu
  • Sản phẩm mới nhất
  • Sản phẩm liên quan
  • Các chính sách, hướng dẫn sử dụng

Chắc chắn, chúng ta đều có chung 1 câu trả lời phải không nào. Tương tự thói quen đó, ngày nay, chúng ta cũng muốn xây dựng một thói quen cho các bộ máy tìm kiếm. Các con robots thu thập dữ liệu trên trang web của chúng ta được tích hợp trí tuệ nhân tạo và trên hết, trí tuệ của chúng ngày càng siêu đẳng. Những con robots này có thể phân tích được nội dung trên trang web của chúng ta. Vậy vai trò của chúng ta – những nhà phát triển web cần làm là phải chỉ chỗ chứa nội dung chính của trang web cho chúng.

Như trên hình minh họa, các bạn thấy. Các chủ để sẽ được phân ra thành tiêu đề, tóm tắt, nội dung và kết luận. HTML5 bổ sung cho chúng ta một vài tags nữa, để làm việc đó.

Các tags HTML

Tag Div

Nếu sử dụng chức năng ‘view page source’ của bất kỳ một trang web nào. Chúng ta có thể dễ dàng khẳng định tag div chiếm đại đa số. Vậy tag div là gì, mà được sử dụng với số lượng lớn như vậy?

The HTML Content Division element (<div>) is the generic container for flow content. It has no effect on the content or layout until styled using CSS.

Đây là một đoạn mô tả về tag div trên trang tài liệu của Mozilla. Tag div thường dùng để chia nhỏ nội dung thành các phần (có style khác nhau). Sau đó, chúng ta sẽ sử dụng class hoặc id để đánh dấu chúng. Cuối cùng là viết các rule CSS áp lên các div đó. Vậy là bố cục của trang web đã hoàn thành.

Các tags ngữ nghĩa

HTML ở phiên bản thứ 5 có nhiều cải tiến vượt bậc. Một trong những thành tựu và quan tâm của nó là vấn đề ngữ nghĩa của trang web. Do đó, HTML5 mang đến cho chúng ta thêm một số phần tử mới. Tất nhiên các phần tử cũ như h1, h2, … ul, ol vẫn mang ý nghĩa riêng của nó. Các phần tử bên dưới chỉ đặc tả rõ hơn về vai trò nội dung bên trong của chúng. Để trong quá trình xây dựng bố cục, chúng ta có những sự lựa chọn tốt hơn tag div.

Các tags mang ý nghĩa nội dung

  • article: thích hợp để trình diễn một bài đăng trên diễn đàn, một bài báo hoặc một bài viết trên blog
  • aside: dùng để biểu diễn một phần của tài liệu. Những nội dung nằm trong phần tử này thường không phải là nội dung chính
  • figcaption và figure: 2 phần tử này sẽ giúp chúng ta tạo tiêu đề cho một phần tử. Thường là hình ảnh

Các bạn có thể xem đoạn mã trên ở đây.

Các tags mang ý nghĩa bố cục

  • footer: đại diện cho phần chân trang hoặc phần dưới cùng của 1 article. Footer thường dùng để mô tả bản quyền, liên kết liên quan đến chủ đề chính
  • header: thường được đặt trên phần nội dung chính của tài liệu HTML, header thường chứa logo, form tìm kiếm và phần tử nav
  • main: thường dùng chứa nội dung chính của tài liệu HTML
  • nav: thường được dùng để biểu diễn một khu vực của trang web. Trong khu vực này thường chứa thanh menu điều hướng hay bảng nội dung (mục lục của trang web).
  • section: Tương tự phần tử div, nhưng nó sẽ đặc tả chi tiết hơn. Nghĩa là chúng ta ngầm hiểu nội dung của section này đang hướng về một chủ đề gì đó. Trước đây, khi chưa dùng section, mình có thể sử dụng div và gán id cho nó để biết được. Phần tử div của chúng ta đang hướng đến nội dung gì. Với section, cách làm cũng vẫn giữ như vậy, nhưng ý nghĩa của tag section rõ ràng hơn so với mục đích chung chung của tag div.