HTML5 Có Gì Mới?
Nói đến ngôn ngữ để lập trình Front-end chắc hẳn ai cũng biết hoặc đã sử dụng HTML5. Vậy HML5 có gì mới mà chúng ta cần biết?
HTML5 là gì
HTML5 là một ngôn ngữ markup được hình thành dựa trên nền tảng ngôn ngữ HTML trở thành một phần quan trọng của World Wide Web. HTML5 được dùng để thiết kế và cấu trúc các website, hỗ trợ đa phương tiện hiệu quả nhưng vẫn đảm bảo tính thân thiện của website đối với người dùng trên mọi thiết bị, mọi trình duyệt.
Bố cục của một trang web HTML5 là như thế nào?
- <!DOCTYPE html> : xác định rằng tài liệu này là tài liệu HTML5
- <html><html>: là phần tử gốc của trang HTML5
- <head></head> :chứa thông tin meta, title về trang HTML5
+<meta charset=...>: Chỉ định mã hoá ký tự cho tài liệu HTML5
+<meta name=.... content =....> :Thiết định khung nhìn để trang web dễ nhìn trên tất cả các thiết bị
+ <title><title>:chỉ định tiêu đề cho trang HTML5 (được hiển thị trong thanh tiêu đề của trình duyệt hoặc trong tab của trang)
- <body></body> : xác định nội dung của tài liệu và là vùng chứa cho tất cả nội dung hiển thị, chẳng hạn như tiêu đề, đoạn văn, hình ảnh, siêu liên kết, bảng, danh sách, ....
+ <header></header>: đại diện cho vùng chứa cho nội dung giới thiệu hoặc một tập hợp các liên kết điều hướng
+ <nav></nav>: thường sử dụng để tạo ra các menu, hoặc danh sách các liên kết trên trang web
+<article></article>: chỉ định nội dung độc lập. Một bài viết nên có ý nghĩa riêng và có thể phân phối nó một cách độc lập với phần còn lại của trang web.
+ <section></section> định nghĩa các phần trong tài liệu, chẳng hạn như chương, tiêu đề, chân trang hoặc bất kỳ phần nào khác của tài liệu.
+ <aside></aside> thẻ này đánh dấu nội dung bên cạnh của trang hiện tại. Ví dụ như một slidebar.
+ <footer></footer> :được sử dụng cho phần cuối trang dùng để chứa thông tin về tác giả, thông tin bản quyền, liên kết kết tới điều khoản sử dụng, thông tin liên hệ,...
Ngoài những thẻ trên HTML còn có những thẻ như:
- <audio>, <video>: Hỗ trợ người dùng xem clip và nghe nhạc trên website mà không cần bên thứ ba.
- <embed>: Xác định một container các plugin tương tác với ứng dụng bên ngoài.
- <canvas>: Cho phép bạn đồ họa mà không cần ứng dụng hỗ trợ.
HTML5 có gì mới?
1. HTML5 có cấu trúc mới : các thành phần trong web bao gồm navigation, body content, sidebar content plus headers, footers, và các thành phần khác . HTML5 đã tạo thẻ để hỗ trợ các yếu tố đó của trang như <header>, <nav>, <article>, <section>, <aside>, <video>, <footer>...
2. HTML5 chạy được trên hầu hết các trình duyệt như internet explore, google chorme, coccoc, firefox,...
3. HTML5 không còn thuộc tính type trong thẻ <script> và <link>: Trong những phiên bản HTML trước đây trong thẻ <script> và <link> bạn cần khai báo thêm thuộc tính type cho chúng.
Thực sự việc khai báo thuộc tính này là không cần thiết. Vì hai thẻ trên đã hàm ý rằng chúng là các thẻ tham chiếu đến stylesheets và các tập mã lệnh. Như vậy, chúng ta có thể hoàn toàn loại bỏ thuộc tính type cho cả hai thẻ này. Ví dụ:
4. HTML5 với những thành phần minh họa:
+Khi dùng HTML:
+ Khi dùng HTML5: Như các bạn thấy, không dễ dàng hoặc đúng ngữ nghĩa để kết hợp chú thích trong thẻ <p> với các yếu tố hình ảnh. HTML5 đã sữa chữa điều này bằng việc cho ra đời thẻ <figure>. Khi kết hợp với phần tử <figcaption> chúng ta có thể đã kết hợp đúng ngữ nghĩa các chú thích với các hình ảnh của mình.
Tại sao nên sử dụng HTML5?
Tương thích với các trang web đang tồn tại: HTML5 không làm các trang web khác trước đây dừng hoạt động. Nó chỉ giúp các website thêm hiệu quả, tăng hiệu năng. Nó không yêu cầu website phải thay đổi ngay lập tức nếu gặp các lỗi chính tả, cú pháp. Các website cũ vẫn hoạt động và tương thích với tiêu chuẩn của HTML5
Tăng khả năng phục vụ đa phương tiện: HTML5 tăng khả năng phục vụ đa phương tiện tốt hơn mà không cần phải quá phụ thuộc vào các bên thứ ba như Adobe Flash… Bên cạnh đó, nó còn hỗ trợ các thiết bị di động, khi mà người dùng càng hướng đến việc truy cập website ở mọi lúc mọi nơi, trên smartphone hoặc máy tính bảng. Nó giúp cho việc lập trình và sử dụng website, ứng dụng một cách thuận tiện, dễ dàng và không tốn thời gian
HTML5 không chỉ giúp lập trình viên code một cách khoa học dễ dàng hơn mà còn đem lại nhiều lời ích cho người dùng.
Kết luận
Có thể nới sự ra đời của HTML5 đã mang lại nhiều điều mới cho lập trình viên. Hiện nay, hầu hết các công cụ CMS đều sử dụng HTML5 cho thiết kế giao diện website. Do đó nếu bạn muốn tối ưu hóa giao diện website của mình thì HTML5 là kiến thức mà bạn không thể bỏ qua. Hãy bắt đầu học HTML5 ngay bây giờ
