Thẻ semantic trong HTML5

1. <header>

  • Mô tả: Thẻ này đại diện cho phần đầu của một tài liệu hoặc một phần của trang web, thường chứa tiêu đề, logo và các liên kết điều hướng.
  • Ví dụ:
<header>
    <h1>Chào mừng đến với trang web của tôi</h1>
    <nav>
        <ul>
            <li><a href="#home">Trang chủ</a></li>
            <li><a href="#about">Giới thiệu</a></li>
            <li><a href="#contact">Liên hệ</a></li>
        </ul>
    </nav>
</header>

2. <nav>

  • Mô tả: Chứa các liên kết điều hướng chính của trang web.
  • Ví dụ:
<nav>
    <ul>
        <li><a href="#home">Trang chủ</a></li>
        <li><a href="#services">Dịch vụ</a></li>
        <li><a href="#contact">Liên hệ</a></li>
    </ul>
</nav>

3. <main>

  • Mô tả: Thẻ này chứa nội dung chính của trang, không bao gồm tiêu đề, chân trang hoặc các phần khác.
  • Ví dụ:
<main>
    <article>
        <h2>Bài viết đầu tiên</h2>
        <p>Nội dung của bài viết đầu tiên.</p>
    </article>
</main>

 

4. <article>

  • Mô tả: Đại diện cho một bài viết độc lập, như một bài blog hoặc một tin tức.
  • Ví dụ:
<article>
    <h2>Tin tức mới nhất</h2>
    <p>Nội dung tin tức.</p>
</article>

5. <section>

  • Mô tả: Đại diện cho một phần của nội dung có liên quan, thường có tiêu đề.
  • Ví dụ:
<section>
    <h2>Giới thiệu</h2>
    <p>Nội dung giới thiệu về trang web.</p>
</section>

6. <aside>

  • Mô tả: Chứa thông tin bổ sung hoặc không trực tiếp liên quan đến nội dung chính, như các liên kết hoặc quảng cáo.
  • Ví dụ:
<aside>
    <h3>Các bài viết liên quan</h3>
    <ul>
        <li><a href="#post1">Bài viết 1</a></li>
        <li><a href="#post2">Bài viết 2</a></li>
    </ul>
</aside>

 

7. <footer>

  • Mô tả: Đại diện cho chân trang của một tài liệu hoặc một phần, thường chứa thông tin bản quyền, liên kết điều hướng bổ sung, hoặc thông tin liên hệ.
  • Ví dụ:
<footer>
    <p>&copy; 2024 Công ty ABC. Tất cả quyền được bảo lưu.</p>
    <a href="#privacy">Chính sách bảo mật</a>
</footer>

8. <figure> và <figcaption>

  • Mô tả: Thẻ <figure> chứa một hình ảnh hoặc đồ họa cùng với thẻ <figcaption> để mô tả nội dung đó.
  • Ví dụ:
<figure>
    <img src="image.jpg" alt="Mô tả hình ảnh">
    <figcaption>Mô tả về hình ảnh.</figcaption>
</figure>

9. <time>

  • Mô tả: Đại diện cho một khoảng thời gian hoặc một ngày tháng cụ thể.
  • Ví dụ:
<time datetime="2024-10-23">23 tháng 10, 2024</time>

10. <mark>

  • Mô tả: Được sử dụng để đánh dấu một phần nội dung quan trọng hoặc nổi bật.
  • Ví dụ:
<p>Nội dung quan trọng là <mark>điều này</mark>.</p>

11. <address>

  • Mô tả: Thẻ này chứa thông tin liên hệ cho một cá nhân hoặc tổ chức.
  • Ví dụ:
<address>
    <p>Liên hệ với chúng tôi qua:</p>
    <p>Email: contact@example.com</p>
    <p>Điện thoại: (123) 456-7890</p>
</address>

12. <details> và <summary>

  • Mô tả: Thẻ <details> cho phép bạn tạo một phần có thể mở rộng, trong khi <summary> là tiêu đề của phần đó.
  • Ví dụ:
<details>
    <summary>Xem thêm thông tin</summary>
    <p>Nội dung bổ sung ở đây.</p>
</details>

13. <progress>

  • Mô tả: Thẻ này đại diện cho một tiến trình hoặc phần trăm hoàn thành của một nhiệm vụ.
  • Ví dụ:
<progress value="70" max="100">70%</progress>

14. <meter>

  • Mô tả: Thẻ này đại diện cho một giá trị số trong một phạm vi nhất định, thường được sử dụng để thể hiện các phép đo.
  • Ví dụ:
<meter value="0.6">60%</meter>

15. <template>

  • Mô tả: Thẻ này chứa một đoạn mã HTML có thể tái sử dụng, nhưng không được hiển thị cho đến khi được kích hoạt thông qua JavaScript.
  • Ví dụ:
<template id="my-template">
    <div class="item">Nội dung mẫu</div>
</template>

16. <script type="module">

  • Mô tả: Dùng để chỉ định mã JavaScript là một module. Mặc định, mã module được tải và thực thi theo cách không đồng bộ.
  • Ví dụ:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22module%22%3E%0A%20%20%20%20import%20%7B%20myFunction%20%7D%20from%20'.%2Fmy-module.js'%3B%0A%20%20%20%20myFunction()%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

17. <blockquote>

  • Mô tả: Đại diện cho một trích dẫn dài từ một nguồn khác.
  • Ví dụ:
<blockquote cite="https://example.com">
    <p>Đây là một trích dẫn từ một nguồn đáng tin cậy.</p>
</blockquote>

18. <cite>

  • Mô tả: Dùng để chỉ ra nguồn gốc của một tác phẩm hoặc tài liệu.
  • Ví dụ:
<p>Học hỏi từ <cite>Nhà văn nổi tiếng</cite>.</p>

19. <bdi>

  • Mô tả: Thẻ này ngăn chặn việc làm rối loạn văn bản ở các ngôn ngữ khác nhau, cho phép nó giữ nguyên ngữ nghĩa của mình.
  • Ví dụ:
<p>Hãy xem <bdi>نحن نحب البرمجة</bdi> trong tiếng Ả Rập.</p>

20. <bdo>

  • Mô tả: Thẻ này cho phép bạn kiểm soát hướng văn bản, cho phép bạn đổi hướng từ trái sang phải hoặc ngược lại.
  • Ví dụ:
<p>Văn bản <bdo dir="rtl">được viết từ phải sang trái</bdo>.</p>

21. <data>

  • Mô tả: Thẻ này cho phép bạn xác định giá trị có thể được sử dụng để tham chiếu hoặc để xử lý.
  • Ví dụ:
<p>Hôm nay là <time datetime="2024-10-23">23 tháng 10, 2024</time>.</p>

22. <ins> và <del>

  • Mô tả: Thẻ <ins> dùng để đánh dấu nội dung được thêm vào, trong khi <del> dùng để đánh dấu nội dung đã bị xóa.
  • Ví dụ:
<p>Tài liệu đã <del>biến mất</del> <ins>được cập nhật</ins>.</p>

Kết Luận

Việc sử dụng các thẻ semantic trong HTML5 không chỉ cải thiện trải nghiệm người dùng mà còn hỗ trợ SEO, giúp các công cụ tìm kiếm hiểu rõ hơn về cấu trúc và nội dung của trang web. Chúng cũng làm cho mã nguồn trở nên dễ đọc và dễ bảo trì hơn cho các lập trình viên.

Bài viết liên quan: