Những thẻ mới trong HTML5

19/12/2012 22:01
Sự phát triển của HTML đã dừng lại vào năm 1999 với HTML4. W3C đã tạo nên sự thay đổi mạnh mẽ dựa theo cấu trúc của ngôn ngữ XML để tạo nên chuẩn web, tuy nhiên với phiên bản mới HTML5 sự đột phá sẽ trở nên thấy rõ nhất, có thể một vài thẻ cũ sẽ không tồn tại nữa thay vào đó là những thẻ mới và cũng có nhiều thẻ sẽ không mất đi mà được làm mới hơn.

Trong bài này tôi xin giới thiệu về một số thẻ mới trong HTML5 để bạn có một cái nhìn sơ qua về những gì mà HTML5 sẽ đem lại. Những thẻ cấu trúc mới bao gồm aside, figure, và session. Nhứng thẻ inline mới bao gồm time, meter, và progress. Những thẻ đa phương tiện mới bao gồm video và audio.

Sự phát triển của HTML đã dừng lại vào năm 1999 với HTML4. W3C đã tạo nên sự thay đổi mạnh mẽ dựa theo cấu trúc của ngôn ngữ XML để tạo nên chuẩn web, tuy nhiên với phiên bản mới HTML5 sự đột phá sẽ trở nên thấy rõ nhất, có thể một vài thẻ cũ sẽ không tồn tại nữa thay vào đó là những thẻ mới và cũng có nhiều thẻ sẽ không mất đi mà được làm mới hơn.

Vậy là các thẻ đánh dấu sẽ đa dạng hơn nhưng sẽ mang lại cho bạn sự tiện dụng hơn khi bạn không phải đặt một mớ thẻ div cùng với một mớ id và class một cách dày đặc, nhờ vậy cấu trúc đánh dấu sẽ trở nên rõ và giễ hiểu hơn.

HTML5 thêm một số thẻ mới đặc biệt để xác định những cấu trúc phổ biến như:
  • session: nó cũng giống như một phần hoặc một chương của một quyển sách, hay một đoạn trong một chương
  • header: phần đầu hiển thị trên trang, không giống như thẻ head
  • footer: phần dưới chân trang giống như chữ ký trong một thông điệp email
  • nav: một tập liên kết tới những trang khác.

Ví dụ sau chúng ta sẽ xem xét về sự khác biệt từ cách đánh dấu truyền thống và cách đánh dấu của HTML5.

Cách đánh dấu truyền thống:

01 html>
02 head>
03 title>Mokka mit Schlag title>
04 /head>
05 body>
06 div id="page">
07 div id="header">
08 h1><a href="http://www.elharo.com/blog">Mokka mit Schlaga>h1>
09 /div>
10 div id="container">
11 div id="center" class="column">
12 div class="post" id="post-1000572">
13 h2><a href=
14 "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
15 Spring Comes (and Goes) in Sussex Countya>h2>
16 div class="entry">
17 p>Yesterday I joined the Brooklyn Bird Club for our
18 annual trip to Western New Jersey, specifically Hyper
19 Humus, a relatively recently discovered hot spot. It
20 started out as a nice winter morning when we arrived
21 at the site at 7:30 A.M., progressed to Spring around
22 10:00 A.M., and reached early summer by 10:15. p>
23 /div>
24 /div>
25 div class="post" id="post-1000571">
26 h2><a href=
27 "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
28 But does it count for your life list?a>h2>
29 div class="entry">
30 p>Seems you can now go <a
32 2007/04/cone_sf">bird watching via the Interneta>. I
33 haven't been able to test it out yet (20 user
34 limit apparently) but this is certainly cool.
35 Personally, I can't imagine it replacing
36 actually being out in the field by any small amount.
37 On the other hand, I've always found it quite
38 sad to meet senior birders who are no longer able to
39 hold binoculars steady or get to the park. I can
40 imagine this might be of some interest to them. At
41 least one elderly birder did a big year on TV, after
42 he could no longer get out so much. This certainly
43 tops that.p>
44 /div>
45 /div>
46 /div>
47 div class="navigation">
48 div class="alignleft">
49 a href="/blog/page/2/">« Previous Entriesa>
50 /div>
51 div class="alignright">div>
52 /div>
53 /div>
54 div id="right" class="column">
55 ul id="sidebar">
56 li><h2>Infoh2>
57 ul>
58 li><a href="/blog/comment-policy/">Comment Policya>li>
59 li><a href="/blog/todo-list/">Todo Lista>li>
60 /ul>li>
61 li><h2>Archivesh2>
62 ul>
63 li><a href='/blog/2007/04/'>April 2007a>li>
64 li><a href='/blog/2007/03/'>March 2007a>li>
65 li><a href='/blog/2007/02/'>February 2007a>li>
66 li><a href='/blog/2007/01/'>January 2007a>li>
67 /ul>
68 /li>
69 /ul>
70 /div>
71 div id="footer">
72 p>Copyright 2007 Elliotte Rusty Haroldp>
73 /div>
74 /div>
75 /body>
76 /html>

Cách đánh dấu của HTML5:

01 html>
02 head>
03 title>Mokka mit Schlag title>
04 /head>
05 body>
06 header>
07 h1><a href="http://www.elharo.com/blog">Mokka mit Schlaga>h1>
08 /header>
09 section>
10 article>
11 h2><a href=
12 "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
13 Spring Comes (and Goes) in Sussex Countya>h2>
14 p>Yesterday I joined the Brooklyn Bird Club for our
15 annual trip to Western New Jersey, specifically Hyper
16 Humus, a relatively recently discovered hot spot. It
17 started out as a nice winter morning when we arrived at
18 the site at 7:30 A.M., progressed to Spring around 10:00
19 A.M., and reached early summer by 10:15. p>
20 /article>
21 article>
22 h2><a href=
23 "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
24 But does it count for your life list?a>h2>
25 p>Seems you can now go <a
27 2007/04/cone_sf">bird watching via the Interneta>. I
28 haven't been able to test it out yet (20 user
29 limit apparently) but this is certainly cool.
30 Personally, I can't imagine it replacing
31 actually being out in the field by any small amount.
32 On the other hand, I've always found it quite
33 sad to meet senior birders who are no longer able to
34 hold binoculars steady or get to the park. I can
35 imagine this might be of some interest to them. At
36 least one elderly birder did a big year on TV, after
37 he could no longer get out so much. This certainly
38 tops that.p>
39 /article>
40 nav>
41 a href="/blog/page/2/">« Previous Entriesa>
42 /nav>
43 /section>
44 nav>
45 ul>
46 li><h2>Infoh2>
47 ul>
48 li><a href="/blog/comment-policy/">Comment Policya>li>
49 li><a href="/blog/todo-list/">Todo Lista>li>
50 /ul>li>
51 li><h2>Archivesh2>
52 ul>
53 li><a href='/blog/2007/04/'>April 2007a>li>
54 li><a href='/blog/2007/03/'>March 2007a>li>
55 li><a href='/blog/2007/02/'>February 2007a>li>
56 li><a href='/blog/2007/01/'>January 2007a>li>
57 /ul>
58 /li>
59 /ul>
60 /nav>
61 footer>
62 p>Copyright 2007 Elliotte Rusty Haroldp>
63 /footer>
64 /body>
65 /html>

Ta có thể thấy cách đánh dấu dùng HTML5 ở ví dụ trên không cần đến bất kỳ thẻ div nào, đồng thời giản lược được việc dùng thuộc tính id và class, thay vào đó là những tên thẻ được chuẩn hóa, đây là điều quan trọng và rất tiến bộ.

Những thẻ dạng khối (Block)

aside

thẻ aside dùng để miêu tả một ghi chú, hay một phần phụ của nội dung chính như ví dụ sau

01 aside>
02 h3>.xf-valueh3>
03 p>
04 The <code type="inline">.xf-valuecode> selector used here styles the input
05 field value but not its label. This is actually inconsistent
06 with the current CSS3 draft. The example really should use the
07 code type="inline">::valuecode> pseudo-class instead like so:
08 /p>
09 pre class="displaycode">input::value { width: 20em; }
10 #ccnumber::value { width: 18em }
11 #zip::value { width: 12em }
12 #state::value { width: 3em }pre>
13 p>
14 However, Firefox doesn't yet support this syntax.
15 /p>
16 /aside>

figure

Thẻ dùng để thể hiện một khối hình ảnh cùng với miêu tả như ví dụ sau

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

Thẻ figure không giới hạn hình ảnh, bạn cũng có thể dùng nó để miêu tả cho các thẻ audio, video, iframe, object, và các thẻ embed.

dialog

Thẻ dùng để miêu tả cuộc đối thoại của một vài người, thẻ dt trong HTML5 cho biết người nói, và thẻ dd cho biết đoạn nội dung đối thoại, bạn có thể xem xét ví dụ sau.

01 dialog>
02 dt>Simplicius dt>
03 dd>According to the straight line AF,
04 and not according to the curve, such being already excluded
05 for such a use.dd>
06 dt>Sagredo dt>
07 dd>But I should take neither of them,
08 seeing that the straight line AF runs obliquely. I should
09 draw a line perpendicular to CD, for this would seem to me
10 to be the shortest, as well as being unique among the
11 infinite number of longer and unequal ones which may be
12 drawn from the point A to every other point of the opposite
13 line CD. dd>
14 dt>Salviati dt>
15 dd><p> Your choice and the reason you
16 adduce for it seem to me most excellent. So now we have it
17 that the first dimension is determined by a straight line;
18 the second (namely, breadth) by another straight line, and
19 not only straight, but at right angles to that which
20 determines the length. Thus we have defined the two
21 dimensions of a surface; that is, length and breadth. p>
22 p> But suppose you had to determine a height—for
23 example, how high this platform is from the pavement down
24 below there. Seeing that from any point in the platform we
25 may draw infinite lines, curved or straight, and all of
26 different lengths, to the infinite points of the pavement
27 below, which of all these lines would you make use of? p>
28 /dd>
29 /dialog>

Những thẻ dạng trong dòng (inline)

Thẻ m (mark)

Bạn có thể tưởng tượng như bạn muốn đánh dấu một điều gì đó lặp lại trong một cuốn sách nhằm mục đích làm nổi bật, như ví dụ sau.

1 The Great <m>Egretm> (also known as the
2 American <m>Egretm>) is a large white wading bird found worldwide.
3 The Great <m>Egretm> flies with slow wing beats. The
4 scientific name of the Great <m>Egretm> is <i>Casmerodius
5 albusi>.

Thẻ time

Dùng để chỉ thời gian

1 p>I am writing this example at
2 time>5:35 P.M. on April 23rdtime>.
3 /p>

Thẻ meter

Thẻ dùng để chỉ giá trị dạng số của một phạm vi nào đó, như ví dụ sau.