HTML5 dự kiến đạt đến mức tương thích giữa các trình duyệt vào năm 2022. Dù chặng đường có thể còn dài, nhưng những lợi ích mà HTML5 đem lại có thể đảm bảo cho nó một thành công không kém các phiên bản trước. HTML5 được dự đoán sẽ phổ biến như HTML4 hiện nay. Thẻ Mô tả chức năng Định nghĩa một từ viết tắtXác định thông tin liên hệ của tác giả (hoặc chủ sở hữu) trang web Xác định đoạn văn bản được in đậm Điều hướng một đoạn văn bản được chỉ định Xác định một đoạn văn bản có kích thước chữ to hơn văn bản bình thườngXác định một "đoạn trích dẫn" từ một website khác Xác định một đoạn văn bản mang ý nghĩa là các mã lệnh Tạo một đường kẻ ngang lên văn bản Xác định một đoạn văn bản được định dạng kiểu chữ in nghiêng Xác định một đoạn văn bản được định dạng kiểu chữ in nghiêng Tạo một đường gạch chân lên văn bản Xác định một từ (hoặc cụm từ) mang ý nghĩa là một phím hoặc tổ hợp phím Đánh dấu màu nền nổi bật cho văn bản Tạo phần tử có ý nghĩa giống như: thước đo, ổ đĩa, ....________0 Nếu bạn muốn viết ít hơn mà vẫn được việc, EMMET là một lựa chọn không tồi để học và làm theo nhằm giúp bạn viết nhanh siêu tốc code. EMMET là gì?EMMET là bộ phím tắt, quy tắc và các phím tắt nhằm giảm tối thiểu thời gian của các lập trình viên trong quá trình viết code. EMMET có thể có sẵn trên các code editor như PhpStorm hoặc bạn cần cài plugin. Để hình dung rõ hơn, ví dụ ta có đoạn code sau: <div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div> Khi sử dụng EMMET, ta chỉ cần nhập dòng sau trong code và gõ “Tab” là markup hiện ra: <body>
<div>
<ul>
<li>
<p></p>
</li>
</div>
<p></p>
</body>1Sử dụng EMMET trong markup HTMLMối quan hệ cha-con giữa các ElementCác thẻ thông thường được viết trong ngoặc <tag>..</tag> như thế này, ví dụ <body>
<div>
<ul>
<li>
<p></p>
</li>
</div>
<p></p>
</body>2Trong EMMET sẽ tối giản chỉ còn tên của thẻ. VD: <body>
<div>
<ul>
<li>
<p></p>
</li>
</div>
<p></p>
</body>3 hoặc <body>
<div>
<ul>
<li>
<p></p>
</li>
</div>
<p></p>
</body>4, và các ký tự phải viết liền nhau.Mối quan hệ giữa các elementSử dụng dấu <body>
<div>
<ul>
<li>
<p></p>
</li>
</div>
<p></p>
</body>5 để tạo element theo mối quan hệ cha-conVD: <body>
<div>
<ul>
<li>
<p></p>
</li>
</div>
<p></p>
</body>6được hiểu là: <body>
<div>
<ul>
<li>
<p></p>
</li>
</div>
<p></p>
</body>7 chứa <body>
<div>
<ul>
<li>
<p></p>
</li>
</div>
<p></p>
</body>4<body>
<div>
<ul>
<li>
<p></p>
</li>
</div>
<p></p>
</body>4 chứa <div>
<ul>
<li></li>
<p></p>
<li></li>
<p></p>
</ul>
</div> 0<div>
<ul>
<li></li>
<p></p>
<li></li>
<p></p>
</ul>
</div> 0 chứa <div>
<ul>
<li></li>
<p></p>
<li></li>
<p></p>
</ul>
</div> 2<div>
<ul>
<li></li>
<p></p>
<li></li>
<p></p>
</ul>
</div> 2 chứa <div>
<ul>
<li></li>
<p></p>
<li></li>
<p></p>
</ul>
</div> 4
Sử dụng dấu <div>
<ul>
<li></li>
<p></p>
<li></li>
<p></p>
</ul>
</div> 5 để tìm lại cha của elementVD: <div>
<ul>
<li></li>
<p></p>
<li></li>
<p></p>
</ul>
</div> 6 khi thêm vào sẽ được hiểu là từ <div>
<ul>
<li></li>
<p></p>
<li></li>
<p></p>
</ul>
</div> 4 tìm ngược lại 3 cấp chính là thẻ : <body>
<div>
<ul>
<li>
<p></p>
</li>
</div>
<p></p>
</body>4, sau đó thêm thẻ <div>
<ul>
<li></li>
<p></p>
<li></li>
<p></p>
</ul>
</div> 4 cùng cấp với thẻ <body>
<div>
<ul>
<li>
<p></p>
</li>
</div>
<p></p>
</body>4<body>
<div>
<ul>
<li>
<p></p>
</li>
</div>
<p></p>
</body>Sử dụng dấu <div>
<ul>
<li></li>
<li></li>
</ul>
</div>
<p></p> 1 để tìm element cùng cấpVí dụ: <div>
<ul>
<li></li>
<li></li>
</ul>
</div>
<p></p> 2 được hiểu là thẻ p và span cùng cấp với nhau, đi liền với nhau theo thứ tự.Sử dụng dấu <div>
<ul>
<li></li>
<li></li>
</ul>
</div>
<p></p> 3 để nhóm các elementThẻ được nhóm bên trong <div>
<ul>
<li></li>
<li></li>
</ul>
</div>
<p></p> 3 logic sẽ được ưu tiên, do vậy khi sử dụng các dấu logic bên ngoài sẽ tương tác với nhóm thẻ đó chứ không phải chỉ một thẻ trong nhóm.Ví dụ 1: <div>
<ul>
<li></li>
<li></li>
</ul>
</div>
<p></p> 5 sẽ cho kết quả output là<div>
<ul>
<li></li>
<p></p>
<li></li>
<p></p>
</ul>
</div> Ví dụ 2: <div>
<ul>
<li></li>
<li></li>
</ul>
</div>
<p></p> 6 sẽ cho kết quả output là<div>
<ul>
<li></li>
<li></li>
</ul>
</div>
<p></p> Tỷ lệ lặp lại của elementSử dụng dấu <div>
<ul>
<li></li>
<li></li>
</ul>
</div>
<p></p> 7 để hiển thị số item được copy ra, ví dụ <div>
<ul>
<li></li>
<li></li>
</ul>
</div>
<p></p> 8 sẽ output ra là:<li></li>
<li></li>
<li></li> Kết hợp với dấu <div>
<ul>
<li></li>
<li></li>
</ul>
</div>
<p></p> 3 ở trên thì ta sẽ tạo ra 3 nhóm, ví dụ: (p>span)*3 sẽ output ra là:<p><span></span></p>
<p><span></span></p>
<p><span></span></p> Thêm các thuộc tính <li></li>
<li></li>
<li></li>0 và <li></li>
<li></li>
<li></li>1 cho elementĐể thêm class, bạn thêm <li></li>
<li></li>
<li></li> 2 vào ngay sau element.Ví dụ: <li></li>
<li></li>
<li></li> 3Để thêm id, bạn thêm <li></li>
<li></li>
<li></li> 4 vào ngay sau element.Ví dụ: <li></li>
<li></li>
<li></li> 5Lưu ý: Nếu chỉ viết <li></li>
<li></li>
<li></li> 6 hay <li></li>
<li></li>
<li></li> 7 thì EMMET tự mặc định thẻ chứa class/id phụ thuộc vào thẻ cha bên ngoài. Thẻ cha là <ul> thì thẻ chứa class/id là <li>, thẻ cha là <div> thì thẻ con là </div>Thêm các thuộc tính, ví dụ <li></li>
<li></li>
<li></li>8 cho elementCác thuộc tính khác viết trong ký tự ngoặc vuông <li></li>
<li></li>
<li></li> 9, nội dung text của thẻ được viết trong <p><span></span></p>
<p><span></span></p>
<p><span></span></p> 0Ví dụ 1: td[title="Hello world!" colspan=3] sẽ hiển thị ra là: <td title="Hello world!" colspan="3"></td> Ví dụ 2: a>{click}+b{here}sẽ hiển thị ra là: <a href="">click<b>here</b></a> Tạo data mẫu sử dụng Lorem ipsumBạn có thể nhập <p><span></span></p>
<p><span></span></p>
<p><span></span></p> 1 hoặc <p><span></span></p>
<p><span></span></p>
<p><span></span></p> 2 sẽ có đoạn code như sau:<body>
<div>
<ul>
<li>
<p></p>
</li>
</div>
<p></p>
</body>0Sử dụng EMMET trong code CSSKhác với markup HTML, trong CSS EMMET cho phép ta viết tắt ít hơn. Dưới đây là những thứ bạn nên sử dụng để viết code CSS nhanh hơn: Ví dụ: Bạn gõ <p><span></span></p>
<p><span></span></p>
<p><span></span></p> 3 để output ra <p><span></span></p>
<p><span></span></p>
<p><span></span></p> 4Với giá nhiều trị âm thì nhập <p><span></span></p>
<p><span></span></p>
<p><span></span></p> 5 sẽ output ra là <p><span></span></p>
<p><span></span></p>
<p><span></span></p> 6Với các giá trị bình thường thì có thể nhập <p><span></span></p>
<p><span></span></p>
<p><span></span></p> 7 sẽ output ra là <p><span></span></p>
<p><span></span></p>
<p><span></span></p> 8Các ví dụ khác: <p><span></span></p>
<p><span></span></p>
<p><span></span></p> 9 sẽ output ra: td[title="Hello world!" colspan=3] 0td[title="Hello world!" colspan=3] 1 sẽ output ra: td[title="Hello world!" colspan=3] 2td[title="Hello world!" colspan=3] 3 sẽ output ra td[title="Hello world!" colspan=3] 4td[title="Hello world!" colspan=3] 5 sẽ output ra td[title="Hello world!" colspan=3] 6td[title="Hello world!" colspan=3] 7 sẽ output ra td[title="Hello world!" colspan=3] 8td[title="Hello world!" colspan=3] 9 sẽ output ra <td title="Hello world!" colspan="3"></td> 0<td title="Hello world!" colspan="3"></td> 1 sẽ output ra <td title="Hello world!" colspan="3"></td> 2Kết luậnNếu bạn vẫn đang nhập tay nhiều, hãy tới lúc thay đổi! EMMET giúp bạn lười nhưng hợp lý, tiết kiệm và quen tay thì lại càng thấy ích lợi đấy nhé! | 
