Thay đổi thói quen sử dụng thẻ HTML

Trong thế giới web ngày nay, ngữ nghĩa (Semantic HTML) được quan tâm rất nhiều. Nhưng ngữ nghĩa của nó là gì? Và tại sao nó lại quan trọng như vậy? Semantic HTML biểu thị ý nghĩa của một tài liệu web. Việc dùng đúng ngữ nghĩa sẽ giúp cho người sử dụng và máy tính hiểu rõ nội dung và ngữa cảnh của nó. Semantic HTML hoạt động tốt với trình duyệt hiện đại và thân thiện với SEO, làm giảm số lượng mã tương ứng để thể hiện nội dung và giúp tăng tính rõ ràng cho người khác đọc chúng. Nội dung của Semantic HTML rất quan trọng, nhưng làm sao bạn sử dụng nó? Một trong những cách tốt nhất là thay đổi thói quen sử dụng các thẻ HTML được đề cập dưới đây!

<i> và <b>

Bạn thường dùng 2 thẻ này để biểu thị doàng văn bản in nghiêng và in đậm. Nhưng từ khi ý tưởng của nội dung HTML đúng ngữ nghĩa được đề cập, việc sử dụng <i> và  <b> gây khó chịu bởi vì nó đại diện cho cách thức đoạn văn bản được hiển thị thay vì ý nghĩa thực của nó. Và sau đó, nó được thay thể bới thẻ <em> và <strong>, ngụ ý chỉ đoạn văn bản được nhấn mạnh.

<mark>

Bạn đã từng viết như thế này?

<p>
  Three hundred pages of boring, useless text. <span class="highlight">The one thing you need to know and will never be able to find again if you don't highlight it.</span> More boring stuff…
</p>

Và bây giờ bạn không cần làm như thế nữa, HTML5 giới thiệu thẻ <mark> để làm nổi bật dồng văn bản mà bạn muốn.

<input>

Bạn đã từng dùng <input type="text">, <input type="submit">, <input type="hidden">, ... ở một số nơi, nhưng bạn có biết HTML5 hỗ trợ đa dạng hơn các loại của thẻ <input> :

• email
• tel
• number
• range
• date
• time
• search
• color

Điều này thật tuyệt, nhưng một số trình duyệt vẫn chưa hoàn toàn hỗ trợ các loại này nên trước khi dùng, bạn phải kiểm tra xem chúng có được hỗ trợ hay không.

<menu>

Bạn đã từng tạo một menu bằng cách sử dụng danh sách như bên dưới?

<ul class="menu">
  <li><a href="/home">Home</a></li>
  <li><a href="/pricing">Pricing</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>