Những lỗi cơ bản khi sử dụng HTML5

Share vì hữu ích

Mặc dù HTML5 đã có một khoảng thời gian ra đời khá lâu, rất nhiều lập trình viên vẫn còn khá mù mờ và hay mắc phải các lỗi cơ bản khi sử dụng HTML5 Markup. Code Tốt tổng hợp một vài tình huống thông thường mà các bạn hay mắc phải.

Lạm dụng <section> trong HTML5

Nhiều người cho rằng <section> và <div> về cơ bản không khác nhau, dẫn tới việc lạm dụng nó quá nhiều.

Ví dụ như khi sử dụng ngay trong Header chính của website:

<header>
  <section class="logo"></section>
  <section class="nav"></section>
</header>

Hoặc biến nó thành element bọc ngoài tất cả:

<section id="wrapper">
  <header></header>
  <section id="main"></section
  <footer></footer>
</section>

Tất cả đoạn code trên đều không hợp lý, bởi vì <section> đóng vai trò như một section, tức là một tập hợp các nội dung có tiêu đề (thường trong các cuốn sách sẽ chia ra phần, chương, ở đây <section> đóng vai trò tương tự).

Vậy sử dụng <section> như thế này cho hợp lý?

  1. Nó phải có tiêu đề, thường là <h2>.
  2. Nó nên nằm trong <main>, để biểu đạt 1 phần quan trọng của main content.
  3. Nó vẫn chứa <div> như các element bình thường khác.

Ví dụ như dưới đây là 1 markup hợp lý để hiển thị section

<body>
  <header></header>
  <main>
    <section class="hero">
      <h2 class="hero-title">Hero Title</h2>
      <div class="hero-content"><p>This is a Hero description</p></div>
    </section>
  </main>
  <footer></footer>
</body>

Đặt tất cả liên kết trong <nav> của HTML5

Đây cũng là một lỗi cơ bản mà nhiều người hay gặp. Trong HTML5, <nav> được giới thiệu như một block bọc ngoài <ul> nên dễ gây nhầm lẫn, khiến nhiều lập trình viên Frontend nhét tất cả <ul> vào trong các <nav>.

Trong trường hợp này, các bạn cần ghi nhớ:

  1. Mặc dù <nav> giới thiệu 1 danh sách các liên kết, nhưng <nav> chỉ nên xuất hiện 1 vài lần trong mỗi page, và thường là chứa các liên kết navigation CHÍNH cho website.
  2. Các ví trí thích hợp để đặt <nav> bao gồm: Header (Primary Menu, Secondary Menu), Footer, In-Page Pagination (danh sách liên kết, ví dụ anchor link trong cùng 1 page để chỉ dẫn)
  3. <nav> không nên trở thành một phần của các đối tượng sau: Pagination (dạng /page/2), Liên kết mạng xã hội (tới fanpage Facebook, Twitter, Instagram…), Liên kết tới các từ khoá (Tags), Liên kết tới các Danh mục bài viết trong 1 bài viết/page riêng lẻ (Categories), Các liên kết Footer, các lớp Menu ở cấp độ thứ ba.

Hãy nhớ, chìa khoá để sử dụng <nav> sẽ luôn đi kèm với câu hỏi: “Liệu đây có phải là 1 lớp chỉ dẫn navigation CHÍNH không?”.

Sử dụng <figure> trong HTML5 sai cách

<figure> cùng với <figcaption> ngày nay trở thành các element quan trọng để hiển thị media trong website.

Các tình huống khi sử dụng <figure> không hợp lý của Frontend Developer:

Không phải tất cả ảnh nào cũng cần <figure>

Thẻ <figure> nên được hiểu là một dạng element , bao gồm chú thích nằm cùng với nội dung chính. Nói như vậy là vì nó có thể được di chuyển ra khỏi thông tin chính, ví dụ chuyển qua sidebar, nhưng vẫn không ảnh hưởng tới nội dung chính.

Nếu nó chỉ là một hình ảnh đơn thuần chỉ để hiển thị mà không có tính chất tham chiếu, bạn không cần đặt nó trong thẻ <figure> . Ví dụ đơn giản nhất là với lớp hình ảnh dạng gallery, bạn hoàn toàn không cần nhét tất cả img nằm trong <figure>.

Để sử dụng nó hiệu quả, hãy tự mình đặt những câu hỏi sau:

  • Hình ảnh này có cần thiết phải liên quan tới nội dung đang muốn thể hiện?
  • Nếu câu trả lời là CÓ, hãy đặt tiếp câu hỏi: Liệu hình ảnh này có thể di chuyển tới 1 mục phụ không?
  • Nếu câu trả lời tiếp theo vẫn là CÓ, bạn có thể sử dụng thẻ <figure>

Logo không nên là thẻ <figure>

Ví dụ như code dưới đây là một sai lầm phổ biến:

<header>
  <h1>
    <figure>
      <img src="/img/mylogo.png" alt="My company"class="hide" />
    </figure>
    My company name
  </h1>
</header>

<figure> sử dụng sai bởi vì như đã nêu ở ngay phần trước, nó chỉ nên là 1 phần tử có tính chất tham chiếu, và nên nằm trong các section hơn là nằm trên các block chính như Header, Footer như thế này.

<figure> chỉ nên chứa ảnh?

Đây cũng là một quan niệm sai lầm. <figure> có thể chứa video, trích dẫn quote, bảng table, một phần code,… Bạn có thể kết hợp chúng. Hãy nhớ, từ khoá của <figure> là tính chất tham chiếu và mô tả của chúng so với nội dung chính đi kèm.

Sử dụng type không cần trong HTML5

Trong HTML5, bạn không cần phải liệt kê type trong <script> và <style> element. Các trình duyệt ở thời điểm hiên tại đều tự động nhận biết đâu là style và đâu là script.

Bạn sẽ chỉ cần gọi như sau là đủ:

<link rel="stylesheet" href="styles.css" />
<script src="scripts.js"></script>

Tổng kết

Có rất nhiều cách để bạn tiếp cận với HTML5 bài bản, tuy nhiên đừng quên để tìm hiểu các cấu trúc HTML5 phổ biến và tránh các lỗi thường gặp được Code Tốt nêu ở trên nhé.

Tổng hơp và trích lược dịch bởi @khoipro từ HTML5 Doctor

Share vì hữu ích

Tác giả: Khôi 'Pro' Nguyễn

Technical Lead tại Solis Lab. Quản lý ngôn ngữ tại vi.wordpress.org.

Trả lời