Tất cả lập trình viên làm về frontend đều sử dụng thẻ <div> mỗi ngày với nhiệm vụ xây dựng bố cục và giúp phân tách các thành phần bố cục. Nhưng với các tiêu chuẩn mới ngày nay được áp dụng trong mảng frontend development, thì việc nắm bắt được các thẻ tag khác là điều giúp bố cục chặt chẽ và đạt tiêu chuẩn cao hơn.

Hãy lấy một ví dụ như đoạn mã code sau:

<div class="container" id="header">
  <div class="header-title">
    <h1>Page Title</h1>
  </div>
  <div class="header-menu">
    <a href="/">Home</a>
    <a href="/about/">About</a>
    <a href="/portfolio">Portfolio</a>
    <a href="/contact">Contact</a>
  </div>
</div>

Việc lạm dụng thẻ <div> trong những cấu trúc mà ta có thể xác định chức năng sử dụng của nó khiến code của bạn tệ đi rất nhiều, thật đấy!

Tiêu chuẩn HTML5

Ra đời và được công nhận từ tháng 10/2014, nhưng dường như trong mỗi lần phỏng vấn ứng viên với các thẻ tag phổ biến, tôi lại thấy dường như lập trình viên đang thiếu căn bản về 1 standard mà họ luôn nói trong CV như thể mình sử dụng nó thành thạo.

Một trong những điểm mạnh của HTML5 là các tiêu chuẩn đối tượng “semantic”, nôm na thì hiểu là các đối tượng được xác định trong bố cục cụ thể và có ý nghĩa hay chức năng nào đó. Và điều này càng quan trọng khi ngày nay máy đọc (screen reader), bot tìm kiếm thường xuyên đọc code của website và hiểu nó thông qua các tiêu chuẩn trên.

Các khối block “semantic” được chia làm hai loại: cấu trúc chính, và chỉ hướng nội dung. Thật ra nó không quá khác biệt, nhưng ta cần nhận dạng và sử dụng chúng đúng cách.

Bố cục cấu trúc chính trong HTML5

Nếu bắt đầu học về HTML5, bạn không thể quên các khái niệm:

  • Header
  • Main
  • Footer

Chẳng hạn, với markup cơ bản trong bất kỳ HTML5 template nào, bạn sẽ thấy:

<header></header>
<main></main>
<footer></footer>

Nó cũng sẽ hiểu được như bạn ngày xưa viết mà không có nắm được HTML5:

<div class="header" id="header"></div>
<div class="main" id="main"></div>
<div class="footer" id="footer"></div>

Dễ hiểu không? Khi nó là thành phần chính, thì bắt buộc bạn phải cho nó xuất hiện một lần trong tất cả các trang, cố định các thẻ tag này nhé.

Thẻ <section>

Cũng với nhiệm vụ là xây dựng bố cục chính, thẻ <section> hay thường nằm trong thẻ <main> và giúp chia thành nhiều khu vực khác nhau.

<main>
  <section></section>
  <section></section>
</main>

Nhưng có một bí mật mà rất nhiều trong số chúng ta không biết. Đây cũng là câu hỏi mình hay hỏi các bạn khi phỏng vấn vị trí lập trình viên.

Sự khác nhau giữa thẻ <section> và thẻ <div>

Đó là có thật sự được dùng thẻ <section> như thế không? Và nó khác thẻ <div> ta hay dùng như thế nào?

Trả lời

Thẻ <section> chỉ nên dùng nếu bên trong nó chứa tối thiểu 1 Heading text (là các thẻ H1 đến H6), cùng các thành phần khác bên trong.

Câu này tiếng Anh ở đây nhé: “A section, in this context, is a thematic grouping of content, typically with a heading.”

Thẻ chỉ hướng nội dung

Sử dụng thẻ bên trong <section>

Câu hỏi thứ hai là có thể dùng thẻ <header> trong thẻ <section> không? Đây cũng là một câu hỏi khá khoai với ai lờ mờ biết đến HTML5.

Trả lời: có thể sử dụng, nhưng với một điều kiện: Bên trong <header> phải chứa một Heading text, và tốt hơn là một thành phần khác như paragraph.

Tương tự, có thể dùng <footer> bên trong <section> với ý nghĩa khu vực cuối cùng của section.

Vì thế, markup dưới đây được mình thường xuyên sử dụng:

<section class="section">
  <div class="container">
    <header class="section__header">
      <h2 class="section__title">Title</h2>
      <p class="section__description">This is a short description.</p>
    </header>
    <div class="section__main"></div>
    <footer class="section__footer">
      <a class="button section__button" href="/about">View more</a>
    </footer>
  </div>
</section>

Nó giúp:

  • container làm nhiệm vụ kiểm soát max-width của khung section. Thường dùng chung trên tất cả các section.
  • section có thể đổ màu và tạo padding trên dưới
  • header có thể gắn khoảng cách với bố cục bên dưới (grid, list hay các đoạn intro tiếp theo) rất dễ dàng.
  • footer nằm dưới cùng, thường chứa CTA.

Sử dụng thẻ <article>

Các bài viết, ví dụ như bài viết về tin tức, hay tin tuyển dụng, thường nên được nhúng bên trong thẻ <article>, vì đây là nội dung quan trọng.

Một điều rất hay là giống <section>, thẻ <article> cho phép bên trong sử dụng các thẻ <header>, <footer> và thẻ <section>.

Ví dụ markup dưới đây:

<article>
  <header>
    <h1>Semantic HTML5 article</h1>
    <p class="article__meta">Posted on 26/08/2020 by Code Tot</p>
  </header>
  <section>
    <header>
      <h2>Part 1: Semantic HTML5 là gì?</h2>
    </header>
  </section>
  <footer>
    <ul class="social-share"></ul>
  </footer>
</article>

Ngoài những thẻ phổ biến trên, bạn có thể quan tâm tới các thẻ khác như:

<aside>
<blockquote>
<cite>
<code>
<data>
<del>
<figure>
<ins>
<time>
<var>

Chẳng hạn, với thẻ <figure>, mình có thể dùng nhúng video:

<figure class="media">
  <video controls width="250">
    <source src="/media/cc0-videos/flower.webm"
            type="video/webm">
    <source src="/media/cc0-videos/flower.mp4"
            type="video/mp4">
    Sorry, your browser doesn't support embedded videos.
  </video>
</figure>

Hoặc dùng với ảnh:

<figure>
  <img
  src="https://developer.mozilla.org/static/img/favicon144.png"
  alt="The beautiful MDN logo.">
  <figcaption>MDN Logo</figcaption>
</figure>

Để làm ảnh responsive với srcset , ví dụ ảnh là vuông trên mobile và hình chữ nhật trên desktop, ta dùng thẻ <picture> như sau:

<picture>
    <source srcset="/media/cc0-images/surfer-800x400.jpg"
            media="(min-width: 800px)">
    <img src="/media/cc0-images/surfer-300x300.jpg" alt="" />
</picture>

Phần ảnh responsive này, mình sẽ chia sẻ trong một bài viết khác.

Author

Khôi là Founder của CODE TOT JSC., công ty chuyên cung cấp dịch vụ website đa tính năng dành cho doanh nghiệp.

Write A Comment