Là một người thường xuyên làm việc với HTML, chắc hẳn bạn đã từng nghe đến thuật ngữ semantic tags hoặc còn được gọi là semantics element. Mỗi thẻ semantic đều thể hiện ý nghĩa của yếu tố đó đối với các trình duyệt. Chúng ta sẽ cùng nhau tìm hiểu kỹ hơn về các thẻ này trong HTML5 và ý nghĩa nó mang lại nhé.

1. Semantic tags là gì?

Thẻ semantic trong HTML giúp mô tả rõ ràng ý nghĩa của thẻ mà nó gắn đối với các trình duyệt và lập trình viên. Chỉ cần đọc tên các thẻ này chúng ta đã có thể hiểu nội dung bên trong element nói về gì.

Ví dụ về yếu tố non-semantic (yếu tố không có ngữ nghĩa): <div> và <span> – Không có mô tả rõ ràng về nội dung bên trong của nó.

Ví dụ về yếu tố semantic (yếu tố có ngữ nghĩa): <form>, <table>, và <img> – Đưa ra các mô tả rõ ràng về nội dung bên trong yếu tố.

2. Ý nghĩa của thẻ semantic trong HTML5

Với các công cụ tìm kiếm, các thẻ này giúp tăng hiệu quả tiếp cận người dùng vì các công cụ tìm kiếm thường thích đọc những trang web có sử dụng semantic tags. Chỉ cần đọc tên thẻ là chúng ta đã có thể nắm được thông tin mà nó thể hiện.

Đối với các lập trình viên, thẻ semantic mang đến tính năng về giao diện tối giản và dễ quan sát. Khi kiểm tra mã nguồn của một trang web, các lập trình viên có thể nhanh chóng tìm ra các mục khác nhau từ đó có thể dễ dàng định hình được cấu trúc của trang web.

Nếu muốn thực hiện thay đổi bất cứ thành phần nào của trang web, họ có thể dựa vào các thẻ semantic để thực hiện chính xác hơn.

>>> Xem thêm bài viết:

- Hướng dẫn cài đặt unix linux 

- Hướng dẫn cài đặt k8s Kubenertes Cluster

- Scheduling - Lập lịch trên K8s

3. Các thẻ semantic trong HTML5

3.1. Thẻ section

Thẻ section dùng để phân chia các phần riêng biệt của trang HTML, ví dụ trong trang có các phần như About, Contact,... thì các phần này sẽ được bọc trong các thẻ <section>

3.2. Thẻ article

Thẻ article dùng để chứa các nội dung độc lập trong trang. Những nội dung này có thể được cắt ra mang đi nơi khác mà người dùng ở nơi khác đọc vẫn có thể hiểu được, không phụ thuộc vào nội dung chứa trong trang.

Ví dụ như trong trang có chứa phần giới thiệu về 1 quyển sách. Nội dung phần giới thiệu này bao gồm tiêu đề sách, tác giả, tóm tắt, giá,... những nội dung này có thể được trích dẫn ra rồi đem đi trang khác chia sẻ mà người dùng ở trang khác đọc vẫn có thể hiểu được nội dung này là gì. Ở đây, nội dung giới thiệu về trang sách này nên được bọc trong thẻ <article>

3.3. Thẻ nav

Thẻ nav khá dễ hiểu, nó dùng để chứa các thẻ <a> dẫn đến những nội dung chính của website, nên lưu ý là của website chứ không phải của trang HTML hiện tại, nav thường được bọc trong<header> hoặc <footer>.

<nav>
  <a href="/html/">HTML</a>
  <a href="/css/">CSS</a>
  <a href="/js/">JavaScript</a>
  <a href="/jquery/">jQuery</a>
</nav>

3.4. Thẻ aside

Thẻ aside chứa 1 số thông tin bên lề nội dung chính của trang. Những nội dung chứa trong <aside> có thể bị xóa đi mà không làm ảnh hưởng đến nội dung chính của trang. Lưu ý, nếu <aside> nằm trong thẻ <article> thì nội dung nằm trong thẻ <aside> đó chỉ chứa thông tin bên lề nội dung chính của <article> chứ không phải của toàn trang.

Ví dụ ta có 1 trang với nội dung chính là giới thiệu về công nghệ VR, sau đó ta muốn dẫn thêm 1 vài thông tin bên lề về VR cho người xem:

 <aside>
  <h3>More Article About VR</h3>
   <ol>
    <li><a href="#">Make a VR Game</a></li>
    <li><a href="#">Learn VR in Unity</a></li>
    <li><a href="#">Build Users Interfaces in VR</a></li>
   </ol>
   <blockquote>
    "Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming."  
   <footer>
     - <cite><a href="https://www.facebook.com/zuck/posts/10101319050523971">Mark Zuckerberg</a></cite>
   </footer>
     </blockquote>
 </aside>

3.5. Thẻ main

Thẻ <main> dùng để chứa nội dung chính của trang, nó sẽ không chứa các thông tin như <header>, <footer>, <aside>,... hoặc những gì thuộc phần intro,...

Trong 1 trang chỉ có 1 thẻ <main> duy nhất

3.6. Thẻ div

Thẻ <div> là thẻ không hề có Semantic meaning. Nó chỉ dùng để bọc những nội dung có liên quan đến nhau lại. Khi không tìm được thẻ thích hợp để bọc phần nội dung đó thì ta sẽ sử dụng thẻ div.

Ví dụ như phần intro của trang web, nó không thể nằm trên header cũng không thể nằm trong main, khi ấy ta sử dụng thẻ div để bọc các thông tin đó lại.

Ngoài ra, người ta còn sử dụng thẻ <div> để bọc những nội dung cần format giống nhau bằng CSS, cũng như tách trang thành từng phần nhỏ, để trình duyệt có thể render từng phần 1, tăng tốc độ hiển thị đến người dùng thay vì phải load toàn bộ trang mới render.

Thẻ <header> bọc những thông tin giới thiệu về toàn trang web hoặc navigation bar

Thẻ <footer> bọc những thông tin về trang web, thẻ footer của toàn trang thường chứa contact information, copyright information,... **Lưu ý về thẻ <header> và <footer>: Có thể sử dụng nhiều thẻ <header> và <footer> trong trang theo nhiều trường hợp.

Kết bài

Trên là những chia sẻ cơ bản từ Stringee về các thẻ semantics và các thông tin hữu ích liên quan tới chúng. Mong rằng đây sẽ là thông tin hữu ích tới bạn đọc và có thể áp dụng vào công việc của mình.

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy,  Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY: