Sự phát triển của HTML đã dừng lại vào năm 1999 với HTML 4. W3C đã tập trung nỗ lực của mình vào việc thay đổi cú pháp cơ bản của HTML từ Standard Generalized Markup Language (SGML - Ngôn ngữ đánh dấu tổng quát hóa tiêu chuẩn) sang XML, cũng như các ngôn ngữ đánh dấu hoàn toàn mới như Scalable Vector Graphics (SVG - Các đồ họa vector co giãn được), XForms và MathML. Các nhà cung cấp trình duyệt đã tập trung vào các tính năng trình duyệt như các ô tab và các trình đọc RSS. Các nhà thiết kế web đã bắt đầu tìm hiểu ngôn ngữ CSS và JavaScript™ để xây dựng các ứng dụng riêng của họ trên đỉnh của các khung công tác hiện có bằng cách sử dụng Ajax (JavaScript không đồng bộ + XML). Nhưng chính HTML hầu như đã không phát triển trong những năm tiếp theo.

----------------------------------------------------------------------------------------------------

Phiên bản mới HTML này—thường được gọi là HTML 5, mặc dù nó cũng mang tên Web Applications 1.0 (Các ứng dụng Web 1.0)—ngay lập tức sẽ phải được ghi nhận với nhà thiết kế Web. Không có các namespace hoặc các lược đồ schema nào. Các phần tử không cần bắt buộc phải được đóng lại. Trình duyệt sẽ bỏ qua các lỗi. Một p vẫn là một p, và một table (bảng) vẫn sẽ là mộttable.Gần đây, HTML dường như đang hồi sinh. Ba nhà cung cấp trình duyệt chính—Apple, Opera và Mozilla Foundation—đã hợp tác tạo nên nhóm WhatWG (Web Hypertext Application Technology Working Group – Nhóm làm việc công nghệ ứng dụng siêu văn bản Web) để phát triển một phiên bản cập nhật và nâng cấp của HTML cổ điển. Gần đây hơn, W3C đã lưu ý đến những phát triển này và đã bắt đầu những nỗ lực HTML thế hệ mới riêng của mình với những thành viên tương tự. Cuối cùng, nhiều khả năng là hai nỗ lực sẽ được hợp nhất. Mặc dù nhiều chi tiết vẫn còn được tranh luận, nhưng các phác thảo về phiên bản tiếp theo của HTML đang trở nên rõ ràng hơn.

Tuy vậy, các nhà thiết kế Web có thể sẽ gặp phải một số phần tử mới và khó hiểu. Các phần tử cũ như div vẫn còn, nhưng bây giờ HTML còn có thêm section, header, footer và nav nữa. em, code và strong cũng vẫn còn, nhưng cũng có thêm meter,time và m. img và embed vẫn còn và cũng có thêm cả video và audio. Tuy nhiên, nếu bạn xem xét kỹ hơn thì sẽ phát hiện rằng những phần tử này không khác lắm. Nhiều phần tử trong đó có thể là những thứ mà các nhà thiết kế cần từ năm 1999 nhưng không có. Tất cả những phần tử mới này có thể học dễ dàng bởi sự tương đồng đơn giản với các phần tử mà nhà thiết kế đã hiểu. Trong thực tế, chúng dễ học hơn nhiều so với Ajax hoặc CSS.

Cuối cùng, nếu người dùng sử dụng máy tính xách tay có tốc độ 300MHz chạy Windows 98 thì họ có thể ngạc nhiên khi nhận ra rằng các trang mới hiển thị tốt trong Netscape 4 và Windows® Internet Explorer® 5. Bởi vì trình duyệt sẽ không ghi nhận hoặc làm bất cứ điều gì với các phần tử mới, nhưng trang vẫn hiển thị và tất cả nội dung vẫn ở đó.

Đó không phải là sự trùng hợp ngẫu nhiên. HTML 5 được thiết kế để có thể tương thích với các trình duyệt không hỗ trợ nó. Lý do rất đơn giản: Chúng ta tất cả đều là những người ở hang ra. Hiện nay các trình duyệt có các ô tab, CSS và XMLHttpRequest, nhưng các trình biểu diễn hình ảnh (renderer) của HTML của chúng đang bị kẹt lại ở năm 1999. Web không thể tiến lên phía trước mà không tính đến cơ sở đã cài đặt. HTML 5 hiểu điều này. Nó cung cấp các lợi ích thực sự cho tác giả trang web hôm nay đồng thời hứa hẹn nhiều hơn cho các độc giả trang web ngày mai khi các trình duyệt đang dần dần được nâng cấp. Với ý nghĩ đó, chúng ta hãy xem xét những gì HTML 5 mang đến cho bạn.

Cấu trúc

Ngay cả các trang HTML đúng định dạng cũng khó xử lý hơn so với mong đợi vì thiếu cấu trúc. Bạn phải tìm ra nơi nào là các ngắt đoạn bằng cách phân tích các mức header. Các thanh Sidebar, footer, header, các trình đơn điều hướng, các phần nội dung chính và những đoạn riêng lẻ được đánh dấu bằng phần tử div chứa mọi thứ. HTML 5 thêm các phần tử mới để xác định rõ ràng từng cái trong số các cấu kiện chung ấy:

• section: Một phần hoặc chương trong một cuốn sách, một phần trong một chương hoặc về cơ bản là bất cứ thứ gì có tựa đề riêng của nó trong HTML 4.
• header: Đầu trang được hiển thị trên trang; không giống như phần tử head (phần đầu).
• footer: Chân trang, nơi hiển thị chữ nhỏ; chữ ký trong một bức thư điện tử.
• nav: Một bộ sưu tập các liên kết đến các trang khác.
• article: Một mục độc lập trong một blog, tạp chí, bản tóm tắt và v.v.

Ví dụ, hãy xem xét một trang đầu blog điển hình với một header ở đỉnh trang, một footer ở dưới đáy, một số mục, một phần điều hướng và thanh sidebar, như thể hiện trong Liệt kê 1.

Liệt kê 1. Một trang blog điển hình hiện nay

                
<html>
  <head>
    <title>Mokka mit Schlag </title>
 </head>
<body>
<div id="page">
  <div id="header">
    <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
  </div>
  <div id="container">
    <div id="center" class="column">               
      <div class="post" id="post-1000572">
        <h2><a href=
      "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
      Spring Comes (and Goes) in Sussex County</a></h2>
        
        <div class="entry">
          <p>Yesterday I joined the Brooklyn Bird Club for our
          annual trip to Western New Jersey, specifically Hyper
          Humus, a relatively recently discovered hot spot. It
          started out as a nice winter morning when we arrived
          at the site at 7:30 A.M., progressed to Spring around
          10:00 A.M., and reached early summer by 10:15. </p>
        </div>
      </div>


      <div class="post" id="post-1000571">
        <h2><a href=
          "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
           But does it count for your life list?</a></h2>
        
        <div class="entry">
          <p>Seems you can now go <a
          href="http://www.wired.com/science/discoveries/news/
          2007/04/cone_sf">bird watching via the Internet</a>. I
          haven't been able to test it out yet (20 user
          limit apparently) but this is certainly cool.
          Personally, I can't imagine it replacing
          actually being out in the field by any small amount.
          On the other hand, I've always found it quite
          sad to meet senior birders who are no longer able to
          hold binoculars steady or get to the park. I can
          imagine this might be of some interest to them. At
          least one elderly birder did a big year on TV, after
          he could no longer get out so much. This certainly
          tops that.</p>
        </div>
      </div>

      </div>
    
    <div class="navigation">
      <div class="alignleft">
         <a href="/blog/page/2/">&laquo; Previous Entries</a>
       </div>
      <div class="alignright"></div>
    </div>
  </div>

  <div id="right" class="column">
    <ul id="sidebar">
      <li><h2>Info</h2>
      <ul>
        <li><a href="/blog/comment-policy/">Comment Policy</a></li>
        <li><a href="/blog/todo-list/">Todo List</a></li>
      </ul></li>
      <li><h2>Archives</h2>
        <ul>
          <li><a href='/blog/2007/04/'>April 2007</a></li>
          <li><a href='/blog/2007/03/'>March 2007</a></li>
          <li><a href='/blog/2007/02/'>February 2007</a></li>
          <li><a href='/blog/2007/01/'>January 2007</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="footer">
    <p>Copyright 2007 Elliotte Rusty Harold</p>
  </div>
</div>
  
</body>
</html>

Ngay cả việc thụt đầu dòng thích hợp, đó là một đống khá lộn xộn của các div lồng nhau. Trong HTML 5, bạn có thể thay thế chúng bằng các phần tử ngữ nghĩa trực tiếp hơn, như trong Liệt kê 2.

Liệt kê 2. Một trang blog điển hình theo HTML 5

                
<html>
 <head>
    <title>Mokka mit Schlag </title>
 </head>
<body>
  <header>
    <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
  </header>
  <section>               
      <article>
        <h2><a href=
        "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
         Spring Comes (and Goes) in Sussex County</a></h2>
        
        <p>Yesterday I joined the Brooklyn Bird Club for our
        annual trip to Western New Jersey, specifically Hyper
        Humus, a relatively recently discovered hot spot. It
        started out as a nice winter morning when we arrived at
        the site at 7:30 A.M., progressed to Spring around 10:00
        A.M., and reached early summer by 10:15. </p>
      </article>


      <article>
        <h2><a href=
          "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
          But does it count for your life list?</a></h2>
        
          <p>Seems you can now go <a
          href="http://www.wired.com/science/discoveries/news/
          2007/04/cone_sf">bird watching via the Internet</a>. I
          haven't been able to test it out yet (20 user
          limit apparently) but this is certainly cool.
          Personally, I can't imagine it replacing
          actually being out in the field by any small amount.
          On the other hand, I've always found it quite
          sad to meet senior birders who are no longer able to
          hold binoculars steady or get to the park. I can
          imagine this might be of some interest to them. At
          least one elderly birder did a big year on TV, after
          he could no longer get out so much. This certainly
          tops that.</p>
      </article>    
    <nav>
      <a href="/blog/page/2/">&laquo; Previous Entries</a>
    </nav>
  </section>

  <nav>
    <ul>
      <li><h2>Info</h2>
      <ul>
        <li><a href="/blog/comment-policy/">Comment Policy</a></li>
        <li><a href="/blog/todo-list/">Todo List</a></li>
      </ul></li>
      <li><h2>Archives</h2>
        <ul>
          <li><a href='/blog/2007/04/'>April 2007</a></li>
          <li><a href='/blog/2007/03/'>March 2007</a></li>
          <li><a href='/blog/2007/02/'>February 2007</a></li>
          <li><a href='/blog/2007/01/'>January 2007</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <footer>
    <p>Copyright 2007 Elliotte Rusty Harold</p>
  </footer>
  
</body>
</html>

Không cần thiết có các div nào nữa. Thay vì sử dụng các thuộc tính class đặc trưng cho trang, ý nghĩa của các phần khác nhau có thể được suy ra từ các tên tiêu chuẩn. Điều này đặc biệt quan trọng đối với âm thanh, điện thoại di động và các trình duyệt không chuẩn khác.

Các phần tử ngữ nghĩa khối

Cũng như các phần tử cấu trúc, HTML 5 thêm một số phần tử mức-khối thuần ngữ nghĩa:

• aside
• figure
• dialog

Tôi sử dụng hai phần tử đầu tiên suốt trong các bài viết như bài này và trong các cuốn sách của tôi. Phần tử thứ ba, bản thân tôi không sử dụng nhiều lắm, nhưng nó phổ biến trong nhiều văn bản viết.

Phần tử aside

Phần tử aside mô tả một lưu ý, một lời khuyên, một thanh bên, một nội dung trích dẫn, một nhận xét trong ngoặc đơn hoặc một cái gì đó chỉ ở bên ngoài luồng chính của câu chuyện. Ví dụ, trong các bài viết trên developerWorks, bạn thường tìm thấy các thanh bên được mã hóa thành các bảng, như thể hiện trong Liệt kê 3.

Liệt kê 3. Một thanh bên của HTML 4 trên developerWorks

                
<table align="right" border="0" cellpadding="0" cellspacing="0" width="40%">
<tbody><tr><td width="10">
<img alt="" src="//www.ibm.com/i/c.gif" height="1" width="10"></td>
<td>
<table border="1" cellpadding="5" cellspacing="0" width="100%">
<tbody><tr><td bgcolor="#eeeeee">
<p><a name="xf-value"><span class="smalltitle">.xf-value</span></a></p>
<p>
The <code type="inline">.xf-value</code> selector used here styles the input
field value but not its label. This is actually inconsistent
with the current CSS3 draft. The example really should use the
<code type="inline">::value</code> pseudo-class instead like so:
</p>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr><td class="code-outline">
<pre class="displaycode">input::value { width: 20em; }
#ccnumber::value { width: 18em }
#zip::value { width: 12em }
#state::value { width: 3em  }</pre>
</td></tr></tbody></table><br>

<p>
However, Firefox doesn't yet support this syntax. 
</p>
</td></tr></table>

Trong HTML 5, bạn có thể viết phần tử này hợp lý hơn nhiều, như thể hiện trong Liệt kê 4.

Liệt kê 4. Một thanh bên của HTML 5 trên developerWorks

                
<aside>
<h3>.xf-value</h3>
<p>
The <code type="inline">.xf-value</code> selector used here styles the input
field value but not its label. This is actually inconsistent
with the current CSS3 draft. The example really should use the
<code type="inline">::value</code> pseudo-class instead like so:
</p>
  
<pre class="displaycode">input::value { width: 20em; }
#ccnumber::value { width: 18em }
#zip::value { width: 12em }
#state::value { width: 3em  }</pre>

<p>
However, Firefox doesn't yet support this syntax. 
</p>
</aside>

Trình duyệt có thể tìm ra nơi đặt thanh bên, có thể với sự giúp đỡ chút ít từ CSS.

Phần tử figure

Phần tử figure mô tả một hình ảnh mức-khối, cùng với một lời chú thích. Ví dụ, trong nhiều bài viết trên developerWorks, bạn thấy cách đánh dấu giống như Liệt kê 5; các kết quả được hiển thị trong Hình 1.

Liệt kê 5. Một phần tử figure của HTML 4 trên developerWorks

                
<a name="fig2"><b>Figure 2. Install Mozilla XForms dialog</b></a><br />
<img alt="A Web site is requesting permission to install the following item: 
   Mozilla XForms 0.7 Unsigned" 
  src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />
<br />

Hình 1. Hộp thoại cài đặt của XForms Mozilla
 

Trong HTML 5, bạn có thể viết phần tử này có ngữ nghĩa hơn, như thể hiện trong Liệt kê 6.

Liệt kê 6. Một phần tử figure của HTML 5 trên developerWorks

                
<figure id="fig2">
  <legend>Figure 2. Install Mozilla XForms dialog</legend>
  <img alt="A Web site is requesting permission to install the following item: 
    Mozilla XForms 0.7 Unsigned" 
    src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />
</figure>

Quan trọng hơn, các trình duyệt—đặc biệt là các trình đọc màn hình—có thể ghi kèm lời chú thích với hình một cách rõ ràng mà không nhập nhằng.

Phần tử figure không chỉ giới hạn cho các bức ảnh. Bạn cũng có thể sử dụng nó để chú thích các phần tử audio, video,iframe, object và embed.

Phần tử dialog

Phần tử dialog mô tả một cuộc trò chuyện giữa một số người. Người ta nạp chồng lên phần tử dt của HTML 5 để chỉ ra người nói và nạp chồng lên phần tử dd của HTML 5 để chỉ ra tiếng nói. Điều này cho phép hiển thị hợp lý ngay cả trong các trình duyệt cũ. Liệt kê 7 cho thấy một đoạn đối thoại nổi tiếng từ "Đối thoại liên quan đến Hai hệ thống thế giới chính" của Galileo.

Liệt kê 7. Một cuộc đối thoại của Galileo trong HTML 5

                
<dialog>
	<dt>Simplicius </dt> 
    <dd>According to the straight line AF,
	and not according to the curve, such being already excluded
	for such a use.</dd>

	<dt>Sagredo </dt> 
    <dd>But I should take neither of them,
	seeing that the straight line AF runs obliquely. I should
	draw a line perpendicular to CD, for this would seem to me
	to be the shortest, as well as being unique among the
	infinite number of longer and unequal ones which may be
	drawn from the point A to every other point of the opposite
	line CD. </dd>

	<dt>Salviati </dt> 
    <dd><p> Your choice and the reason you
	adduce for it seem to me most excellent. So now we have it
	that the first dimension is determined by a straight line;
	the second (namely, breadth) by another straight line, and
	not only straight, but at right angles to that which
	determines the length. Thus we have defined the two
	dimensions of a surface; that is, length and breadth. </p>

	<p> But suppose you had to determine a height—for
	example, how high this platform is from the pavement down
	below there. Seeing that from any point in the platform we
	may draw infinite lines, curved or straight, and all of
	different lengths, to the infinite points of the pavement
	below, which of all these lines would you make use of? </p>
	</dd>
</dialog>

Người ta vẫn còn đang tranh cãi về cú pháp chính xác của phần tử này. Một số người muốn nhúng văn bản bổ sung không phải đối thoại (chẳng hạn như các hướng dẫn biểu diễn) vào trong phần tử dialog và những người khác không hài lòng với việc nạp chồng lên dt và dd. Tuy nhiên, hầu hết mọi người đều đồng ý rằng một số trình bày đối thoại ngữ nghĩa như vậy là một điều tốt, ngay cả khi họ chưa đồng ý về cú pháp chính xác.

Các phần tử ngữ nghĩa nội dòng

HTML 4 có năm phần tử nội dòng khác nhau để mô tả các biến thể tinh tế khác nhau của mã máy tính: var, code, kbd, tt vàsamp. Tuy nhiên, nó không có cách nào để chỉ ra các đặc tính cơ bản như thời gian, các số hoặc lời mỉa mai. HTML 5 nhằm mục đích chỉnh lý lại sự thiếu cân đối giữa các chuyên gia và những người viết bình thường bằng một số phần tử nội dòng mới.

Phần tử mark

Phần tử m cho biết văn bản đó được "đánh dấu" bằng cách nào đó nhưng không nhất thiết phải nhấn mạnh. Bạn có thể tưởng tượng nó như là các đoạn được làm nổi bật trong một cuốn sách. Trường hợp sử dụng kinh điển là các trang được lưu trong bộ nhớ đệm của Google. Khi bạn đi theo một liên kết đến các bản sao được lưu trong bộ nhớ đệm, các thuật ngữ tìm kiếm được đánh dấu. Ví dụ, nếu bạn tìm kiếm "Egret" (con cò), thì một trang Google được lưu trữ trong bộ nhớ đệm có thể được đánh dấu như sau:

The Great <m>Egret</m> (also known as the
American <m>Egret</m>)  is a large white wading bird found worldwide.
The Great <m>Egret</m> flies with slow wing beats. The
scientific name of the Great <m>Egret</m> is <i>Casmerodius
albus</i>.

Tên của phần tử này hiện đang còn phải thảo luận một chút. Có thể thay đổi nó thành mark thay cho m trước khi đặc tả được phát hành.

Phần tử time

Phần tử time cho biết một thời điểm cụ thể trong lịch sử, chẳng hạn như 05:35 chiều, giờ chuẩn ở miền đông Bắc Mỹ (EST), 23.04. 2007. Ví dụ,

<p>I am writing this example at
<time>5:35 P.M. on April 23rd</time>.
</p>

Phần tử time giúp các trình duyệt và những người khác nhận ra các vùng thời gian trong các trang HTML. Nó không đòi hỏi bất kỳ định dạng đặc biệt nào về nội dung của phần tử. Tuy nhiên, mỗi phần tử time nên có một thuộc tính datetime bao gồm thời gian dưới dạng dễ chấp nhận với máy tính, như sau:

<p>I am writing this example at
<time datetime="2007-04-23T17:35:00-05:00">5:35 P.M. on April 23rd</time>.
</p>

Các vùng thời gian dễ đọc với máy tính có thể có ích cho các công cụ tìm kiếm, các chương trình lịch biểu và v.v.

Phần tử meter

Phần tử meter biểu diễn một giá trị số trong một phạm vi đã quy định. Ví dụ, bạn có thể sử dụng nó với tiền lương, tỷ lệ phần trăm các cử tri Pháp đã bỏ phiếu cho Le Pen hoặc các điểm thi. Ở đây, tôi sử dụng phần tử meter để đánh dấu một số dữ liệu mà tôi đã nhận được từ một lập trình viên của Google tại Software Development 2007:

<p>An entry level programmer in Silicon Valley 
can expect to start around <meter>$90,000</meter> per year.
</p>

Phần tử meter giúp các trình duyệt và các máy khách khác nhận ra các số lượng (amounts) trong các trang HTML. Nó không đòi hỏi bất kỳ định dạng đặc biệt nào với nội dung của phần tử. Tuy nhiên, mỗi phần tử meter có thể có nhiều nhất lên đến sáu thuộc tính cung cấp thông tin về số lượng này dưới một dạng dễ chấp nhận với máy tính:

• value (giá trị)
• min (tối thiểu)
• low (thấp)
• high (cao)
• max (tối đa)
• optimum (tối ưu)

Mỗi thuộc tính trong số đó cần chứa một số thập phân để chỉ ra phạm vi có liên quan. Ví dụ, một điểm của kỳ thi cuối cùng có thể được đánh dấu như sau:

<p>Your score was 
<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.
</p>

Điều này cho thấy rằng điểm của học sinh là 88,7 trong thang điểm cao nhất có thể đạt được là 100. Điểm thấp nhất có thể là 0, nhưng điểm thực tế thấp nhất mà có người đã nhận được là 65. Điểm cao nhất mà có người đã nhận được là 96, mặc dù điểm lý tưởng đương nhiên là 100. Các chương trình đại lý người dùng có thể hiển thị thông tin này bằng cách sử dụng một số loại kiểm soát thước đo hoặc cung cấp thêm dữ liệu trong phần chú giải công cụ, nhưng hầu hết có thể sẽ tạo kiểu dáng cho nó giống như bất kỳ phần tử nội dòng khác nào.

Phần tử progress

Phần tử progress mô tả trạng thái của một tiến trình đang diễn ra, giống như thanh tiến trình trong một ứng dụng giao diện người dùng đồ họa (GUI). Ví dụ, nó có thể cho bạn thấy bao nhiêu phần trăm của một tệp đã được tải về hoặc bạn đã xem một bộ phim đến chỗ nào rồi. Việc kiểm soát tiến trình này cho biết rằng một bản tải về đã hoàn thành được 33%:

<p>Downloaded: 
  <progress value="1534602" max="4603807">33%</progress>
</p>

Thuộc tính value hiển thị trạng thái hoạt động hiện tại. Thuộc tính max hiển thị tổng số mà tiến trình này đang hướng đến. Ở đây phần tử này chỉ ra rằng đã có 1.534.602 byte trong tổng số 4.603.807 byte được tải về.

Bạn có thể hiển thị các thanh tiến trình vô hạn bằng cách bỏ qua thuộc tính max.

Bạn nên sử dụng ngôn ngữ JavaScript để cập nhật động thanh tiến trình khi hoạt động tiếp tục. Nếu tĩnh, phần tử này không thú vị lắm.

Phương tiện truyền thông nhúng

Video trên web đang bùng nổ, nhưng hầu hết là có đăng ký độc quyền. YouTube sử dụng Flash, Microsoft sử dụng Windows Media® và Apple sử dụng QuickTime. Việc đánh dấu như vậy làm cho các nội dung nhúng trong trình duyệt này không hoạt động trên trình duyệt khác. Do đó, WhatWG đã đề xuất một phần tử video mới cho phép nhúng các định dạng video tùy ý. Ví dụ, tôi có thể nhúng bộ phim QuickTime của mình “Sora in Prospect Park” như sau:

<video src="http://www.cafeaulait.org/birds/sora.mov" />
  

Việc người ta sẽ ưa thích một định dạng và một chuẩn mã hóa-giải mã (codec) nào vẫn còn đang được tranh luận. Có lẽ ít nhất sự hỗ trợ Ogg Theora sẽ được khuyến cáo mạnh mẽ, nếu không phải là bắt buộc. Sự hỗ trợ cho các định dạng độc quyền như là định dạng QuickTime và định dạng bị vướng quyền tác giả như MPEG-4 sẽ là tùy chọn. Nhiều khả năng, các định dạng thực tế sẽ được quyết định trên thị trường, như là GIF, JPEG và PNG đã trở thành các định dạng được ưa thích nhiều hơn so các đối thủ như BMP, X Bitmap, JPEG 2000 đối với các phần tử img.

Người ta cũng đề xuất một phần tử audio bổ sung. Ví dụ, bạn có thể đính kèm nhạc nền cho một trang web như sau:

<audio src="spacemusic.mp3"
    autoplay="autoplay" loop="20000" />
  

Thuộc tính autoplay cho trình duyệt biết bắt đầu phát ngay sau khi trang web được tải, mà không cần phải chờ đợi một yêu cầu rõ ràng của người dùng. Sau đó nó lặp lại 20.000 lần trước khi tắt (hoặc cho đến khi người dùng đóng cửa sổ hoặc chuyển sang một trang khác). Tất nhiên, các trình duyệt có thể và cần phải cung cấp cho người dùng khả năng chặn tiếng và tạm dừng phương tiện truyền thông nhúng, cho dù tác giả của trang đã làm như vậy hay không.

Các trình duyệt phải hỗ trợ định dạng WAV. Các trình duyệt cũng có thể hỗ trợ các định dạng khác như MP3 nếu muốn.

Vì các phần tử này không được các trình duyệt cũ hỗ trợ và có thể không truy cập được với người dùng khiếm thị và khiếm thính, các phần tử audio và video có thể chứa đánh dấu bổ sung để mô tả nội dung của âm thanh và video. Điều này cũng giúp các công cụ tìm kiếm. Lý tưởng là sẽ có các bản ghi đầy đủ các nội dung của âm thanh và video. Ví dụ, Liệt kê 8 cho thấy bạn có thể đánh dấu bài diễn văn nhậm chức của John F. Kennedy như thế nào.

Bài diễn văn nhậm chức của John F.Kennedy theo HTML 

                
<audio src="kennedyinauguraladdrees.mp3">
    <p>
    Vice President Johnson, Mr. Speaker, Mr. Chief Justice,
    President Eisenhower, Vice President Nixon, President Truman,
    Reverend Clergy, fellow citizens:
    </p>
    
    <p>
    We observe today not a victory of party, but a celebration of
    freedom -- symbolizing an end, as well as a beginning -- 
   signifying renewal, as well as change. For I have sworn before
    you and Almighty God the same solemn oath our forebears
    prescribed nearly a century and three-quarters ago.
    </p>
    
    <p>
    The world is very different now. For man holds in his mortal
    hands the power to abolish all forms of human poverty and all
    forms of human life. And yet the same revolutionary beliefs for
    which our forebears fought are still at issue around the globe -- 
    the belief that the rights of man come not from the
    generosity of the state, but from the hand of God.
    </p>
    
    <p>
    ...
    </p>
    
    </audio>

Tương tác

HTML 5 cũng nằm trong chuyên mục Các ứng dụng web 1.0. Hướng tới mục tiêu đó, một số phần tử mới được tập trung vào các trải nghiệm tương tác nhiều hơn cho các trang web:

• details
• datagrid
• menu
• command

Tất cả các phần tử này đều có khả năng thay đổi những gì được hiển thị dựa trên hành động và sự lựa chọn của người dùng mà không cần tải một trang mới từ máy chủ.

Phần tử detail

Phần tử details mô tả thông tin bổ sung có thể không được hiển thị theo mặc định. Một phần tử legend (lời ghi chú) tùy chọn có thể tóm tắt các chi tiết. Một cách sử dụng các phần tử details là dùng cho các chú thích cuối trang và các chú thích cuối bài. Ví dụ:

The bill of a Craveri's Murrelet is about 10% thinner 
than the bill of a Xantus's Murrelet. 
<details>
<legend>[Sibley, 2000]</legend>
<p>Sibley, David Allen, The Sibley Guide to Birds, 
(New York: Chanticleer Press, 2000) p. 247
 </p>
</details>

Việc biểu diễn chính xác không được quy định rõ. Một trình duyệt có thể sử dụng một chú thích cuối trang, trình duyệt khác sử dụng một chú thích cuối bài và trình duyệt thứ ba sử dụng một chú giải công cụ.

Mỗi phần tử details có thể có một thuộc tính open. Nếu nó có thuộc tính này, thì các chi tiết sẽ được hiển thị cho người đọc ngay từ đầu. Nếu nó không có một thuộc tính như vậy, thì các chi tiết sẽ được ẩn giấu cho đến khi người dùng yêu cầu chúng. Trong cả hai trường hợp, người dùng có thể nhấn chuột vào một biểu tượng hoặc một yếu tố chỉ thị khác để hiển thị hoặc ẩn các chi tiết.

Phần tử datagrid

Phần tử datagrid đóng vai trò một thành phần điều khiển lưới. Nó được dự kiến dành cho các cây, các danh sách và các bảng có thể được cập nhật bởi cả người dùng lẫn các kịch bản lệnh. Ngược lại, các bảng truyền thống chủ yếu được dự kiến dành cho dữ liệu tĩnh.

Một phần tử datagrid nhận dữ liệu ban đầu của nó từ các nội dung của nó, đó là một table, select (chọn) hoặc một nhóm các phần tử HTML khác. Ví dụ, Liệt kê 9 cho thấy một phần tử datagrid hoặc một nhóm các phần tử HTML khác. Trong ví dụ này, phần tử datagrid được điền dữ liệu từ một table. Một phần tử datagrid một chiều đơn giản hơn có thể được điền dữ liệu bởi một phần tử select. Nếu các phần tử HTML khác được sử dụng, thì mỗi phần tử con trở thành một hàng trong lưới đó.

Liệt kê 9. Một tờ bảng điểm datagrid

                
<datagrid>
  <table>
    <tr><td>Jones</td><td>Allison</td><td>A-</td><td>B+</td><td>A</td></tr>
    <tr><td>Smith</td><td>Johnny</td><td>A</td><td>C+</td><td>A</td></tr>
    <tr><td>Willis</td><td>Sydney</td><td>C-</td><td>D</td><td>F</td></tr>
    <tr><td>Wilson</td><td>Frank</td><td>B-</td><td>B+</td><td>A</td></tr>
  </table>
</datagrid>

Sự phận biệt giữa phần tử này với một bảng (table) thông thường là ở chỗ người dùng có thể chọn các hàng, các cột và các ô; che bớt các hàng, các cột và các ô; chỉnh sửa các ô; xóa các hàng, các cột và các ô; sắp xếp lưới; và mặt khác tương tác với các dữ liệu trực tiếp trong trình duyệt trên máy khách. Mã JavaScript theo dõi các bản cập nhật. Giao diện HTMLDataGridElement(Liệt kê 10) được thêm vào Document Object Model (DOM) để hỗ trợ điều này.

Liệt kê 10. HTMLDataGridElement

                
interface HTMLDataGridElement : HTMLElement {
           attribute DataGridDataProvider data;
  readonly attribute DataGridSelection selection;
           attribute boolean multiple;
           attribute boolean disabled;
  void updateEverything();
  void updateRowsChanged(in RowSpecification row, in unsigned long count);
  void updateRowsInserted(in RowSpecification row, in unsigned long count);
  void updateRowsRemoved(in RowSpecification row, in unsigned long count);
  void updateRowChanged(in RowSpecification row);
  void updateColumnChanged(in unsigned long column);
  void updateCellChanged(in RowSpecification row, in unsigned long column);
};

DOM cũng có thể được sử dụng để nạp động dữ liệu vào lưới. Tức là, phần tử datagrid không phải có phần tử con để cung cấp dữ liệu ban đầu. Thay vào đó, nó có thể được thiết lập với đối tượng DataGridDataProvider, như thể hiện trong Liệt kê 11. Điều này cho phép bạn tải dữ liệu từ các cơ sở dữ liệu, XmlHttpRequest hoặc bất cứ thứ gì khác mà mã JavaScript có thể nói chuyện với chúng.

Liệt kê 11. DataGridDataProvider

                
interface DataGridDataProvider {
  void initialize(in HTMLDataGridElement datagrid);
  unsigned long getRowCount(in RowSpecification row);
  unsigned long getChildAtPosition(in RowSpecification parentRow, 
      in unsigned long position);
  unsigned long getColumnCount();
  DOMString getCaptionText(in unsigned long column);
  void getCaptionClasses(in unsigned long column, in DOMTokenList classes);
  DOMString getRowImage(in RowSpecification row);
  HTMLMenuElement getRowMenu(in RowSpecification row);
  void getRowClasses(in RowSpecification row, in DOMTokenList classes);
  DOMString getCellData(in RowSpecification row, in unsigned long column);
  void getCellClasses(in RowSpecification row, in unsigned long column, 
      in DOMTokenList classes);
  void toggleColumnSortState(in unsigned long column);
  void setCellCheckedState(in RowSpecification row, in unsigned long column, 
      in long state);
  void cycleCell(in RowSpecification row, in unsigned long column);
  void editCell(in RowSpecification row, in unsigned long column, in DOMString data);
};

Phần tử menu và command

Phần tử menu đã thực sự có mặt trong HTML ít nhất là từ phiên bản 2. Nó đã bị phản đối trong HTML 4, nhưng nó quay lại trong HTML 5 với một ý nghĩa mới. Trong HTML 5, một phần tử menu chứa các phần tử command, mỗi phần tử command trong số đó gây ra một hành động ngay lập tức. Ví dụ, Liệt kê 12 là một phần tử menu bật lên các cảnh báo.

Liệt kê 12. Phần tử menu của HTML 5

                
<menu>
    <command onclick="alert('first command')"  label="Do 1st Command"/>
    <command onclick="alert('second command')" label="Do 2nd Command"/>
    <command onclick="alert('third command')"  label="Do 3rd Command"/>
</menu>

Các lệnh cũng có thể được chuyển thành các hộp kiểm tra với một thuộc tính checked="checked". Bạn có thể chuyển các hộp kiểm tra thành các nút ấn tròn bằng cách chỉ rõ một thuộc tính radiogroup có giá trị là tên của nhóm các nút ấn loại trừ lẫn nhau.

Ngoài danh sách đơn giản của các lệnh, bạn có thể sử dụng phần tử menu để tạo ra một thanh công cụ hoặc trình đơn ngữ cảnh bật lên bằng cách thiết lập thuộc tính type thành toolbar (thanh công cụ) hay popup (bật lên). Ví dụ, Liệt kê 13 cho thấy một thanh công cụ như bạn có thể tìm thấy trong một trình soạn thảo blog như WordPress. Nó sử dụng thuộc tính icon (biểu tượng) để liên kết đến các hình ảnh nút ấn.

Liệt kê 13. Phân tử toolbar của HTML 5 

                
<menu type="toolbar">
    <command onclick="insertTag(buttons, 0);"  label="strong" icon="bold.gif"/>
    <command onclick="insertTag(buttons, 1);"  label="em" icon="italic.gif"/>
    <command onclick="insertLink(buttons, 2);" label="link" icon="link.gif"/>
    <command onclick="insertTag(buttons, 3);"  label="b-quote" icon="blockquote.gif"/>
    <command onclick="insertTag(buttons, 4);"  label="del" icon="del.gif"/>
    <command onclick="insertTag(buttons, 5);"  label="ins" icon="insert.gif"/>
    <command onclick="insertImage(buttons);"   label="img" icon="image.gif"/>
    <command onclick="insertTag(buttons, 7);"  label="ul" icon="bullet.gif"/>
    <command onclick="insertTag(buttons, 8);"  label="ol" icon="number.gif"/>
    <command onclick="insertTag(buttons, 9);"  label="li" icon="item.gif"/>
    <command onclick="insertTag(buttons, 10);" label="code" icon="code.gif"/>
    <command onclick="insertTag(buttons, 11);" label="cite" icon="cite.gif"/>
    <command onclick="insertTag(buttons, 12);" label="abbr" icon="abbr.gif"/>
    <command onclick="insertTag(buttons, 13);" label="acronym" icon="acronym.gif"/>
</menu>

Thuộc tính label cung cấp một tiêu đề cho trình đơn. Ví dụ, Liệt kê 14 có thể là một trình đơn Edit.

Liệt kê 14. Trình đơn Edit của HTML 5

                
<menu type="popup" label="Edit">
    <command onclick="undo()"   label="Undo"/>
    <command onclick="redo()"   label="Redo"/>
    <command onclick="cut()"    label="Cut"/>
    <command onclick="copy()"   label="Copy"/>
    <command onclick="paste()"  label="Paste"/>
    <command onclick="delete()" label="Clear"/>
</menu>

Các trình đơn có thể được lồng vào bên trong các trình đơn khác để tạo các trình đơn có phân cấp.

Kết Luận

HTML 5 là một phần tương lai của Web. Các phần tử mới của nó cho phép đánh dấu rõ ràng hơn, đơn giản hơn, làm cho các trang hiển nhiên hơn. Phần tử div và span vẫn có chỗ của chúng, nhưng những chỗ đó sẽ bị hạn chế nhiều hơn nhiều so với trước đây. Nhiều trang sẽ không còn cần sử dụng chúng nữa.

Mặc dù không phải tất cả các trình duyệt đều sẽ hỗ trợ những phần tử mới này từ lúc đầu, điều tương tự đã đúng đối với hầu hết các phần tử được đưa vào sau khi HTML lần đầu tiên được phát minh: img, table, object và nhiều hơn nữa. Sự hỗ trợ sẽ đến với thời gian. Trong khi đó, hành vi phải-bỏ qua của HTML đối với các phần tử chưa được nhận biết có nghĩa là những người dùng với các trình duyệt cũ vẫn sẽ có thể đọc các trang HTML 5. Chúng có thể làm như vậy hiện nay. Những người dùng với các trình duyệt hiện đại hơn sẽ có được trải nghiệm nâng cao, nhưng không ai bị loại bỏ cả.

Tám năm là một thời gian dài chờ đợi những tính năng mới, đặc biệt là trong thế giới chuyển động nhanh của các trang web. HTML 5 khôi phục một số sự phấn khích của những ngày đầu khi Netscape, Microsoft và những công ty khác đã giới thiệu các phần tử mới mỗi tuần. Đồng thời, nó dùng một cách tiếp cận thận trọng hơn để định nghĩa những phần tử này để cho mọi người có thể sử dụng chúng một cách tương thích với nhau. Tương lai có vẻ tươi sáng.

Nguồn: IBM Việt Nam