Những điều Cần Biết Về HTML5 - FLINTERS Developer's Blog

1. Giới thiệu :

HTML5 là gì ?

HTML5 là một chuẩn mới và là thế hệ tiếp theo của ngôn ngữ đánh dấu siêu văn bản – HyperText Markup Language explained (gọi tắt là HTML). Các phiên bản trước của HTML, như HTML 4.01 đã ra đời từ năm 1999. Cho đến nay các trang web đã có những thay đổi rất nhiều kể từ đó. HTML5 vẫn còn trong giai đoạn phát triển và hoàn thiện. Tuy nhiên, nhiều phiên bản trình duyệt mới hiện nay đã có các hỗ trợ cho những phần tử, thẻ mới có trong HTML5 và các APIs.

HTML5 là kết quả của sự hợp tác giữa tổ chức W3C và nhóm WHATWG. WHATWG làm việc với các web form và các ứng dụng, còn W3C thì được làm việc với XHTML 2.0. Trong năm 2006, họ quyết định hợp tác và tạo ra một phiên bản mới của HTML, đó chính là HTML5.

Một số điểm mới trên HTML5 :

• Giảm thiếu nhu cầu sử dụng các plugins bên ngoài, với HTML5, sẽ không cần đến các công nghệ độc quyền Ngôn ngữ web HTML5 ra đời nhằm mục đích giảm bớt sự phụ thuộc và cần thiết của những công nghệ ứng dụng Internet độc quyền như Adobe Flash, Microsoft Silverlight và Sun JavaFX. HTML5 sẽ cho phép bạn xem video mà không cần sử dụng một plugin như Flash hoặc Silverlight. Vậy thì những gì là lợi ích lớn với tính năng video của HTML5 là gì? Thứ nhất, nó là miễn phí và không cần phần mềm Adobe Flash plugin. Thứ hai, Flash có thể làm chậm máy tính của bạn Sau cùng, nó chỉ là một trong nhiều phần mềm đang chạy và chiếm tài nguyên hệ thống. Với HTML5, tính năng video đã được xây dựng sẵn trong đó.
• Thêm các thể đánh dấu mới để dần thay thế cho các mã lập trình Điểm đặc trưng đầu tiên của một ngôn ngữ đánh dấu (markup language) là các thẻ. Và ở mặt này thì HTML5 được bổ sung rất nhiều cái mới, từ các thẻ tổ chức nội dung (article, aside, title…) đến các thẻ hỗ trợ tương tác và multimedia (video, audio…). Trong HTML5 cũng xuất hiện một khái niệm gọi là semantic markup, tức là các thẻ có mang ngữ nghĩa. Các thẻ này ra đời từ việc khảo sát các trang web và nhận diện một số thói quen đặt tên phổ biến (một số phần của trang web thường luôn được đặt một cái tên như “header”, “footer”, “nav”). Ngoài sự rõ ràng, sử dụng các semantic markup còn có thể đem lại lợi thế khi các công cụ tìm kiếm trong tương lai tận dụng chúng để phân loại kết quả. Bên cạnh đó, thẻ <form> của HTML5 cũng được xem là một cải tiến lớn. Giờ đây với Form 2.0 (một cách gọi form trong HTML5), tất cả những chức năng mà bạn cần (định dạng, validate data…) đã được xây dựng trực tiếp vào trong HTML. Bạn không còn cần đến Ajax, Flash hay các công nghệ hỗ trợ để làm công việc này nữa!
• Công cụ thiết kế mới HTML5 và CSS3 cũng làm cho các ứng dụng Web và các trang Web hấp dẫn hơn. HTML5 có các tính năng mới được thêm vào giúp cho việc xây dựng ứng dụng web dễ dàng hơn rất nhiều. Ví dụ như nhiều màu sắc hơn và hỗ trợ đường cong, việc làm mờ, góc tròn (thay vì ép buộc các nhà thiết kế web sử dụng các file ảnh để tạo ra các góc tròn), và dĩ nhiên là cả việc lưu trữ offline. Tất cả những điều này là một trang Web trở nên dễ nhìn hơn, bắt mắt hơn và làm cho mọi thứ trở nên tiến gần tới những gì mà nhà thiết kế tưởng tượng trong đầu hơn.
• Khả năng hoạt động xuyên suốt giữa các trình duyệt HTML5 cung cấp các khai báo đơn giản hơn và một API mạnh mẽ, so với các phiên bản trước, đặc tả HTML5 dài hơn đáng kể nhằm chi tiết hóa mọi hành vi để đảm bảo chúng thống nhất giữa các trình duyệt khác nhau.

CSS3 và JavaScript:

Sẽ là thiếu sót nếu nhắc tới HTML mà bỏ quên CSS hoặc JavaScript. Cũng như HTML5, CSS3 vẫn đang trong giai đoạn phát triển, nhưng những tính năng của nó đã làm cho nhiều người phải háo hức. CSS3 cho phép thực hiện một cách dễ dàng những điều mà trước đây phải tốn rất nhiều công sức, chẳng hạn như các đường viền (border) với các góc cạnh được bo tròn, hay thậm chí là xoay đối tượng theo các hướng khác nhau. HTML5 và CSS3 có nhiều tiềm năng sẽ trở thành một cặp đôi ăn ý, nhất là khi mà HTML5 đang đi theo hướng tách biệt giữa nội dung và giao diện. Trách nhiệm trình bày một trang web sẽ từ từ được nhường lại cho CSS3. Song song với chuyện đó, DOM trong HTML5 cũng được hoàn thiện với bộ Selectors API mới đơn giản hơn, cung cấp nhiều phương thức truy xuất chính xác đến từng phần tử trên trang web mà không cần các vòng lặp phức tạp duyệt qua từng phần tử như trước. Cộng với việc các trình duyệt hiện đại đã tăng tốc thực thi JavaScript đáng kể, hơn nữa còn cung cấp các công cụ debug tiện lợi, việc phát triển ứng dụng với JavaScript đã trở nên nhẹ nhàng hơn bao giờ hết

2. Một số ứng dụng của các thẻ trong HTML5 :

Cấu trúc của một trang web sử dụng HTML5

Một cách truyền thống để hiện thực cấu trúc trên trong các phiên bản HTML trước đây là sử dụng các tag với thuộc tính id=”header”, id=”nav”… Cách này vừa khó quản lý (đối với các trang phức tạp, số lượng tag <div> có thể rất nhiều), vừa không mô tả tự nhiên ý nghĩa của từng thành phần (không thể biết <div> nào đánh dấu header, <div> nào đánh dấu body nếu không nhìn vào thuộc tính id hoặc nội dung bên trong). Để giải quyết vấn đề này, HTML5 đưa ra các thẻ mới, với tên gọi phản ánh chính xác vai trò của nó. Hãy xem qua đoạn code khung của trang web ở trên trong HTML5:

<!DOCTYPE html> <head> <meta charset=”utf-8”/> <title>Worm Page</title> </head> <body> <header> </header> <navigation> </navigation> <section> </section> <footer> </footer> </body> </html>

Đoạn code trên có nhiều điểm đáng lưu ý. Trong đó điều đầu tiên đập vào mắt bạn có lẽ là khai báo DOCTYPE, trước đây vốn dài dòng và khó nhớ, nay đã được rút gọn tối đa. Cùng với đó là thẻ meta dùng để chỉ định tập kí tự (character set) cũng được tinh giản. Để tiện tham khảo, đây là dòng code tương đương trong HTML4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Tuy nhiên, sự khác biệt lớn nhất nằm trong thẻ body, với hàng loạt các thành viên mới: <header>, <navigation>, <section>, <footer>>. Có thể thấy rằng bố cục một trang HTML5 đã được minh bạch hóa đáng kể: các thẻ <header>, <footer>… đều tự nói lên nội dung mà chúng chứa đựng. Hơn thế nữa, các thẻ này còn mang lại lợi ích từ việc tối ưu hóa search engine.

Thẻ header và footer

Thẻ <header> và <footer> đánh dấu phần mở đầu và kết thúc của một trang web, đây là nơi thích hợp để đặt các banner, logo hình ảnh và thông tin bản quyền. Ví dụ sau minh họa cách sử dụng <header> và <footer>:

<header> <section> <img src=”logo.jpg” border=”none” /> </section> <nav> <ul> <li><a href=”/first.aspx”>First Page</a></li> <li><a href=”/second.aspx”>Second Page</a></li> <li><a href=”/third.aspx”>Third Page</a></li> </ul> </nav> </header> <footer> <p>Copyright 2010 WormTech.</p> </footer>

Thẻ Session và Article

Thẻ <section> chia nội dung trang web ra thành nhiều phần chính. Mỗi <section> lại có thể có nhiều <article>. Một <article> có thể xem như một bài viết cụ thể (chẳng hạn như một blog entry rất thích hợp để đặt trong một <article>). Cuối cùng, thẻ <aside> thường đóng vai trò như một sidebar cung cấp các thông tin liên quan cho <article> chứa nó (thực tế thì bạn sẽ cần đến CSS nếu muốn hiển thị thẻ <aside> này như một sidebar).

<article> <p>This is the first paragraph</p> <p>This is the second paragraph</p> <aside> <h1>Hello Worm!</h1> <p>Do you think that HTML5 is great?</p> </aside> </article>

Thẻ dialog

Thẻ <dialog> cũng là một bổ sung thú vị, thẻ này cho phép đánh dấu một cuộc đàm thoại giữa nhiều người trên mạng. Trong đó <dt> xác định người nói và <dd> chứa nội dung đàm thoại.

<dialog> <dt>Worm.NET </dt> <dd>Hello, PC</dd> <dt>PC </dt> <dd>Don’t attack me! I have firewall installed! </dd> </dialog>

Thẻ Form

Có lẽ Form 2.0 – một tên gọi khác của form trong HTML5, là một trong những thành phần hấp dẫn nhất. Form 2.0 có nhiều bổ sung đáng giá cho các phần tử , khiến chúng trở nên mạnh mẽ và đáp ứng được các yêu cầu thiết kế phức tạp mà không cần đến một giải pháp công nghệ bên ngoài nào như Flash và Silverlight. Hãy thử xem qua ví dụ sau:

<form> <label>Text Box:</label><br/> <input name=”TextBox” type=”text” maxlength=”25″ required placeholder=”Enter your text here” autofocus><br/><br/> <label>Numeric:</label><br/> <input name=”Numeric” type=”number” min=”18″ max=”100″><br/><br/> <label>Slider:</label><br/> <input type=”range” name=”points” min=”1″ max=”10″ /> <label>Date:</label><br/> <input name=”Date” type=”date”><br/><br/> <button type=submit>Submit</button> </form>

Có lẽ bạn sẽ dễ dàng nhận ra sự xuất hiện nhiều thuộc tính mới trong thẻ <input>: thuộc tính required đánh dấu một field là bắt buộc, placeholder sẽ hiện một dòng text mờ trên textbox (dòng text này sẽ biến mất khi click vào textbox) và autofocus xác định phần tử nhận focus đầu tiên trên form. Với HTML4, việc hiện thực các tính năng này đều yêu cầu kĩ năng lập trình JavaScript, nhưng nay thì chúng đã được xây dựng trực tiếp trong HTML5! Bên cạnh đó, thuộc tính type của cung cấp nhiều kiểu control mới cho form. Chẳng hạn như ta có thể dễ dàng tạo một date control để lựa chọn ngày tháng bằng cách set thuộc tính type=”date”. HTML5 thậm chí còn có sẵn các field được thiết kế riêng cho địa chỉ email hoặc điện thoại.  Cái hay ở chỗ HTML5 cho khả năng tương thích ngược khá tốt. Khi bạn thử đoạn code trên trên một trình duyệt không hỗ trợ HTML5 thì các field sẽ được hiển thị như các textbox thông thường mà không gây ra lỗi khó chịu nào. Tất cả các hỗ trợ này khiến cho việc xây dựng form trở nên dễ dàng hơn bao giờ hết.

Thẻ Video và Audio

Cho phép nhúng video và audio file vào trong trang web mà không cần đến các plugin của trình duyệt Video <video src=”catz.mp4” width=”200” heigh = “400”> </video> Audio <video src=”happy_new_year.mp3” controls preload=”auto” autobuffer></video>

Thẻ (tag) là nét đặc trưng của một ngôn ngữ đánh dấu (markup language). Bài viết này đã giới thiệu khái quát về cách sử dụng một số thẻ mới trong HTML5. Dù chỉ ở mức cơ bản, mình hi vọng các bạn đã phần nào nhận ra tiềm năng của công nghệ mới này.

Kết luận

Một trong những khó khăn ngăn cản việc phổ biến HTML là trình duyệt Internet Explorer, hiện chiếm thị phần lớn nhất thế giới, vốn không có mấy quan tâm đến việc tương thích chuẩn này. Tuy nhiên, với việc Microsoft chính thức tuyên bố hỗ trợ HTML5 trong IE9 (các kết quả thử nghiệm gần đây cho thấy tốc độ HTML5 trên IE9 rất khả quan), có thể nói rằng tất cả các trình duyệt lớn đều đã sẵn sàng chào đón HTML5. Điều đó vừa cho thấy sức cuốn hút công nghệ mới này, đồng thời hứa hẹn một tương lai tốt đẹp cho HTML5 cất cánh. HTML5 dự kiến sẽ ra mắt chính thức vào năm 2012, và đạ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 vào một ngày không xa. Dù không thể kết luận rằng HTML5 sẽ thay thế các công nghệ hiện tại (Silverlight, Flash…) như nhiều nguồn tin đang đồn thổi, đây vẫn sẽ là một công nghệ đáng để ta học hỏi!

=================================== Tham khảo: HTML5 Introduction

What is HTML5?

Post Views: 10,549

No related posts.