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:
03 |
title >Mokka mit Schlag title > |
11 |
div id = "center" class = "column" > |
12 |
div class = "post" id = "post-1000572" > |
14 |
"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/" > |
15 |
Spring Comes (and Goes) in Sussex Countya > h2 > |
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 > |
25 |
div class = "post" id = "post-1000571" > |
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 > |
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 |
47 |
div class = "navigation" > |
48 |
div class = "alignleft" > |
49 |
a href = "/blog/page/2/" >« Previous Entriesa > |
51 |
div class = "alignright" > div > |
54 |
div id = "right" class = "column" > |
58 |
li >< a href = "/blog/comment-policy/" >Comment Policya > li > |
59 |
li >< a href = "/blog/todo-list/" >Todo Lista > li > |
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 > |
72 |
p >Copyright 2007 Elliotte Rusty Haroldp > |
Cách đánh dấu của HTML5:
03 |
title >Mokka mit Schlag title > |
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 > |
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 |
41 |
a href = "/blog/page/2/" >« Previous Entriesa > |
48 |
li >< a href = "/blog/comment-policy/" >Comment Policya > li > |
49 |
li >< a href = "/blog/todo-list/" >Todo Lista > li > |
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 > |
62 |
p >Copyright 2007 Elliotte Rusty Haroldp > |
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
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: |
09 |
pre class = "displaycode" >input::value { width: 20em; } |
10 |
#ccnumber::value { width: 18em } |
11 |
#zip::value { width: 12em } |
12 |
#state::value { width: 3em }pre > |
14 |
However, Firefox doesn't yet support this syntax. |
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
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" |
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.
03 |
dd >According to the straight line AF, |
04 |
and not according to the curve, such being already excluded |
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 |
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 > |
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 |
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 >. |
Thẻ meter
Thẻ dùng để chỉ giá trị dạng số của một phạm vi nào đó, như ví dụ sau.