Các thẻ semantic cơ bản

1.1 Thẻ <header>

Các thẻ semantic trong HTML5 giúp lập trình viên tạo ra các tài liệu có cấu trúc tốt hơn và dễ đọc hơn, cải thiện khả năng truy cập và SEO (tối ưu hóa công cụ tìm kiếm). Những thẻ này cung cấp mô tả rõ ràng hơn về cấu trúc và nội dung trang web. Dưới đây chúng ta sẽ xem xét chi tiết các thẻ semantic chính.

Thẻ <header> được sử dụng để biểu thị phần tiêu đề của nội dung hoặc một section. Phần tử này thường chứa thông tin giới thiệu, liên kết dẫn đường, logo, tiêu đề và các phần tử khác liên quan đến phần đầu của nội dung.

Ví dụ sử dụng:

    
      <header>
        <h1>Website Title</h1>
        <nav>
          <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </nav>
      </header>
    
  

Đặc điểm chính:

1. Vị trí: thẻ <header> có thể được sử dụng cho toàn bộ tài liệu hay cho các phân đoạn riêng, như <article> hoặc <section>.
2. Nội dung: thường chứa tiêu đề, logo, phần tử dẫn đường, và các phần tử giới thiệu.

1.2 Thẻ <footer>

Thẻ <footer> được sử dụng để biểu thị phần dưới của nội dung hoặc section. Phần tử này thường chứa thông tin về tác giả, liên kết đến tài liệu liên quan, chính sách bảo mật, thông tin liên hệ và các phần tử khác liên quan đến phần dưới của nội dung.

Ví dụ sử dụng:

    
      <footer>
        <p>&copy; 2024 My Website</p>
        <nav>
          <ul>
            <li><a href="#privacy">Privacy Policy</a></li>
            <li><a href="#terms">Terms of Service</a></li>
          </ul>
        </nav>
      </footer>
    
  

Đặc điểm chính:

1. Vị trí: thẻ <footer> có thể được sử dụng cho toàn bộ tài liệu hay cho các phân đoạn riêng, như <article> hoặc <section>.
2. Nội dung: thường chứa thông tin về tác giả, thông tin pháp lý, liên kết dẫn đường và các phần tử kết thúc khác.

1.3 Thẻ <article>

Thẻ <article> được sử dụng để biểu thị một khối nội dung độc lập và tự duy trì mà có thể phân phối và sử dụng lại. Đây có thể là bài viết blog, bài báo tin tức, bình luận, bài viết của người dùng, v.v.

Ví dụ sử dụng:

    
      <article>
        <header>
          <h2>Blog Post Title</h2>
          <p>Published on July 6, 2024</p>
        </header>
        <p>This is the content of the blog post. It can include text, images, and other media.</p>
        <footer>
          <p>Author: John Doe</p>
        </footer>
      </article>
    
  

Đặc điểm chính:

1. Tự túc: thẻ <article> được sử dụng cho nội dung có thể được sử dụng và phân phối riêng lẻ.
2. Cấu trúc: thường chứa phần tiêu đề (<header>), nội dung chính và phần kết thúc (<footer>).

Ứng dụng:

• Bài báo
• Bài viết blog
• Tin tức
• Bình luận

Lợi ích:

• Biểu thị đoạn nội dung độc lập
• Giúp các công cụ tìm kiếm và dịch vụ khác nhận diện và tái sử dụng nội dung

1.4 Thẻ <section>

Thẻ <section> được sử dụng để xác định nhóm nội dung có liên quan về mặt chủ đề. Đây có thể là chương, phân đoạn hoặc các phần lớn khác của nội dung. Khác với <div>, được dùng để tạo kiểu và nhóm mà không có ý nghĩa sematic, <section> có ý nghĩa semantic rõ ràng.

Ví dụ sử dụng:

    
      <section>
        <header>
          <h2>About Us</h2>
        </header>
        <p>This section provides information about our company and its history.</p>
      </section>
    
  

Đặc điểm chính:

1. Nhóm chủ đề: thẻ <section> được dùng để chia nội dung thành các nhóm chủ đề.
2. Cấu trúc: thường chứa phần tiêu đề (<header>) và nội dung chính.

Ứng dụng:

• Các phần trong bài báo
• Nhóm nội dung liên quan chủ đề
• Các phần của trang có thể được phân biệt một cách logic

Lợi ích:

• Cải thiện cấu trúc và khả năng đọc tài liệu
• Giúp các công cụ tìm kiếm hiểu và lập chỉ mục nội dung tốt hơn