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

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 Mokka mit Schlag Mokka mit Schlag <a href= "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/"> Spring Comes (and Goes) in Sussex County 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. <a href= "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/"> But does it count for your life list? Seems you can now go <a href=" 2007/04/cone_sf">bird watching via the Internet. 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. « Previous Entries Info Comment Policy Todo List Archives April 2007 March 2007 February 2007 January 2007 Copyright 2007 Elliotte Rusty Harold 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 Mokka mit Schlag Mokka mit Schlag <a href= "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/"> Spring Comes (and Goes) in Sussex County 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. <a href= "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/"> But does it count for your life list? Seems you can now go <a href=" 2007/04/cone_sf">bird watching via the Internet. 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. « Previous Entries Info Comment Policy Todo List Archives April 2007 March 2007 February 2007 January 2007 Copyright 2007 Elliotte Rusty Harold 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 .xf-value The .xf-value 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 ::value pseudo-class instead like so: input::value { width: 20em; } #ccnumber::value { width: 18em } #zip::value { width: 12em } #state::value { width: 3em } However, Firefox doesn't yet support this syntax. 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 .xf-value The .xf-value 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 ::value pseudo-class instead like so: input::value { width: 20em; } #ccnumber::value { width: 18em } #zip::value { width: 12em } #state::value { width: 3em } However, Firefox doesn't yet support this syntax. 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 Figure 2. Install Mozilla XForms dialog <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" /> 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 2. Install Mozilla XForms dialog <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" /> 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 Simplicius According to the straight line AF, and not according to the curve, such being already excluded for such a use. Sagredo 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. Salviati 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. 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? 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 Egret (also known as the American Egret) is a large white wading bird found worldwide. The Great Egret flies with slow wing beats. The scientific name of the Great Egret is Casmerodius albus. 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ụ, I am writing this example at 5:35 P.M. on April 23rd. 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: I am writing this example at 5:35 P.M. on April 23rd. 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: An entry level programmer in Silicon Valley can expect to start around $90,000 per year. 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: Your score was <meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+. Đ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%: Downloaded: 33% 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: 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