Các phần tử mới trong HTML 5 pdf

Các phần tử mới trong HTML 5
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.
Các từ viết tắt thông dụng
 CSS: Cascading Style Sheets (Các bản định kiểu xếp chồng)
 HTML: Hypertext Markup Language (Ngôn ngữ đánh dấu siêu văn bản)
 W3C: World Wide Web Consortium (Hiệp hội Mạng toàn cầu)
 XML: Extensible Markup Language (Ngôn ngữ đánh dấu mở rộng)
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.
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ột table.
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=" 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="
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=" 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="
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.
Về đầu trang
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="" //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"
nstalldialog.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.
Về đầu trang
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.
Về đầu trang
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=" />


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.

Liệt kê 8. Bài diễn văn nhậm chức của John F. Kennedy theo HTML 5

<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>

Về đầu trang
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ử details
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.
Về đầu trang
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.