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

ầ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 trình duyệt cũ hỗ trợ và có thể không truy cập được với 
người dùng khiếm thị và khiếm thính, các phần tử audio và video có thể chứa đánh dấu bổ sung 
để mô tả nội dung của âm thanh và video. Điều này cũng giúp các công cụ tìm kiếm. Lý tưởng là 
sẽ có các bản ghi đầy đủ các nội dung của âm thanh và video. Ví dụ, Liệt kê 8 cho thấy bạn có 
thể đánh dấu bài diễn văn nhậm chức của John F. Kennedy như thế nào. 
Liệt kê 8. Bài diễn văn nhậm chức của John F. Kennedy theo HTML 5 
 Vice President Johnson, Mr. Speaker, Mr. Chief Justice, 
 President Eisenhower, Vice President Nixon, President Truman, 
 Reverend Clergy, fellow citizens: 
 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. 
 The world is very different now. For man holds in his mortal 
 hands the power to abolish all forms of human poverty and all 
 forms of human life. And yet the same revolutionary beliefs for 
 which our forebears fought are still at issue around the globe -- 
 the belief that the rights of man come not from the 
 generosity of the state, but from the hand of God. 
 ... 
Về đầu trang 
Tương tác 
HTML 5 cũng nằm trong chuyên mục Các ứng dụng web 1.0. Hướng tới mục tiêu đó, một số 
phần tử mới được tập trung vào các trải nghiệm tương tác nhiều hơn cho các trang web: 
  details 
  datagrid 
  menu 
  command 
Tất cả các phần tử này đều có khả năng thay đổi những gì được hiển thị dựa trên hành động và 
sự lựa chọn của người dùng mà không cần tải một trang mới từ máy chủ. 
Phần tử details 
Phần tử details mô tả thông tin bổ sung có thể không được hiển thị theo mặc định. Một phần tử 
legend (lời ghi chú) tùy chọn có thể tóm tắt các chi tiết. Một cách sử dụng các phần tử details là 
dùng cho các chú thích cuối trang và các chú thích cuối bài. Ví dụ: 
The bill of a Craveri's Murrelet is about 10% thinner 
than the bill of a Xantus's Murrelet. 
[Sibley, 2000] 
Sibley, David Allen, The Sibley Guide to Birds, 
(New York: Chanticleer Press, 2000) p. 247 
Việc biểu diễn chính xác không được quy định rõ. Một trình duyệt có thể sử dụng một chú thích 
cuối trang, trình duyệt khác sử dụng một chú thích cuối bài và trình duyệt thứ ba sử dụng một 
chú giải công cụ. 
Mỗi phần tử details có thể có một thuộc tính open. Nếu nó có thuộc tính này, thì các chi tiết sẽ 
được hiển thị cho người đọc ngay từ đầu. Nếu nó không có một thuộc tính như vậy, thì các chi 
tiết sẽ được ẩn giấu cho đến khi người dùng yêu cầu chúng. Trong cả hai trường hợp, người dùng 
có thể nhấn chuột vào một biểu tượng hoặc một yếu tố chỉ thị khác để hiển thị hoặc ẩn các chi 
tiết. 
Phần tử datagrid 
Phần tử datagrid đóng vai trò một thành phần điều khiển lưới. Nó được dự kiến dành cho các 
cây, các danh sách và các bảng có thể được cập nhật bởi cả người dùng lẫn các kịch bản lệnh. 
Ngược lại, các bảng truyền thống chủ yếu được dự kiến dành cho dữ liệu tĩnh. 
Một phần tử datagrid nhận dữ liệu ban đầu của nó từ các nội dung của nó, đó là một table, 
select (chọn) hoặc một nhóm các phần tử HTML khác. Ví dụ, Liệt kê 9 cho thấy một phần tử 
datagrid hoặc một nhóm các phần tử HTML khác. Trong ví dụ này, phần tử datagrid được điền 
dữ liệu từ một table. Một phần tử datagrid một chiều đơn giản hơn có thể được điền dữ liệu 
bởi một phần tử select. Nếu các phần tử HTML khác được sử dụng, thì mỗi phần tử con trở 
thành một hàng trong lưới đó. 
Liệt kê 9. Một tờ bảng điểm datagrid 
 JonesAllisonA-B+A 
 SmithJohnnyAC+A 
 WillisSydneyC-DF 
 WilsonFrankB-B+A 
Sự phận biệt giữa phần tử này với một bảng (table) thông thường là ở chỗ người dùng có thể 
chọn các hàng, các cột và các ô; che bớt các hàng, các cột và các ô; chỉnh sửa các ô; xóa các 
hàng, các cột và các ô; sắp xếp lưới; và mặt khác tương tác với các dữ liệu trực tiếp trong trình 
duyệt trên máy khách. Mã JavaScript theo dõi các bản cập nhật. Giao diện 
HTMLDataGridElement (Liệt kê 10) được thêm vào Document Object Model (DOM) để hỗ trợ 
điều này. 
Liệt kê 10. HTMLDataGridElement 
interface HTMLDataGridElement : HTMLElement { 
 attribute DataGridDataProvider data; 
 readonly attribute DataGridSelection selection; 
 attribute boolean multiple; 
 attribute boolean disabled; 
 void updateEverything(); 
 void updateRowsChanged(in RowSpecification row, in unsigned long count); 
 void updateRowsInserted(in RowSpecification row, in unsigned long count); 
 void updateRowsRemoved(in RowSpecification row, in unsigned long count); 
 void updateRowChanged(in RowSpecification row); 
 void updateColumnChanged(in unsigned long column); 
 void updateCellChanged(in RowSpecification row, in unsigned long column); 
}; 
DOM cũng có thể được sử dụng để nạp động dữ liệu vào lưới. Tức là, phần tử datagrid không 
phải có phần tử con để cung cấp dữ liệu ban đầu. Thay vào đó, nó có thể được thiết lập với đối 
tượng DataGridDataProvider, như thể hiện trong Liệt kê 11. Điều này cho phép bạn tải dữ liệu 
từ các cơ sở dữ liệu, XmlHttpRequest hoặc bất cứ thứ gì khác mà mã JavaScript có thể nói 
chuyện với chúng. 
Liệt kê 11. DataGridDataProvider 
interface DataGridDataProvider { 
 void initialize(in HTMLDataGridElement datagrid); 
 unsigned long getRowCount(in RowSpecification row); 
 unsigned long getChildAtPosition(in RowSpecification parentRow, 
 in unsigned long position); 
 unsigned long getColumnCount(); 
 DOMString getCaptionText(in unsigned long column); 
 void getCaptionClasses(in unsigned long column, in DOMTokenList classes); 
 DOMString getRowImage(in RowSpecification row); 
 HTMLMenuElement getRowMenu(in RowSpecification row); 
 void getRowClasses(in RowSpecification row, in DOMTokenList classes); 
 DOMString getCellData(in RowSpecification row, in unsigned long column); 
 void getCellClasses(in RowSpecification row, in unsigned long column, 
 in DOMTokenList classes); 
 void toggleColumnSortState(in unsigned long column); 
 void setCellCheckedState(in RowSpecification row, in unsigned long column, 
 in long state); 
 void cycleCell(in RowSpecification row, in unsigned long column); 
 void editCell(in RowSpecification row, in unsigned long column, in 
DOMString data); 
}; 
Phần tử menu và command 
Phần tử menu đã thực sự có mặt trong HTML ít nhất là từ phiên bản 2. Nó đã bị phản đối trong 
HTML 4, nhưng nó quay lại trong HTML 5 với một ý nghĩa mới. Trong HTML 5, một phần tử 
menu chứa các phần tử command, mỗi phần tử command trong số đó gây ra một hành động ngay 
lập tức. Ví dụ, Liệt kê 12 là một phần tử menu bật lên các cảnh báo. 
Liệt kê 12. Phần tử menu của HTML 5 
Các lệnh cũng có thể được chuyển thành các hộp kiểm tra với một thuộc tính 
checked="checked". Bạn có thể chuyển các hộp kiểm tra thành các nút ấn tròn bằng cách chỉ rõ 
một thuộc tính radiogroup có giá trị là tên của nhóm các nút ấn loại trừ lẫn nhau. 
Ngoài danh sách đơn giản của các lệnh, bạn có thể sử dụng phần tử menu để tạo ra một thanh 
công cụ hoặc trình đơn ngữ cảnh bật lên bằng cách thiết lập thuộc tính type thành toolbar 
(thanh công cụ) hay popup (bật lên). Ví dụ, Liệt kê 13 cho thấy một thanh công cụ như bạn có 
thể tìm thấy trong một trình soạn thảo blog như WordPress. Nó sử dụng thuộc tính icon (biểu 
tượng) để liên kết đến các hình ảnh nút ấn. 
Liệt kê 13. Phân tử toolbar của HTML 5 
 <command onclick="insertTag(buttons, 0);" label="strong" 
icon="bold.gif"/> 
 <command onclick="insertTag(buttons, 3);" label="b-quote" 
icon="blockquote.gif"/> 
 <command onclick="insertTag(buttons, 5);" label="ins" 
icon="insert.gif"/> 
 <command onclick="insertTag(buttons, 13);" label="acronym" 
icon="acronym.gif"/> 
Thuộc tính label cung cấp một tiêu đề cho trình đơn. Ví dụ, Liệt kê 14 có thể là một trình đơn 
Edit. 
Liệt kê 14. Trình đơn Edit của HTML 5 
Các trình đơn có thể được lồng vào bên trong các trình đơn khác để tạo các trình đơn có phân 
cấp. 
Về đầu trang 
Kết luận 
HTML 5 là một phần tương lai của Web. Các phần tử mới của nó cho phép đánh dấu rõ ràng 
hơn, đơn giản hơn, làm cho các trang hiển nhiên hơn. Phần tử div và span vẫn có chỗ của 
chúng, nhưng những chỗ đó sẽ bị hạn chế nhiều hơn nhiều so với trước đây. Nhiều trang sẽ 
không còn cần sử dụng chúng nữa. 
Mặc dù không phải tất cả các trình duyệt đều sẽ hỗ trợ những phần tử mới này từ lúc đầu, điều 
tương tự đã đúng đối với hầu hết các phần tử được đưa vào sau khi HTML lần đầu tiên được phát 
minh: img, table, object và nhiều hơn nữa. Sự hỗ trợ sẽ đến với thời gian. Trong khi đó, hành 
vi phải-bỏ qua của HTML đối với các phần tử chưa được nhận biết có nghĩa là những người 
dùng với các trình duyệt cũ vẫn sẽ có thể đọc các trang HTML 5. Chúng có thể làm như vậy hiện 
nay. Những người dùng với các trình duyệt hiện đại hơn sẽ có được trải nghiệm nâng cao, nhưng 
không ai bị loại bỏ cả. 
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 là trong thế giới chuyển 
động nhanh của các trang web. HTML 5 khôi phục một số sự phấn khích của những ngày đầu 
khi Netscape, Microsoft và những công ty khác đã giới thiệu các phần tử mới mỗi tuần. Đồng 
thời, nó dùng một cách tiếp cận thận trọng hơn để định nghĩa những phần tử này để cho mọi 
người có thể sử dụng chúng một cách tương thích với nhau. Tương lai có vẻ tươi sáng.