Sự thay đổi cách sử dụng trong html, thay đổi và tối ưu các thẻ trong html

HTML VÀ NHỮNG ĐIỀU BẠN CHƯA BIẾT


​

• 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 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ị đoạn 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?
• Diễn đàn <span class="highlight">ITSEOVN, diễn đàn seo Việt Nam</span>, tôi yêu diễn đàn
• Bạn thường highlight các từ khóa quan trọng khi hiển thị nhưng 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> :
​

1. [*=1]email[*=1]tel[*=1]number[*=1]range[*=1]date[*=1]time[*=1]search[*=1]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>
Hãy dừng lại đi, bởi vì thẻ <menu> của HTML5 được thiết kế để thực hiện việc này!
<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>
​

</menu>
Thêm nữa, <menu type=”toolbar”> và <menu type=”context”> được dùng cho thanh công cụ và menu ngữ cảnh.
​

KÊT LUẬN

HTML đang từng ngày được ngữ nghĩa hoá, việc thay đổi cách tiếp cận sẽ giúp đoạn mã của bạn sạch sẽ hơn, dễ tiếp cận hơn. Hãy thường xuyên kiểm tra và cập nhật những điểm mới trong Bảng tuần hoàn các yếu tố HTML Periodic Table of the Elements(truy cập vào và điền trang của bạn để kiểm tra), tài liệu Mozilla Developer Network documentation hoặc W3C’s HTML specification (truy cập vào đẻ đọng tài liệu thông tin hữu ích về html)