- Tham gia
- 28/02/2015
- Bài viết
- 17,142
- Được Like
- 12,745
Giới thiệu một số thẻ mới trong HTML5
Trong bài này mình 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à dễ 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ư:
Cách đánh dấu truyền thống:
Cách đánh dấu của HTML5:
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:
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:
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:
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:
Thẻ time
Dùng để chỉ thời gian:
Thẻ meter
Thẻ dùng để chỉ giá trị dạng số của một phạm vi nào đó, như ví dụ sau:
Thẻ meter có 6 thuộc tính phổ biến để miêu tả thông tin:
Giải thích các thuộc tính trên như sau: ví dụ điểm số của một người xếp B+ là 88,7, thang điểm từ 0 tới 100, trong đó có người điểm thấp nhất là 65, cao nhất là 96, optimum chỉ điểm tuyệt đối là 100.
Thẻ progress
Dùng để thể hiện trạng thái của một quá trình xử lý. Nó có thể để biểu hiện trạng thái phần trăm của một tập tin đang được tải hoặc một bộ phim đang được xử lý.
Thuộc tính value chỉ giá trị hiện tại, max chỉ giá trị tối đa như ở trên miêu tả quá trình đã tải được 1,534,602 bytes trong tổng số 4,603,807 bytes.
Embedded media
Video trên web đang phát triển bùng nổ, Youtube sử dụng Flash, Microsoft sử dụng Windows Media®, và Apple sử QuickTime. Với HTML5 việc chèn đa phương tiện vào web trở nên vô cùng đơn giản như bạn chèn hình ảnh vào trang web vậy.
Bạn có thể đặt nội dung vào giửa thẻ mở và thẻ đóng để mô tả cho bài hát hoặc đoạn phim.
Kết luận
HTML5 là một phần của tương lai web, các thẻ mới cho phép đánh dấu rõ ràng hơn, div và span vẫn tồn tại nhưng nhiều trang sẽ không còn dùng tới chúng nữa. Mặc dù không phải tất cả các trình duyệt sẽ sử dụng thẻ mới ngay phiên bản đầu tiên hỗ trợ HTML5, nhưng vấn đề chỉ là thời gian để làm nên sự thay đổi. HTML có thể bỏ qua các thẻ mà chúng không hiểu nhưng bạn vẫn có thể đọc các trang HTML5. Người dùng đang chuyển dần sang các trình duyệt hiện đại để có được trải nghiệm chất lượng hơn.
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 trong thể giới chuyển động nhanh của web, nhưng chúng ta cần thời gian để các nhà phát triển hoàn thiện HTML5 và các hãng phần mềm tiếp nhận những tính năng mới để hoàn thiện cho người dùng.
Chúc các bạn thành công.
Trong bài này mình 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à dễ 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.
Cách đánh dấu truyền thống:
Mã:
<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/">« 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>Cách đánh dấu của HTML5:
Mã:
<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/">« 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>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:
Mã:
<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>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:
Mã:
<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>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:
Mã:
<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>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:
Mã:
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>.Thẻ time
Dùng để chỉ thời gian:
Mã:
<p>I am writing this example at
<time>5:35 P.M. on April 23rd</time>.
</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:
Mã:
<p>An entry level programmer in Silicon Valley
can expect to start around <meter>$90,000</meter> per year.
</p>Thẻ meter có 6 thuộc tính phổ biến để miêu tả thông tin:
Mã:
<p>Your score was
<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.
</p>Giải thích các thuộc tính trên như sau: ví dụ điểm số của một người xếp B+ là 88,7, thang điểm từ 0 tới 100, trong đó có người điểm thấp nhất là 65, cao nhất là 96, optimum chỉ điểm tuyệt đối là 100.
Thẻ progress
Dùng để thể hiện trạng thái của một quá trình xử lý. Nó có thể để biểu hiện trạng thái phần trăm của một tập tin đang được tải hoặc một bộ phim đang được xử lý.
Mã:
<p>Downloaded:
<progress value="1534602" max="4603807">33%</progress>
</p>Thuộc tính value chỉ giá trị hiện tại, max chỉ giá trị tối đa như ở trên miêu tả quá trình đã tải được 1,534,602 bytes trong tổng số 4,603,807 bytes.
Embedded media
Video trên web đang phát triển bùng nổ, Youtube sử dụng Flash, Microsoft sử dụng Windows Media®, và Apple sử QuickTime. Với HTML5 việc chèn đa phương tiện vào web trở nên vô cùng đơn giản như bạn chèn hình ảnh vào trang web vậy.
Mã:
<video src="http://www.cafeaulait.org/birds/sora.mov" />
<audio src="spacemusic.mp3"
autoplay="autoplay" loop="20000" />Bạn có thể đặt nội dung vào giửa thẻ mở và thẻ đóng để mô tả cho bài hát hoặc đoạn phim.
Mã:
<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>
...
</p>
</audio>Kết luận
HTML5 là một phần của tương lai web, các thẻ mới cho phép đánh dấu rõ ràng hơn, div và span vẫn tồn tại nhưng nhiều trang sẽ không còn dùng tới chúng nữa. Mặc dù không phải tất cả các trình duyệt sẽ sử dụng thẻ mới ngay phiên bản đầu tiên hỗ trợ HTML5, nhưng vấn đề chỉ là thời gian để làm nên sự thay đổi. HTML có thể bỏ qua các thẻ mà chúng không hiểu nhưng bạn vẫn có thể đọc các trang HTML5. Người dùng đang chuyển dần sang các trình duyệt hiện đại để có được trải nghiệm chất lượng hơn.
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 trong thể giới chuyển động nhanh của web, nhưng chúng ta cần thời gian để các nhà phát triển hoàn thiện HTML5 và các hãng phần mềm tiếp nhận những tính năng mới để hoàn thiện cho người dùng.
Chúc các bạn thành công.
Nguồn: sothichweb.com
Bài viết liên quan
Bài viết mới
