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.

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

31
href="/http://www.wired.com/science/discoveries/news/

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

26
href="/http://www.wired.com/science/discoveries/news/

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.

Bảng giá Website

Bảng giá dịch vụ

Hỗ trợ trực tuyến

Kinh Doanh
093.93.93.324
0979.05.26.87
Kĩ Thuật
0988.33.82.92

Nhập email vào form bên dưới để nhận những thông tin mới nhất từ công ty chúng tôi !