HTML5 được Steve Jobs xem là công nghệ có thể đánh bại Adobe Flash, có khả năng làm thay đổi cả thế giới web. Vậy HTML5 là gì? HTML5 có gì mới? Khả năng của nó lớn như thế nào mà được đánh giá cao như vậy? HTML5 khác HTML chỗ nào? Cùng Vietnix tìm hiểu ngay sau đây nhé!
HTML5 là gì?
Trước khi tìm hiểu HTML5 là gì, HTML5 có gì mới, bạn cần tìm hiểu về nền tảng HTML trước. Bởi HTML chính là tiền thân của HTML5 sau này.
HTML (viết tắt của cụm từ Hypertext Markup Language) là ngôn ngữ lập trình được dùng để mô tả hiển thị của một website. Nó là thành phần quan trọng nhất của WWW (World Wide Web). Hầu hết các website đều được phát triển thông qua ngôn ngữ lập trình HTML.
HTML giúp các lập trình viên có thể hiển thị đầy đủ các yếu tố trên ứng dụng, trình duyệt web gồm: văn bản, hình ảnh, video,… Tóm lại, chức năng chủ yếu của HTML là tạo bố cục và định dạng website.
HTML5 là ngôn ngữ lập trình được phát triển dựa trên nền tảng HTML và quan trọng nhất của World Wide Web. HTML5 vẫn được giữ lại những đặc điểm cơ bản của HTML. Tuy nhiên ở phiên bản mới này, nó sẽ được cải tiến để hỗ trợ và giúp cho website thân thiện hơn với người dùng, thiết bị, các chương trình máy tính, các trình duyệt web,…
Lịch sử phát triển của HTML5
HTML5 được phát triển nhiều giai đoạn. Các năm hình thành và phát triển của ngôn ngữ lập trình này lần lượt là:
- Năm 1989: “World Wide Web” chính thức ra đời nhờ phát minh của Tim Berners-Lee.
- Năm 1990: Internet ra đời.
- Năm 1991: Ngôn ngữ lập trình HTML ra đời. Sau đó vào những năm 1998, các phiên bản của HTML liên tục được cải tiến và chúng ổn định nhất ởphiên bản cải tiến thứ 4 là HTML4.
- Năm 2000: Phiên bản XHTML 1.0 ra đời dưới nghiên cứu của World Wide Web Consortium (W3C).
- Năm 2004: W3C đã quyết định đóng cửa các phiên bản cũ của HTML. WHATWG (viết tắt của Web Hypertext Application Technology Working Group) với mong muốn phát triển HTML nhanh chóng và mạnh mẽ hơn. Từ đó tạo nên một ngôn ngữ lập trình có độ tương thích cao, thân thiện với người dùng, hạn chế tối đa lỗi ở các phiên bản cũ.
- Năm 2008: Dưới sự ủng hộ của W3C, phiên bản ngôn ngữ lập trình HTML5 đầu tiên chính thức được ra đời.
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 .
2. HTML5 đã thêm rất nhiều thẻ đánh dấu (Markup) mới:
- Các thẻ
<header>và<footer>: Giúp tách các phần đầu trang và chân trang của các block nội dung. - Thẻ
<article>: Giúp xác định một phần cụ thể về nội dung như một bài viết hoặc một bình luận của độc giả. Nó độc lập với content của website. - Thẻ
<nav>: Thường dùng để tạo ra các menu hoặc danh sách các liên kết trên website. - Thẻ
<section>: Đây là một thẻ quan trọng, giúp bạn xác định các thành phần khác nhau trong website, giống như các thẻ<div>hiện nay. - Các thẻ <audio> và <video>: Dùng để hiện thị những nội dung như âm thanh hoặc video.
- Thẻ <canvas>: Cho phép bạn vẽ đồ họa mà không cần dùng ứng dụng hỗ trợ.
- Thẻ <embed>: Dùng để nhúng các nội dung hoặc các ứng dụng bên ngoài vào trang web.
- Bạn cần lưu ý rằng: Các thẻ mới của HTML5 không chỉ được sử dụng 1 lần. Ví dụ, thẻ header và footer không chỉ đánh dấu sự bắt đầu và kết thúc của một trang mà có thể là một phần nội dung nào đó trên website. Điều này đồng nghĩa với việc hai thẻ này có thể được dùng nhiều lần trong toàn bộ trang.
3. HTML5 cũng xóa bỏ đi một số thẻ trong HTML4 như: acronym, applet, font, frame, frameset, noframes, isindex, basefont, dir, big, center, noscript, strike…
4. HTML5 không còn thuộc tính type trong thẻ <script> và <link>: Trước đây, trong những phiên bản HTML bạn cần khai báo thêm thuộc tính type cho thẻ <script> và <link>. Tuy nhiên, việc khai báo thuộc tính này không cần thiết vì hai thẻ <script> và <link> đã hàm ý rằng chúng là các thẻ tham chiếu đến stylesheets và các tập mã lệnh.
5. HTML5 sử dụng web SQL databases, application cache để lưu dữ liệu tạm còn phiên bản HTML trước đây chỉ có cache của trình duyệt.
6. HTML5 hỗ trợ hoàn toàn cho JavaScript để chạy nền nhờ vào JS web worker API.
7. HTML5 chạy được trên hầu hết các trình duyệt như Internet Explore, Google Chorme, Coccoc, Firefox,…
Ưu điểm của HTML5
Doctype
Các mã và thẻ trong phiên bản trước có gây cho bạn nhiều rắc rối? Đừng lo lắng! Doctype <! DOCTYPE html> trong phiên bản mới sẽ giúp bạn không cần sao chép và dán đoạn mã dài, khó đọc như mọi khi. Ngoài việc đơn giản, nó còn hoạt động với tất cả các phiên bản cũ của các trình duyệt chính bao gồm IE6.
Cải thiện khả năng truy cập
Một trong những lợi thế của HTML5 là nó đã cải thiện khả năng truy cập của các trang web. Trong trình đọc màn hình HTML5 có thể dễ dàng truy cập nội dung và hiểu các thẻ khác nhau như <header>, <footer>, <nav>, <section>, <aside> mà không gặp trục trặc. Điều này không chỉ cải thiện màn hình mà còn giúp giảm bớt quá trình viết mã. Cải tiến mới này cung cấp khả năng tiếp cận tốt hơn cho người dùng bất kể kích thước màn hình, hướng và độ phân giải của thiết bị.
Code sạch hơn
“Giữ code sạch”, đây là điều mà mọi hướng dẫn viết code sẽ cho bạn biết và bây giờ bạn có thể giữ code sạch bằng HTML5. Đây là một trong những cải tiến lớn trong phiên bản ngôn ngữ đánh dấu mới này vì nó cho phép bạn viết code mô tả và ngữ nghĩa một cách rõ ràng. Bạn cũng có thể tách style khỏi content mà không cần tốn nhiều công sức.
Tối ưu hóa di động
Người dùng internet di động đã vượt qua người anh em máy tính để bàn / máy tính xách tay và tiếp tục phát triển, do đó các trang web cần phải thân thiện với thiết bị di động.
HTML5 là công cụ sẵn sàng cho thiết bị di động nhất và cho phép bạn tạo các trang web và ứng dụng cho các thiết bị di động khác nhau. Bạn có thể thiết kế các trang web đáp ứng để tăng phạm vi tiếp cận của họ và cũng phục vụ cho người dùng bất kể họ sử dụng thiết bị nào.
Tương thích với nhiều trình duyệt
Trong thế giới đa trình duyệt, các trang web cần phải tương thích với nhiều trình duyệt và đây là ý tưởng cốt lõi đằng sau HTML5 Doctype. Nó hỗ trợ tất cả các trình duyệt lớn trên thế giới bao gồm Google Chrome, Internet Explorer, Firefox, Opera và Safari và thậm chí hỗ trợ các phiên bản cũ của chúng.
Ngay cả đối với những người dùng đang gặp khó khăn với IE6, việc cài đặt JavaScript đơn giản cho phép họ truy cập liên tục vào trang web.
Hỗ trợ âm thanh / video
Việc sử dụng các phần tử âm thanh và video trước đây có nghĩa là sử dụng Flash Player hoặc các trình phát đa phương tiện của bên thứ ba khác giúp chỉ một số ít người đã cài đặt các trình phát này có thể truy cập được các phần tử này.
Một trong những ưu điểm chính của HTML5 là nó đã giới thiệu nhiều phần tử mới với <audio> và <video> là phần tử phổ biến nhất cho phép bạn thêm các phần tử đa phương tiện vào trang web mà không gặp bất kỳ trục trặc nào.
Vị trí địa lý
Phục vụ một phiên bản tùy chỉnh của trang web là thứ tự trong ngày. API vị trí địa lý HTML5 cho phép bạn phát hiện vị trí của người dùng và cung cấp nội dung cụ thể cho họ. Tuy nhiên, tính năng này sẽ yêu cầu sự đồng ý của người dùng để xác định vị trí của họ nhưng làm cho việc duyệt web trở nên dễ dàng và cụ thể hơn nhiều đối với người dùng.
Giao diện hấp dẫn
Tương tác tốt hơn dẫn đến tiếp thị tốt hơn và bán hàng nhiều hơn cho doanh nghiệp và với HTML5, bạn sẽ làm cho trang web hấp dẫn hơn. Phần tử bản vẽ mới cho phép bạn đạt được hoạt ảnh và các tính năng khác giúp thu hút người dùng. Nó cho phép bạn tạo các ứng dụng internet phong phú để cải thiện khả năng thâm nhập và chuyển đổi cho trang web của bạn.
Phát triển trò chơi
Bạn biết mức độ phổ biến và khả năng tiếp thị của trò chơi đối với người dùng Internet. Trò chơi hiện có thể được phát triển trên HTML5 với thẻ <canvas>. Không giống như các trò chơi Flash ở trường cũ của bạn, những trò chơi này thú vị và dễ phát triển hơn nhiều.
Lưu trữ được cải thiện
Trong HTML5, bạn sẽ được tận hưởng tính năng lưu trữ được cải thiện, đây là sự kết hợp hoàn hảo giữa lưu trữ kiểu cookie và cơ sở dữ liệu phía máy khách. Nó tốt hơn về mặt bảo mật và cũng cho phép lưu trữ đồng thời.
So sánh sự khác nhau giữa HTML và HTML5
HTML5 khác gì HTML? Chúng ta hãy xem xét sự khác biệt giữa HTML và HTML5 trong bảng sau đây:
| Đặc tính | HTML | HTML5 |
| Định nghĩa | Ngôn ngữ đánh dấu siêu văn bản (HTML) là ngôn ngữ đánh dấu tiêu chuẩn để tạo, cấu trúc và hiển thị các trang web. HTML được dùng để phát triển website. | HTML5 là phiên bản chính thức thứ năm. Bao gồm các tính năng, thẻ và yếu tố mới được thêm vào. Trong đó, Markup là yếu tố cốt lõi để tương tác với công nghệ web cho việc cấu trúc và trình bày nội dung. |
| Hỗ trợ đa phương tiện | Ngôn ngữ trong HTML không hỗ trợ video và âm thanh gốc. | HTML5 có hỗ trợ âm thanh và video gốc. |
| Hỗ trợ đồ họa vector | Chỉ hỗ trợ đồ họa vector nếu được sử dụng cùng với các công nghệ khác nhau như Flash, VML hoặc Silverlight . | Hỗ trợ SVG (Đồ họa vector có thể mở rộng), Canvas và đồ họa vector ảo khác. |
| MathML nội tuyến và SVG trong văn bản | Cho phép sử dụng hạn chế. | Cho phép. |
| Hình dạng | Không cho phép người dùng vẽ các hình dạng như hình tròn, hình tam giác và hình chữ nhật. | Cho phép người dùng vẽ các hình dạng như hình tròn, hình tam giác và hình chữ nhật. |
| Lưu trữ dữ liệu | Chỉ sử dụng bộ nhớ cache và cookie của trình duyệt để lưu trữ dữ liệu tạm thời. | Sử dụng cơ sở dữ liệu SQL web, bộ nhớ cục bộ và bộ đệm ứng dụng để lưu trữ dữ liệu tạm thời. |
| Phân luồng | JavaScript và giao diện trình duyệt chạy trong cùng một chủ đề. | JavaScript và giao diện trình duyệt chạy trong các chuỗi riêng biệt. |
| Khai báo loại tài liệu | Khai báo loại tài liệu dài hơn. | Khai báo loại tài liệu ngắn hơn. |
| Mã hóa ký tự | Khai báo mã hóa ký tự dài hơn. Sử dụng ASCII bộ ký tự. | Khai báo mã hóa ký tự ngắn hơn. Sử dụng bộ ký tự UTF-8. |
| Hỗ trợ trình duyệt | Tương thích với hầu hết tất cả các trình duyệt. | Chỉ tương thích với các trình duyệt mới hơn, do có nhiều thẻ và phần tử mới mà chỉ một số trình duyệt hỗ trợ. |
| Được xây dựng dựa trên Ngôn ngữ đánh dấu tổng quát tiêu chuẩn (SGML) | Đúng. | Không. Điều này có nghĩa là nó đã cải thiện các quy tắc phân tích cú pháp để cung cấp khả năng tương thích nâng cao. |
Khả năng của HTML5 là gì?
HTML5 có thể được sử dụng để viết các web apps mà vẫn hoạt động khi không kết nối với mạng. Chúng cho phép các trang web biết vị trí thực tế của bạn; xử lý video độ nét cao; và cung cấp đồ họa đặc biệt.
Khi nào thì HTML5 hoàn thành?
HTML5 là một tiêu chuẩn đang phát triển. Vì vậy sẽ hơi sai lầm khi nói về thời điểm hoàn thành chính xác.
Điều quan trọng là các tính năng của HTML – chẳng hạn như định vị địa lý, web apps, video và đồ họa có thể được sử dụng, miễn là trình duyệt của bạn hỗ trợ chúng.
Tôi có cần trình duyệt HTML5 không?
Bạn có thể đã có một cái rồi. Tất cả các trình duyệt phổ biến- Internet Explorer, Edge, Firefox, Chrome, Safari và Opera, Mobile Safari và trình duyệt của Android – đều hỗ trợ. Nhưng không phải tất cả chúng đều hỗ trợ những thứ giống nhau.
Firefox thường hỗ trợ nhiều lựa chọn nhất về các tính năng HTML5. Tiếp sau đó là Chrome và Safari. Nhưng HTML5 là một tiêu chuẩn đang phát triển và các phiên bản mới nhất của mỗi trình duyệt không chỉ bao gồm những điều cơ bản.
Hạn chế của HTML5 video
Tiêu chuẩn HTML5 có hỗ trợ video. Tuy nhiên các trình duyệt khác nhau lại hỗ trợ các định dạng video khác nhau.
Có ba format chính: Ogg Theora, được hỗ trợ bởi mọi thanh trình duyệt Internet Explorer (Safari yêu cầu cài đặt thủ công); H.264, được hỗ trợ tất cả trừ Firefox; và VP8 / WebM, được hỗ trợ mọi trình duyệt (Safari và IE yêu cầu cài đặt thủ công).
HTML5 sẽ thay thế Flash và Silverlight?
Các thiết bị iOS hiện nay không chạy Flash, và nhiều video website đã chuyển từ Flash sang video HTML5 hoặc ít nhất là cung cấp HTML5 như một tùy chọn. Tuy nhiên, vì nó không bao gồm công nghệ quản lý quyền kỹ thuật số (DRM) để ngăn sao chép, nhiều chủ sở hữu nội dung thích các định dạng độc quyền, thân thiện với DRM như Flash hoặc Silverlight. Ví dụ: trang video LoveFilm của UK đang loại bỏ Flash – nhưng thay vì HTML5, nó chuyển sang Silverlight.
Mặc dù Adobe đã thông báo rằng họ sẽ ngừng phát triển Flash Player cho thiết bị di động, Flash cũng được sử dụng cho nhiều mục đích hơn là chỉ hiển thị video.
Cần những tool nào để tạo trang web HTML5?
Bạn có thể viết mã HTML5 bằng biro và một chút giấy tờ nếu muốn. Nhưng những người khác lại thích các công cụ như Dreamweaver của Adobe.
Adobe cũng đang chuẩn bị sẵn sàng Edge, một công cụ tạo hoạt ảnh HTML5 chuyên dụng hứa hẹn sẽ giúp bạn dễ dàng tạo hoạt ảnh kiểu Flash.
Xem bản HTML5 demo ở đâu?
Google Web Fundamentals Program có cả bản demo và code sample cho các nhà thiết kế và nhà phát triển. Google đã kết hợp một trình phát video HTML5 cho YouTube. Và Apple đã kết hợp một chương trình giới thiệu HTML5 trên Apple.com.
Hay quá