Tiếp theo, bạn sẽ thêm một số các phần tử ngữ nghĩa mới vào trang này để tạo cấu trúc hình ảnh của trang. Bạn cũng sẽ tạo ra một số quy tắc của bảng định kiểu để làm cho trang này trông dễ coi hơn.
Sử dụng các phần tử ngữ nghĩa mới
Để minh họa cách các phần tử ngữ nghĩa HTML5 mới nên được sử dụng như thế nào, bây giờ bạn sẽ thêm những các phần tử ngữ nghĩa này vào tệp index.html. Cấu trúc cơ bản của các phần tử này sẽ tuân thủ nét phác thảo sau đây:
- header (tiêu đề)
- hgroup
- nav (chuyển hướng)
- article (bài viết)
- header (tiêu đề)
- section (phần)
- header (tiêu đề)
- footer (chân trang)
Như bạn thấy, trang này sẽ tự mở ra với một header (tiêu đề), theo sau bởi một nav (chuyển hướng), sau đó một article bài viết), và cuối cùng là một footer (chân trang). header sẽ có nhiều nhóm tiêu đề sử dụng phần tử hgroup. article sẽ có một tiêu đề cũng như một phần tử section cũng có tiêu đề riêng của nó. Mã cho cấu trúc này được thể hiện trong Liệt kê 2, và nên được thêm vào giữa thẻ <body> mở và đóng của Liệt kê 1.
Liệt kê 2. Khi sử dụng các phần tử ngữ nghĩa HTML5
<header>
<hgroup>
<h1>Company Name</h1>
<h2>An example of HTML5 and CSS3 in action</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
</nav>
<article>
<header>
<time datetime=”2010-01-12″ pubdate>
<span>Jan</span> 12
</time>
<h1>
<a href=”#” title=”Link to this post”
rel=”bookmark”>Article Heading</a>
</h1>
</header>
<p>This is an article that demonstrates some of the new features
that HTML5 and CSS3 has to offer. This article contains several sections, each
with its own heading, as well as a video element which will play a video without
Flash on browsers that support it.</p>
<section>
<header>
<h1>This is a section heading</h1>
</header>
<p>This is an example of a basic section of a document.
A section can refer to different parts of a document, application, or page.
According to the draft W3C spec, HTML5 sections usually have headings.</p>
</section>
</article>
<footer>
<p>© 2009 Company Name. All rights reserved.</p>
</footer>
Đoạn mã trong Liệt kê 2 tương đối rõ ràng. Phần tử <header> > chính bao gồm một phần tử <hgroup> có hai nhóm tiêu đề: một phần tử tiêu đề <h1> và một phần tử phụ đề <h2>. Phần tử <nav> chính là một danh sách không theo thứ tự có ba mục, mỗi một mục liên kết đến một trang hư cấu trên trang Web đó. Phần tử <article> chứa <header> riêng của mình, có một phần tử <time> chỉ ngày công bố bài viết. Bạn sẽ thấy rằng phần tử này có chứa một thuộc tính datetime (ngày giờ), để chỉ rõ một biểu mẫu chuẩn hóa của ngày đăng bài để các máy tính có thể đọc nó dễ dàng. Nội dung của phần tử time (thời gian) là “Jan 12” (12 tháng Giêng) để mọi người thấy dễ đọc hơn. Thuộc tính pubdate cho biết rằng đây là ngày công bố bài viết theo yêu cầu.
Bên dưới tiêu đề là một đoạn HTML bình thường, và theo sau nó là một phần tử <section> mới, có chứa một <header> có tiêu đề và một đoạn của phần này. Bạn sẽ tạo ra nhiều phần hơn nữa với các vùng bổ sung của trang được tạo trong các phần còn lại của hướng dẫn này.
Nếu bạn mở trang này trong trình duyệt của bạn, nó sẽ trông không đẹp lắm, vì nó vẫn còn chưa được định kiểu với CSS. Hãy thêm một số kiểu dáng để làm cho các trang trông đẹp hơn một chút. Hãy thêm đoạn mã của Liệt kê 3 vào tệp styles.css.
Liệt kê 3. Các kiểu dáng CSS cho các phần tử HTML5 ngữ nghĩa mới
* {
font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}
body {
width: 480px; margin: 0px auto;
}
header h1 {
font-size: 36px; margin: 0px;
}
header h2 {
font-size: 18px; margin: 0px; color: #888;
font-style: italic;
}
nav ul {
list-style: none; padding: 0px; display: block;
clear: right; background-color: #666;
padding-left: 4px; height: 24px;
}
nav ul li {
display: inline; padding: 0px 20px 5px 10px;
height: 24px; border-right: 1px solid #ccc;
}
nav ul li a {
color: #EFD3D3; text-decoration: none;
font-size: 13px; font-weight: bold;
}
nav ul li a:hover {
color: #fff;
}
article > header time {
font-size: 14px; display: block; width: 26px;
padding: 2px; text-align: center; background-color: #993333;
color: #fff; font-weight: bold; -moz-border-radius: 6px;
-webkit-border-radius: 6px; border-radius: 6px; float: left;
margin-bottom: 10px;
}
article > header time span {
font-size: 10px; font-weight: normal;
text-transform: uppercase;
}
article > header h1 {
font-size: 20px; float: left;
margin-left: 14px; text-shadow: 2px 2px 5px #333;
}
article > header h1 a {
color: #993333;
}
article > section header h1 {
font-size: 16px;
}
article p {
clear: both;
}
footer p {
text-align: center; font-size: 12px;
color: #888; margin-top: 24px;
}
Hầu hết các quy tắc CSS này đều chứa các đặc tính đã có sẵn trong CSS vào lúc này, nhưng bạn có thể nhận thấy rằng quy tắc article > header time chứa các thuộc tính bán kính-đường viền (bao gồm các đặc tính riêng biệt của trình duyệt cho các trình duyệt dựa trên Mozilla và WebKit). Quy tắc này thêm góc được làm tròn cho hộp ngày/giờ trên các trình duyệt được hỗ trợ, chẳng hạn như Firefox, Safari, và Chrome.
Bạn cũng sẽ nhận thấy việc sử dụng đặc tính hình bóng-văn bản theo quy tắc article > header h1. Hầu hết các trình duyệt hiện đại đều hỗ trợ đặc tính này.
Những điều thú vị về cả hai đặc tính của CSS3 được giới thiệu trong phần này là chúng làm giảm khả năng tùy chỉnh. Nói cách khác, nếu trình duyệt Web của khách truy cập không hỗ trợ những đặc tính mới này, thì đơn giản là chúng sẽ bị bỏ qua và các phần tử sẽ được định kiểu theo các đặc tính được hỗ trợ khác bất kỳ. Trang này bao gồm các nội dung hiện có của nó sẽ trông giống như ảnh chụp màn hình trong Hình 2 (ít nhất đây là cách nhìn thấy nó trong Safari 4 trên Mac OS X).
Tiếp theo, bạn sẽ được giới thiệu về phần tử <video> và cách sử dụng nó để chứa một tệp video Theora trong trang HTML5 của bạn.
Giới thiệu phần tử <video>
Bây giờ bạn sẽ thêm một video vào trang index.html cùng với một tập các nút điều khiển phát lại được cung cấp theo trình duyệt. Xin lưu ý rằng video có trong ví dụ mẫu này là một đoạn video Theora, chỉ có thể được phát trên trình duyệt Firefox và Google Chrome. Safari hiện tại chỉ hỗ trợ các video được mã hóa H.264. Thêm đoạn mã của Liệt kê 4 vào bên dưới thẻ </section> đóng cuối cùng của Liệt kê 2, nhưng ở bên trên thẻ </article> đóng.
Liệt kê 4. Thêm một video vào trang
<section>
<header>
<h1>This is a video section</h1>
</header>
<p>
<video src=”whoweb.net/thiet-ke-web-dep-hien-dai-voi-html5-css3-javascript”
controls autoplay>
<div class=”no-html5-video”>
<p>This video will work in Mozilla Firefox or Google
Chrome only.</p>
</div>
</video>
</p>
</section>
Như bạn thấy, trước tiên bạn tạo một phần mới mà ở đó video sẽ được hiển thị trên trang này. Phần mới này có một tiêu đề tiếp theo là chính đoạn video đó. Đoạn video mà tôi đang sử dụng ở đây là một đoạn phim quảng cáo cho bộ phim Transformers đầu tiên và được tải từ một trang Web ngoài bằng cách sử dụng thuộc tính src. Thuộc tính controls ra lệnh cho trình duyệt hiển thị các nút điều khiển chuẩn của trình duyệt để phát lại video. Và thuộc tính autoplay, cũng ra lệnh cho trình duyệt bắt đầu phát đoạn video tự động.
Giữa các thẻ <video> mở và đóng tôi đã tạo ra một phần tử <div> có lớp no-html5-video, để hiển thị một thông báo tới những người dùng đang cố gắng xem video trong một trình duyệt không hỗ trợ phần tử <video> hoặc không hỗ trợ codec video của Theora.
Trước khi bạn tiếp tục và bắt đầu trang này trong trình duyệt của mình, hãy thêm một số quy tắc mới vào trang styles.css. Chỉ cần thêm các quy tắc từ Liệt kê 5 vào dưới cùng của tệp này.
Liệt kê 5. Các quy tắc CSS cho phần video
article > section video {
width: 480px; height: 200px;
}
article > section div.no-html5-video,
article > section div#no-canvas {
width: 480px; height: 40px; border: 1px solid #993333;
text-align: center; color: #993333; font-size: 13px;
font-style: italic; background-color: #F7E9E9;
}
Các quy tắc này chỉ đơn giản định nghĩa kích thước của các phần tử thùng chứa video, cũng như thông báo lỗi cho những khách truy cập đang sử dụng các trình duyệt không hỗ trợ video HTML5 hoặc định dạng Theora. Nếu bạn mở trang Web trong Firefox hoặc Chrome, bạn sẽ thấy một video trông như sau (xem Hình 3).
Hình 3. Video HTML5 đang hoạt động
Đẹp thật? Bây giờ hãy thử mở nó trong một trình duyệt như Internet Explorer hay Opera. Bạn sẽ thấy một lỗi như thông báo được hiển thị dưới đây trong Hình 4. Lưu ý rằng nếu bạn cố gắng xem nó trong Safari thì trình duyệt này chỉ có thể hiển thị máy phát video của mình, chứ không phát đoạn video đó.
Hình 4. Lỗi không hỗ trợ video HTML5
Tiếp theo, bạn sẽ tạo một biểu mẫu có một số tính năng biểu mẫu Web mới như văn bản giữ chỗ, trọng tâm tự động, và các kiểu đầu vào mới chẳng hạn như phạm vi, datetime, và email.
Cải tiến biểu mẫu Web
Một trong những khía cạnh của HTML5 bị coi nhẹ hơn là việc đưa vào một số nút điều khiển dựa theo biểu mẫu mới để giúp các nhà phát triển thực hiện dễ dàng hơn nhiều khi tạo các ứng dụng Web dựa vào biểu mẫu. Hiện nay, sự hỗ trợ cho các nút điều khiển mới về mặt các widget và chức năng của trình duyệt còn khá mỏng, nhưng chúng làm giảm khả năng tùy chỉnh như các hộp văn bản thông thường nên bây giờ bạn có thể an toàn sử dụng chúng trong mã của bạn, và khi sự hỗ trợ cho trình duyệt được cải thiện, các tính năng này sẽ bật lên tự động.
Thêm mã từ Liệt kê 6 trực tiếp bên dưới thẻ </section> đóng cho phần video mà bạn đã tạo trong Liệt kê 4.
Liệt kê 6. Thêm một biểu mẫu Web
<section>
<header>
<h1>This is a feedback form</h1>
</header>
<p><form>
<label for=”contact_name”>Name:</label>
<input id=”contact_name” placeholder=”Enter your name”
autofocus><br />
<label for=”contact_email”>E-mail:</label>
<input type=”email” id=”contact_email” placeholder=”Enter
your email address”><br />
<label for=”contact_phone”>Phone:</label>
<input type=”tel” id=”contact_phone” placeholder=”Enter your
phone number”><br />
<label for=”contact_callback”>Callback on:</label>
<input type=”datetime” id=”contact_callback”><br />
<label for=”contact_priority”>Priority:</label>
<input type=”range” min=”1″ max=”5″ value=”1″
id=”contact_priority”><br /><br />
<input type=”submit” value=”Request Call”>
</form></p>
</section>
Phần tử biểu mẫu đầu tiên trong Liệt kê 6 không có bất kỳ thuộc tính type nào, và kết quả là nó sẽ đặt mặc định với một nút điều khiển văn bản. Bạn sẽ nhận thấy rằng biểu mẫu này có văn bản giữ chỗ “Hãy nhập tên của bạn” và được thiết lập trọng tâm tự động. Việc hỗ trợ các trình duyệt sẽ tự động chuyển trọng tâm vào phần tử này khi trang đã được biểu thị.
Phần tử tiếp theo là kiểu “email” và lại chứa một giá trị văn bản giữ chỗ. Trình duyệt duy nhất nhận ra kiểu phần tử đầu vào này là đặc trưng riêng là Opera, trong trường này phần tử này hiển thị một biểu tượng thư để nói rằng nó là một trường email.
Trường quan tâm tiếp theo là trường datetime với nhãn “Callback on:”. Về hỗ trợ cho các trình duyệt, trường này sẽ hiển thị một nút chọn ngày và thời gian. Trong Opera, trường này hiển thị làm hai nút điều khiển, một hộp văn bản có một nút chọn ngày (datepicker) và một nút quay tròn cho thời gian.
Cuối cùng, bạn sẽ thấy một nút điều khiển của kiểu range (phạm vi), có giá trị thiết lập là min (tối thiểu), max (tối đa), và các thuộc tính giá trị. Safari, Chrome, và Opera biểu thị nút điều khiển này dưới dạng một thanh trượt, có giá trị tối thiểu là 1, được chọn theo mặc định, và giá trị tối đa là 5. Các trình duyệt không được hỗ trợ chỉ đơn giản hiển thị nút điều khiển này là một hộp văn bản có giá trị văn bản đặt tới 1.
Tiếp theo, chúng ta hãy thêm một số tính năng độc đáo và hấp dẫn vào để làm thay đổi một biểu mẫu khá buồn tẻ và nhàm chán. Hãy thêm các quy tắc sau đây (xem Liệt kê 7) vào tệp styles.css của bạn.
Liệt kê 7. Các quy tắc CSS của biểu mẫu Web
article > section form {
border: 1px solid #888;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
background-color: #eee;
padding: 10px; margin-bottom: 30px;
}
article > section label {
font-weight: bold; font-size: 13px;
}
article > section input {
margin-bottom: 3px; font-size: 13px;
}
Khi xem xét Liệt kê 7 chi tiết hơn, bạn sẽ thấy rằng bán kính đường viền đã được thêm vào thùng chứa biểu mẫu để làm tròn các góc hộp. Ngoài ra, một hình bóng hộp đã được thêm vào phần tử này cùng với một màu nền màu xám nhạt và một số vật đệm.
Trước tiên, hãy xem xét biểu mẫu này khi nó xuất hiện trong Opera, trình duyệt này có sự hỗ trợ nhiều nhất cho các kiểu đầu vào của biểu mẫu Web HTML5 mới (xem Hình 5).
Hình 5. Các cải tiến biểu mẫu Web trong Opera
Bạn có thể thấy biểu tượng thư bên cạnh trường email, và các nút điều khiển mới cho trường datetime. Việc nhấn vào trường thả xuống của nút quay tròn sẽ mở ra tiện ích (widget) lịch của Opera, như hiện thị trong Hình 6 bên dưới.
Hình 6. Widget lịch của Opera
Bạn cũng có thể thấy một nút điều khiển thanh trượt không hấp dẫn lắm như Opera đã đưa ra. Tuy nhiên, thật thất vọng, Opera không hỗ trợ các đặc tính bán kính đường viền hoặc hình bóng hộp, và kết quả là, cả hai hiệu ứng này đều đã không được đưa vào biểu mẫu này. Bây giờ chúng ta hãy mở nó trong Safari để xem các hiệu ứng CSS3 này trông thế nào (xem Hình 7).
Safari dựa trên WebKit đã biểu thị một cách chính xác hiệu ứng các góc tròn và hình bóng hộp, và nó có một hiệu ứng hình ảnh đẹp nhưng đơn giản. Các hiệu ứng tương tự cũng sẽ làm việc trong Mozilla Firefox và Google Chrome. Bạn có thể nhận thấy rằng Safari hỗ trợ tính năng văn bản giữ chỗ và cũng triển khai một thanh trượt (phải nói là sự thay thế đẹp hơn hẳn của Opera) hiện có của kiểu đầu vào phạm vi. Trong phần cuối cùng của hướng dẫn này, bạn sẽ tìm hiểu cách sử dụng phần tử <canvas> và API vẽ 2D để tạo một hình ảnh bitmap mặt cười đơn giản.
Phần tử <canvas> và API vẽ 2D
Để bắt đầu với phần tử <canvas>, trước tiên bạn cần phải thêm chính phần tử này vào trang đó. Trực tiếp bên dưới đoạn mã mà bạn đã thêm vào tệp index.html cho biểu mẫu Web trong phần trước, hãy thêm đoạn mã từ Liệt kê 8 Liệt kê 8.
Ví dụ 8. Thêm phần tử <canvas> vào trang này
<section>
<header>
<h1>This is an 2D Canvas section</h1>
</header>
<p>
<canvas id=”my_canvas” width=”480″ height=”320″></canvas>
<div id=”no-canvas”>
<p>You need a Canvas-compatible browser to view this area.</p>
</div>
</p>
</section>
Đoạn mã này là tương đối đơn giản. Bạn chỉ cần khai báo phần tử canvas, cho nó một chiều rộng, chiều cao, và một thuộc tính duy nhất ID. Các trình duyệt Mozilla và WebKit có ý kiến khác nhau về việc liệu thẻ <canvas> cần có một thẻ đóng riêng biệt không, nhưng cả hai sẽ được đưa ra cùng một cách, miễn là bạn không đặt bất kỳ đoạn mã nào giữa thẻ mở và đóng. Bạn sẽ sử dụng mã JavaScript để hiển thị các thông báo lỗi no-canvas (không có canvas nào) cho những người dùng các phần tử đó, những người đang sử dụng một trình duyệt không được hỗ trợ vào lúc này.
Tiếp theo, bạn cần phải thêm mã JavaScript để khai thác các API vẽ 2D để tạo các hình ảnh trên khung nền ảnh (canvas). Trong tệp index.html, ngay trước thẻ </head> đóng gần đầu của tệp, hãy thêm đoạn mã sau (xem Liệt kê 9):
Liệt kê 9. Tạo kịch bản lệnh phần tử canvas
<script>
function loadCanvas() {
var canvas = document.getElementById(‘my_canvas’);
if(canvas.getContext) {
var ctx = canvas.getContext(‘2d’);
ctx.beginPath();
ctx.arc(245,160,150,0,Math.PI*2,true);
ctx.fillStyle = “rgb(255,255,204)”;
ctx.fill();
ctx.stroke();
ctx.fillStyle = “black”;
ctx.beginPath();
ctx.arc(200,110,15,0,Math.PI*2,true);
ctx.fill();
ctx.beginPath();
ctx.arc(280,110,15,0,Math.PI*2,true);
ctx.fill();
ctx.beginPath();
ctx.arc(240,170,20,4,Math.PI*2,true);
ctx.stroke();
ctx.beginPath();
ctx.arc(240,190,60,0,Math.PI,false);
ctx.stroke();
} else {
document.getElementById(‘my_canvas’).style.display = ‘none’;
document.getElementById(‘no-canvas’).style.display = ‘block’;
}
}
</script>
Liệt kê 9 thêm một khối mã JavaScript vào phần tử đầu trang này, khi định nghĩa một hàm có tên loadCanvas. Hàm này khởi tạo một biến có tên là canvas bằng cách chọn phần tử này có ID duy nhất là my_canvas. Sau đó nó sử dụng một câu lệnh if (nếu) để xác định xem nó có thể nhận được một ngữ cảnh khung nền ảnh từ phần tử này không. Nếu có thể, thì phần tử <canvas> được trình duyệt hỗ trợ; nếu không, thì không có sự hỗ trợ nào cho trình duyệt và khung nền ảnh sẽ được ẩn đi và được thay thế bằng thông báo lỗi. Việc này được nhắc đến trong khối mã khác của câu lệnh if, về phía cuối của hàm này.
Nếu phát hiện thấy có hỗ trợ canvas, hàm này nhận được một bối cảnh 2D có tên là ctx, thì ngữ cảnh 2D này được dùng để vẽ các hình trên khung nền ảnh. Trong hàm này, có 5 hình được tạo ra. Đầu tiên, gọi hàm ctx.beginPath() để bắt đầu vẽ đường thẳng. Tiếp theo dùng hàmctx.arc() để vẽ một cung tròn đầy đủ, có bán kính 150 pixels (điểm ảnh), gần trung tâm của khung nền ảnh. Kiểu dáng phủ đầy được thiết lập có màu vàng, trước khi gọi các hàm ctx.fill() và ctx.stroke(), khi tạo một vòng tròn lớn màu vàng có một đường bao màu đen. Đây là khuôn mặt chính.
Kiểu dáng phủ đầy được thiết lập với màu đen cho các hình tiếp theo được vẽ là đôi mắt. Lúc này vòng tròn khép kín được tạo bằng hàmctx.arc() có bán kính chỉ khoảng 15 pixels, và gọi hàm ctx.fill() để vẽ chúng.
Khối mã tiếp theo tạo mũi, đó là một cung tròn không phải là một vòng tròn khép kín và được đặt ở dưới và giữa hai mắt mà chúng ta vừa tạo. Mũi không cần được phủ đầy, do đó, sử dụng hàm ctx.stroke() để thay thế.
Cuối cùng, một cung nửa vòng tròn lớn được vẽ nhẹ nhàng bên dưới mũi để tạo cái miệng. Kết quả sẽ trông giống nhau trong tất cả các trình duyệt có hỗ trợ phần tử <canvas> (hầu hết các trình duyệt hiện đại bao gồm cả Firefox, Safari, Chrome, và Opera — ngay cả Internet Explorer — có thể hỗ trợ cách vẽ này với sự giúp đỡ của một số thư viện JavaScript thông minh).
Thay đổi cuối cùng mà bạn cần thực hiện đối với tệp index.html là thay đổi phần tử <body> để gọi hàm loadCanvas() khi cửa sổ đã nạp xong. Đơn giản chỉ cần thay thế thẻ <body> mở bằng dòng sau: <body onload=”loadCanvas();”>.
Cuối cùng, chỉ cần thêm các quy tắc sau đây vào tệp styles.css để thêm một số hình bóng hộp đẹp mắt vào thùng chứa khung nền ảnh (xem Liệt kê 10).
Liệt kê 10. Các quy tắc CSS Canvas
article > section div#no-canvas {
display: none;
}
canvas {
border: 1px solid #888;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
background-color: #eee;
}
Kết quả cuối cùng trông giống như ảnh trong Hình 8.
Hình đó đã kết thúc trang mẫu cho hướng dẫn này. Trong phần này, bạn đã sử dụng HTML5 và CSS3 để làm việc với các phần tử ngữ nghĩa HTML5 mới, đã khai thác một số hiệu ứng mới đẹp mắt của CSS3, xem đoạn video trong trình duyệt không có bất kỳ trình cắm thêm flash nào, đã thấy một số widget biểu mẫu mới, và đã tạo một ảnh đồ họa khuôn mặt cười trên một khung nền ảnh bằng cách sử dụng các JavaScript API.
Tóm tắt
Hướng dẫn này dùng như một giới thiệu thực hành về phát triển HTML5 và CSS3. HTML5 có rất nhiều ở giai đoạn đầu phát triển, và thật là thú vị để xem các tính năng mới do nó đề xuất được các nhà cung cấp trình duyệt khác nhau chấp nhận như thế nào. Hiện nay, vì các trình duyệt chủ yếu, Opera, Safari, Firefox và Chrome đang cung cấp sự hỗ trợ để cải tiến hơn nữa với mỗi bản phát hành, và người ta hy vọng sẽ thấy một lượng lớn các tính năng HTML5 được hỗ trợ vào cuối năm 2010.
Tuy nhiên, một số vấn đề có thể ngăn chặn HTML5 trở nên phổ biến rộng rãi trong tương lai gần. Vấn đề thực sự đầu tiên là thiếu sự hỗ trợ từ Microsoft Internet Explorer, trình duyệt Web được sử dụng rộng rãi nhất trên thị trường. Không chắc các nhà phát triển sẽ có thể thử nghiệm các tính năng HTML5 bất kỳ trên IE cho đến khi phiên bản beta đầu tiên của IE9 được phát hành. Ít nhất vào lúc này, các trang Web phát triển cho HTML5 làm giảm hoàn toàn khả năng tùy chỉnh trên IE8, và với một chút công việc phụ, các thay thế có thể được đưa ra để cung cấp các giải pháp cho người sử dụng IE.
Một vấn đề chính khác là vấn đề xung quanh các codec video và các thùng chứa. Cứ tình hình thế này, thì các phần tử <video> sẽ không thay thế cho Flash video làm chuẩn video cho Web. Với các trình duyệt khác nhau đang ủng hộ các codec khác nhau, nên để sử dụng Flash vẫn còn dễ dàng hơn nhiều so với mã hóa video của bạn với Theora và H.264. Ở đây hy vọng rằng có một số cách đột phá được thực hiện trong năm nay về video HTML5. Tóm lại, HTML5 và CSS3 là các chuẩn thú vị, và bạn có thể bắt đầu nâng cấp dễ dàng các trang Web của mình cho phù hợp với các đặc tả mới này ngay từ bây giờ. Sau các bước được vạch ra trong hướng dẫn này, bạn cần thành thạo hơn để …….. phía trước và khám phá một số tính năng thú vị khác mà HTML5 cần cung cấp.
Theo (whoweb.net)
Điểm cuối cùng đáng chú ý trong Liệt kê 1 là phần tử
