Kênh thời sự tổng hợp VTV1

-Kênh VTV1 - Thời Sự Tổng Hợp

Kênh giải trí tổng hợp VTV3 HD

 - Thể Thao Giải Trí Tổng Hợp

Tìm hiểu HTML5 trong 5 phút!

Không có câu hỏi, HTML5 là một chủ đề nóng cho các nhà phát triển. Nếu bạn cần một khóa học sụp đổ để nhanh chóng hiểu những nguyên tắc cơ bản của chức năng HTML5, bạn đang ở đúng nơi. 

Tôi sẽ bao gồm các đánh dấu ngữ nghĩa mới, vải để vẽ và hình ảnh động, âm thanh và video hỗ trợ, và làm thế nào để sử dụng HTML5 với các trình duyệt cũ. Có thể nhiều hơn một chút so với năm phút, nhưng tôi hứa tôi sẽ giữ nó nhanh chóng. Gắn bó với tôi ... nó sẽ được giá trị nó!

Giao diện và đánh dấu trang ngữ nghĩa

Có một câu chuyện tuyệt vời về một đại học , khi xây dựng khuôn viên của họ, không tạo ra bất kỳ con đường đi bộ . Họ chỉ trồng cỏ và chờ đợi.

Một năm sau, cỏ đã được tất cả các mòn nơi người ta đi bộ thường xuyên nhất. Vì vậy, đó là nơi mà các trường đại học mở vỉa hè thực tế .

Nó làm cho cảm giác hoàn hảo ! Vỉa hè là chính xác nơi mà người dân thực sự bước đi.

HTML5 yếu tố ngữ nghĩa mới được dựa trên đó cùng một logic chính xác (xem hướng dẫn thiết kế W3C để " Pave các Cowpaths " ) .

Các yếu tố ngữ nghĩa mô tả ý nghĩa hay mục đích của họ rõ ràng để trình duyệt và các nhà phát triển . Ngược lại rằng với (ví dụ) các thẻ <div> . Các thẻ <div> định nghĩa một bộ phận hoặc một phần trong một tài liệu HTML , nhưng nó không cho chúng tôi bất cứ điều gì về nội dung của nó hoặc truyền tải bất kỳ ý nghĩa rõ ràng.

Các nhà phát triển thường sử dụng ID và / hoặc tên lớp với các thẻ <div>. Điều này truyền tải ý nghĩa hơn để các nhà phát triển , nhưng không may, nó không giúp trình duyệt lấy được mục đích đánh dấu đó.

Trong HTML5, có những yếu tố ngữ nghĩa phong phú mới có thể truyền đạt mục đích của các yếu tố để cả hai nhà phát triển và các trình duyệt .

W3C khai thác hàng tỷ trang web hiện có để khám phá các ID và tên lớp các nhà phát triển đã được sử dụng . Một khi họ đã ném ra div1 , div2 , vv, họ đã đưa ra một danh sách các yếu tố mô tả phong phú đã được đã được sử dụng , và thực hiện những tiêu chuẩn.

Dưới đây là một vài trong số các yếu tố ngữ nghĩa mới trong HTML5 :

bài viết

sang một bên

figcaption

con số

chân

tiêu đề

hgroup

đánh dấu

nav

phần

thời gian

Vì sự phong phú ngữ nghĩa, bạn có thể đoán những gì hầu hết các yếu tố làm .

Nhưng chỉ trong trường hợp , đây là một hình dung :

Đầu và cuối trang là tự giải thích và nav tạo ra một chuyển hướng hoặc thanh menu . Bạn có thể sử dụng các phần và các nhóm nội dung của bạn . Cuối cùng, các yếu tố ngoài có thể được sử dụng cho nội dung thứ cấp , ví dụ, như một bên của các liên kết có liên quan.

Đây là một ví dụ đơn giản của một số mã có sử dụng các yếu tố này .

Tôi nên gọi ra một vài yếu tố mới khác trong mã này ...

Bạn có nhận thấy các yếu tố hgroup , mà nhóm lại với nhau h1 của tôi và các tiêu đề h2 ?

Các yếu tố đánh dấu cho phép tôi để làm nổi bật hoặc đánh dấu một số văn bản quan trọng. Cuối cùng, các yếu tố hình và figcaption chỉ định một con số trong nội dung của tôi ( như một hình ảnh, sơ đồ , hình ảnh, đoạn mã , vv) và hãy để tôi kết hợp một chú thích với con số tương ứng .

Đây là những gì trang web đó sẽ như thế nào khi kết hợp với một số CSS. (Chú ý: . Tôi mượn CSS này từ đồng đội tài năng của tôi Brandon Satrom của TechEd nói chuyện , nhưng hiệu quả cuối ít hơn, đẹp là tất cả tôi )

Bây giờ , hãy tưởng tượng này trong tay của một người nào đó thực sự tốt ở CSS ( mà tôi không ) . Kết quả là khá mạnh mẽ . Các descriptiveness của HTML làm cho nó siêu dễ dàng để làm việc với.

Cuối cùng, nếu bạn đang cố gắng để làm theo cùng trong Visual Studio nhưng bạn nhìn thấy dòng nguệch ngoạc ở khắp mọi nơi mà VS không hiểu các yếu tố HTML5, chắc chắn rằng bạn có Visual Studio2010 SP1installed .

Sau đó , trong menu Visual Studio, hãy vào Tools , Options. Trong cửa sổ chuyển hướng bên trái , mở rộng Text Editor , HTML, và sau đó nhấp vào Xác Nhận. Từ trình đơn thả xuống mục tiêu , chọn HTML5. Điều này sẽ cung cấp cho bạn hỗ trợ HTML5 IntelliSense . Phù!

Lặn sâu hơn vào yếu tố ngữ nghĩa , hãy kiểm tra :

Làm thế nào để Kích hoạt tính năng hỗ trợ chuẩn HTML5

Phần ngữ nghĩa của các đặc điểm kỹ thuật W3C HTML5

Nhảy vào HTML5 chương về ngữ nghĩa mang tên " What Does It All nghĩa là gì? "

Vẽ trong HTML5 sử dụng phần tử Canvas

Một yếu tố mới trong HTML5 là thẻ < vải > . Nó chỉ là những gì nó giống như âm thanh - một bề mặt trống để vẽ . Bạn cần phải sử dụng JavaScript để thao tác và vẽ trên vải.

Bạn có thể muốn cung cấp cho canvas của bạn một thuộc tính id để bạn lập trình có thể truy cập nó từ mã JavaScript của bạn (hoặc nếu bạn đang sử dụng jQuery và đó là vải chỉ trên trang web, bạn có thể truy cập nó bằng cách sử dụng $ (' vải' ) mà không cần phải đặt tên cho nó ) .

Bạn cũng có thể (tùy chọn) chỉ định một chiều cao và chiều rộng cho khung hình. Giữa <canvas> và </ canvas >, bạn có thể chỉ định một số văn bản để hiển thị trong các trình duyệt không hỗ trợ canvas .

Đây là một ví dụ đơn giản của việc sử dụng vải để vẽ . ( Tôi đang cố gắng để vẽ lá cờ của Scotland. Hãy tha thứ cho bất kỳ sự thiếu chính xác . )

Đây là những gì các mã sản xuất :

Bây giờ chúng ta hãy đi bộ qua các mã.

Trước tiên, tôi tạo ra bức tranh thực tế và cung cấp cho nó một ID của " myCanvas " . Nếu mã này đã được xem trong một trình duyệt không hỗ trợ canvas HTML5, nó sẽ hiển thị " Trình duyệt của bạn không hỗ trợ thẻ canvas " thay vì vẽ lá cờ.

Tiếp theo, tôi có một kịch bản . Nhớ , thẻ vải chỉ là một container cho đồ họa ; bạn phải sử dụng Javascript để thực sự thu hút và làm đồ họa trên nó . Trước tiên, tôi lấy một tham chiếu đến vải bằng cách sử dụng " myCanvas " ID , và sau đó nhận được bối cảnh của vải cung cấp phương pháp / tài sản cho các bản vẽ và thao tác đồ họa trên vải. Tôi đã chỉ định " 2d " sử dụng một bối cảnh 2 chiều để vẽ trên trang.

Sau đó, tôi vẽ hình chữ nhật màu xanh . Tôi sử dụng fillStyle để xác định màu xanh. Tôi sử dụng fillRect để vẽ hình chữ nhật , xác định kích thước và vị trí. Gọi fillRect (0, 0 , 125, 75 ) có nghĩa là : bắt đầu từ vị trí (0, 0 ) - góc trên bên trái - vẽ một hình chữ nhật với chiều rộng = 125 pixel và chiều cao = 75 pixel.

Cuối cùng, tôi vẽ X màu trắng trên lá cờ . Đầu tiên tôi gọi beginPath để bắt đầu quá trình vẽ một con đường. Tôi chỉ định một linewidth 15 pixel ( bằng cách sử dụng phương pháp đoán và kiểm tra cố gắng giá trị khác nhau cho đến khi nó nhìn chính xác ) và một strokeStyle của "trắng" để làm cho màu sắc của đường trắng . Sau đó, tôi theo dõi các đường dẫn sử dụng moveTo và lineTo . Các phương pháp xác định vị trí một " con trỏ" cho bạn để vẽ ; sự khác biệt là moveTo di chuyển con trỏ mà không cần vẽ một đường và lineTo vẽ một đường thẳng trong khi di chuyển . Tôi bắt đầu bằng cách di chuyển đến vị trí (0, 0 ) - góc trên bên trái - và sau đó vẽ một đường để ( 125 , 75 ) - góc dưới bên phải . Sau đó, tôi chuyển sang vị trí ( 125 , 0) - góc trên bên phải - và vẽ một đường để (0 , 75 ) - góc dưới bên trái . Cuối cùng , phương pháp đột quỵ thực sự làm cho những đột quỵ.

So sánh nhanh Canvas vs SVG

Scalable Vector Graphics (SVG) là một tiêu chuẩn trước đó cho các bản vẽ trong một cửa sổ trình duyệt . Với việc phát hành của vải HTML5 , nhiều người đang tự hỏi làm thế nào họ so sánh .

Trong mắt tôi , sự khác biệt lớn nhất là vải sử dụng chế độ dựng hình ngay lập tức và sử dụng SVG dựng chế độ giữ lại. Điều này có nghĩa rằng vải trực tiếp gây ra cung cấp đồ họa để hiển thị. Trong mã của tôi ở trên , một khi lá cờ được rút ra, nó bị lãng quên bởi hệ thống và không có nhà nước được giữ lại. Làm cho một sự thay đổi sẽ đòi hỏi một vẽ lại đầy đủ. Ngược lại, SVG giữ lại một mô hình hoàn chỉnh của các đối tượng để được trả lại. Để thực hiện một sự thay đổi , bạn chỉ có thể thay đổi (ví dụ) vị trí của hình chữ nhật , và trình duyệt sẽ xác định làm thế nào để tái làm cho nó . Đây là công việc ít hơn cho các nhà phát triển , nhưng cũng nặng hơn để duy trì một mô hình .

Khả năng phong cách SVG qua CSS ngoài JavaScript đáng gọi điện thoại ra như một yếu tố nữa . Một bức tranh có thể được thao tác thông qua chỉ JavaScript.

Đây là một tổng quan cấp cao của sự khác biệt khác :

 vải SVG

Trừu tượng Pixel dựa trên ( bitmap động) Hình dạng dựa trên

 

Yếu tố yếu tố đơn HTML Nhiều yếu tố đồ họa mà trở thành một phần của Document Object Model (DOM)

 

Lái xe thay đổi thông qua Script chỉ thay đổi thông qua Script và CSS

 

Sự kiện mẫu Tương tác người dùng là dạng hạt ( x, y) Tương tác người dùng là trừu tượng ( rect , đường dẫn)

 

Thành tích tốt hơn với bề mặt nhỏ hơn và / hoặc số lượng lớn hơn của các đối tượng là hiệu suất tốt hơn với số lượng nhỏ hơn của các đối tượng và / hoặc bề mặt lớn hơn

 

Để so sánh chi tiết hơn , tôi muốn chỉ cho bạn một vài phiên ( mà từ đó tôi kéo bàn tuyệt vời này , với sự cho phép ) :

" Suy nghĩ về Khi sử dụng SVG và Canvas " Patrick Dengler của

"Deep Dive Into HTML5 Canvas " Jatinder Mann

John Bristowe của " Giới thiệu về HTML5 Canvas "

Âm thanh và video Hỗ trợ

Một trong những tính năng lớn đó là mới trong HTML5 là khả năng hỗ trợ chơi âm thanh và video. Trước khi HTML5, bạn cần một plug-in như Silverlight hay Flash cho chức năng này. Trong HTML5, bạn có thể nhúng âm thanh và video bằng cách sử dụng <audio> mới và các thẻ <video> .

Từ góc độ mã hóa, các yếu tố âm thanh và video rất đơn giản để sử dụng . (Tôi sẽ cung cấp cho bạn một cái nhìn sâu sắc hơn vào các thuộc tính của họ dưới đây . ) Các yếu tố âm thanh và video cũng được hỗ trợ trong tất cả các trình duyệt chính ( phiên bản mới nhất của Internet Explorer, Firefox , Chrome, Opera , và Safari ) . Tuy nhiên , một phần khó khăn là bạn cần codec để chơi âm thanh và video , và các trình duyệt khác nhau hỗ trợ codec khác nhau . ( Đối với một tuyệt vời trong chiều sâu lời giải thích của các thùng chứa video và codec, đọc http://diveintohtml5.org/video.html . )

May mắn thay, đây không phải là một show-stopper . Sự hỗ trợ cho âm thanh và video được thực hiện trong một cách tuyệt vời , nơi có sự hỗ trợ để cố gắng định dạng tập tin khác nhau ( trình duyệt sẽ cố gắng mỗi và sau đó thả xuống tiếp theo nếu nó không thể chơi nó ) .

Như một thực hành tốt nhất , bạn nên cung cấp nhiều nguồn âm thanh và video để chứa các trình duyệt khác nhau. Bạn cũng có thể dự phòng để Silverlight hay Flash. Cuối cùng, bất kỳ văn bản giữa mở và đóng thẻ (như <audio> và < / audio > ) sẽ được hiển thị trong các trình duyệt không hỗ trợ âm thanh hay yếu tố video.

Ví dụ :

Với mã này , đầu tiên trình duyệt sẽ cố gắng để chơi các tập tin laughter.mp3 . Nếu nó không có các codec bên phải để chơi nó, nó sẽ cố gắng tiếp theo để chơi các tập tin laughter.ogg . Nếu các yếu tố âm thanh không được công nhận ở tất cả các trình duyệt, nó sẽ hiển thị văn bản " Trình duyệt của bạn không hỗ trợ các yếu tố âm thanh ", nơi điều khiển âm thanh nên được.

Một báo trước cho âm thanh và video : không có được xây dựng trong quản lý quyền kỹ thuật số (DRM) hỗ trợ ; bạn phải thực hiện chính mình này như các nhà phát triển . Xem liên kết này từ W3C điều này giải thích vị trí của họ . (Nếu bạn có nhu cầu cho nội dung DRM , cũng xem tài liệu Silverlight DRM , mà có thể là một giải pháp dễ dàng hơn. )

Bây giờ chúng ta hãy đi sâu vào từng yếu tố mới .

âm thanh

Trước tiên, hãy nhìn vào <audio> chi tiết hơn .

Chúng tôi đã thảo luận về tác dụng dự phòng cố gắng từng nguồn cho đến khi nó hy vọng tìm thấy một có thể chơi được .

Lưu ý rằng có một thuộc tính điều khiển . Điều này sẽ hiển thị các điều khiển phát lại âm thanh bao gồm một nút play / tạm dừng , thời gian, một nút tắt tiếng , và điều khiển âm lượng . Trong hầu hết các tình huống , rất tốt để hiển thị điều khiển âm thanh cho người sử dụng ; Tôi ghét thăm một trang web với âm thanh và không thể ngăn chặn nó, tắt nó, hoặc biến nó xuống . Phải không?

Đây là những gì các điều khiển âm thanh như thế nào trong Internet Explorer:

Các điều khiển tìm kiếm khác nhau trong các trình duyệt khác nhau. Dưới đây là những gì họ trông giống như trong Chrome ( với một bài hát đang chơi ) . Khối lượng thả xuống bật xuống khi bạn di chuột qua biểu tượng âm thanh trên bên phải.

Dưới đây là các điều khiển trong Firefox ( với một bài hát tạm dừng) . Như Chrome, nó cũng có một điều khiển âm lượng pop-up (không hiển thị ) khi bạn di chuột qua biểu tượng âm thanh trên bên phải.

Thuộc tính thú vị khác trên các yếu tố âm thanh bao gồm:

Giá trị thuộc tính có thể Mô tả

 

autoplay autoplay Bắt đầu chơi âm thanh ngay khi nó sẵn sàng

 

điều khiển điều khiển hiển thị các điều khiển phát lại âm thanh trên trang

 

vòng lặp Nguyên nhân âm thanh lặp lại và chơi lại mỗi khi nó kết thúc

 

tự động tải trước , siêu dữ liệu, không Xác định xem để tải các âm thanh khi trang web được tải . Giá trị sẽ tự động tải các âm thanh, siêu dữ liệu sẽ được tải chỉ siêu dữ liệu liên quan đến tập tin âm thanh , và không ai sẽ không tải trước âm thanh. ( Thuộc tính này sẽ bị bỏ qua nếu autoplay được chỉ định. )

 

src (một số URL ) Chỉ định URL của tập tin âm thanh để chơi

Vì vậy, mẫu mã này sẽ không chỉ hiển thị các điều khiển phát lại âm thanh , nhưng cũng bắt đầu âm thanh chơi ngay lập tức và lặp lại nó hơn và hơn trong vòng một.

Nếu bạn muốn chơi xung quanh với các yếu tố <audio> mình trong trình duyệt của bạn, có một "tuyệt vời TryIt Editor" trên http://w3schools.com cho phép bạn chỉnh sửa một số mẫu mã và xem những gì sẽ xảy ra . Hoặc thử Làm thế nào để thêm một máy nghe nhạc âm thanh HTML5 cho bài viết trang web của bạn .

video

Bây giờ, chúng ta hãy xem xét các yếu tố <video> .

Như chúng ta đã thảo luận ở trên , các yếu tố video có hỗ trợ nhiều nguồn, trong đó nó sẽ cố gắng để và sau đó rơi xuống tùy chọn tiếp theo .

Như âm thanh, video có một thuộc tính điều khiển . Đây là một ảnh chụp màn hình của các điều khiển video trong Internet Explorer:

Thuộc tính thú vị khác của các yếu tố video bao gồm :

Giá trị thuộc tính có thể Mô tả

 

Bộ tắt âm thanh trạng thái mặc định của âm thanh (hiện tại , " tắt tiếng " là lựa chọn duy nhất )

 

autoplay autoplay Khởi động chơi video ngay sau khi nó đã sẵn sàng

 

điều khiển điều khiển hiển thị các điều khiển phát lại video trên trang

 

chiều cao ( giá trị tính bằng điểm) Thiết lập chiều cao của máy nghe nhạc video

 

vòng lặp Nguyên nhân video để lặp lại và chơi lại mỗi khi nó kết thúc

 

poster ( một số URL ) Chỉ định URL của một hình ảnh đại diện cho video khi không có dữ liệu video hiện có sẵn

 

tự động tải trước , siêu dữ liệu, không Xác định xem để tải các video khi trang web được tải . Giá trị sẽ tự động tải các video, siêu dữ liệu sẽ được tải chỉ siêu dữ liệu liên quan đến các tập tin video, và không ai sẽ không tải trước video. ( Thuộc tính này sẽ bị bỏ qua nếu autoplay được chỉ định. )

 

src (một số URL ) Chỉ định URL của tập tin video để chơi

 

chiều rộng ( giá trị tính bằng điểm) Thiết lập độ rộng của máy nghe nhạc video

 

Một lần nữa, để chơi xung quanh với các yếu tố <video> mình , sử dụng " TryIt Editor" từ http://w3schools.com cho phép bạn chỉnh sửa một số mẫu mã và xem những gì sẽ xảy ra .

Để tìm hiểu thêm về video và âm thanh , kiểm tra :

5 điều bạn cần biết để bắt đầu sử dụng <audio> và <video> hôm nay

Làm thế nào để thêm một máy nghe nhạc âm thanh HTML5 để trang web của bạn

W3C trường video HTML5

Phát triển với HTML5 trong khi giữ lại hỗ trợ cho các trình duyệt cũ

Chúng tôi đã thảo luận rất nhiều chức năng mới mát mẻ trong HTML5 , bao gồm các yếu tố mới ngữ nghĩa, các thẻ canvas để vẽ, và sự hỗ trợ âm thanh và video .

Bạn có thể nghĩ rằng công cụ này là thực sự mát mẻ , nhưng bạn có thể không có thể áp dụng HTML5 khi nhiều người dùng của bạn không có trình duyệt HTML5 tương thích nào . Không đề cập đến các trình duyệt hỗ trợ HTML5 DO hỗ trợ phần khác nhau của nó ; không phải tất cả các chức năng HTML5 mới được hỗ trợ trong tất cả các trình duyệt và các tính năng khác nhau có thể được thực hiện khác nhau.

Nhưng có một cách để sử dụng các tính năng mới mà không vi phạm trang web của bạn cho người dùng với các trình duyệt cũ . Bạn có thể sử dụng polyfills .

Theo Paul Ailen , một polyfill là " một shim bắt chước một API tương lai , cung cấp chức năng dự phòng cho các trình duyệt cũ hơn. " Một polyfill lấp đầy những khoảng trống trong các trình duyệt cũ không hỗ trợ các chức năng HTML5 trong trang web của bạn . Học tập để sử dụng polyfills sẽ cho phép bạn sử dụng HTML5 hôm nay mà không để lại người sử dụng các trình duyệt cũ .

Một cách để nhận được hỗ trợ polyfill là thư viện JavaScript Modernizr ( nhưng có nhiều polyfills có sẵn ) . Modernizr cho biết thêm khả năng phát hiện tính năng để bạn có thể kiểm tra đặc biệt cho dù trình duyệt hỗ trợ (ví dụ) các yếu tố vải và cung cấp một tùy chọn sao lưu nếu nó không.

Chúng ta hãy đi bộ qua một ví dụ. Hãy nhớ rằng các mẫu mã mà tôi sử dụng khi giới thiệu các yếu tố ngữ nghĩa và cách bố trí trang ? Ở đây nó là một lần nữa:

Mã này có chứa một số yếu tố HTML5 mới không được hỗ trợ trong các trình duyệt cũ . Hãy nhớ rằng, trong Internet Explorer 9, nó trông như thế này :

Chúng ta có thể sử dụng các công cụ phát triển Internet Explorer để xem những gì này sẽ như thế nào trong phiên bản cũ của IE . Trong Internet Explorer, bấm F12 để truy cập vào các công cụ phát triển .

Lưu ý rằng các chế độ trình duyệt ( trên thanh menu màu xám trên đầu trang ) hiện đang đặt IE9. Nhấp chuột vào các chế độ trình duyệt , và từ trình đơn thả xuống hiện ra, chọn " Internet Explorer 8 " (mà không có hỗ trợ HTML5 ) .

Sau khi tôi thực hiện thay đổi và chuyển sang một trình duyệt không tương thích HTML5 , đây là những gì trang web của tôi hình như:

Mặc dù điều này có vẻ như một vấn đề quái vật để sửa chữa , nó không thực sự là xấu. Lý do mà điều này không làm việc là IE8 không công nhận các yếu tố HTML5 mới mà tôi đang sử dụng , vì vậy nó không thêm chúng vào DOM , vì vậy bạn không thể tạo kiểu họ sử dụng CSS .

Tuy nhiên , chỉ cần thêm một tham chiếu đến Modernizr ( mà không thực hiện bất kỳ thay đổi mã khác ) sẽ brute- buộc các yếu tố này vào DOM . Tải về từ http://www.modernizr.com/download/ và thêm một tham chiếu trong phần <head> như vậy:

Tôi bổ sung thêm hai tài liệu tham khảo kịch bản, một cho jQuery và một Modernizr . Tôi không thực sự cần tài liệu tham khảo jQuery vào thời điểm này , nhưng chúng tôi sẽ cần nó cho kịch bản tiếp theo , vì vậy tôi thêm nó bây giờ.

Chỉ cần thay đổi đơn giản này bây giờ được trang web của tôi để trạng thái này trong Internet Explorer 8:

Nó không hoàn hảo , nhưng đó là khá gần với phiên bản gốc mà chúng ta thấy trong Internet Explorer 9. Modernizr thêm những yếu tố HTML5 mới IE8 không hiểu vào DOM , khi họ còn ở trong DOM , chúng ta có thể phong cách họ sử dụng CSS.

Nhưng Modernizr làm nhiều hơn thế! Chú ý rằng một trong những sự khác biệt giữa IE8 và IE9 phiên bản của chúng tôi của trang web là phiên bản IE9 có góc tròn đẹp trên hai bài báo và các con số, và các phiên bản IE8 thì không. Chúng tôi cũng có thể sử dụng Modernizr để sửa lỗi này .

   

Trong kịch bản này, chúng tôi đang kiểm tra các đối tượng Modernizr để xem nếu có sự hỗ trợ cho " borderradius " (một tính năng CSS3 ) . Nếu không , tôi sử dụng một kịch bản jQuery được gọi là jquery.corner.js ( trong đó có sẵn để tải về tại http://jquery.malsup.com/corner/ và đòi hỏi thêm tài liệu tham khảo để jQuery mà tôi đã thực hiện trước đó). Sau đó, tôi chỉ đơn giản gọi phương thức góc từ kịch bản trên các bài báo và số liệu của tôi để cung cấp cho họ các góc tròn .

OR, bạn có thể làm điều này một cách hơi khác nhau . Modernizr có một bộ nạp tùy chọn ( không bao gồm) điều kiện nguồn lực được gọi là Modernizr.load ( ), dựa trên Yepnope.js . Điều này cho phép bạn tải các kịch bản polyfilling rằng người dùng của bạn cần, và nó tải các kịch bản không đồng bộ và song song mà đôi khi có thể cung cấp một tăng hiệu suất . Để có được Modernizr.load , bạn phải bao gồm nó trong một tùy chỉnh xây dựng của Modernizr mà bạn có để tạo ra tại http://www.modernizr.com/download/ ; nó không được bao gồm trong phiên bản phát triển . Với Modernizr.load , chúng ta có thể viết một kịch bản như thế này :

Trong ngắn hạn, điều này thực hiện các chức năng tương tự như kịch bản trước đó của chúng tôi . Modernizr.load đầu tiên kiểm tra tài sản " Modernizr.borderradius " Boolean để xem nếu nó được hỗ trợ. Sau đó , nope xác định các nguồn lực để tải nếu kiểm tra là sai. Kể từ khi IE8 không hỗ trợ tài sản CSS3 " borderradius ", nó sẽ tải các kịch bản jquery.corner.js . Cuối cùng, gọi lại xác định một chức năng để chạy bất cứ khi nào kịch bản được thực hiện tải , vì vậy chúng tôi sẽ gọi phương thức " góc " trên các bài báo và số liệu của tôi như chúng tôi đã làm trước đây. Có một hướng dẫn ngắn gọn về Modernizr.load tại http://www.modernizr.com/docs/ # tải nếu bạn muốn tìm hiểu sâu hơn .

Bây giờ, bằng cách sử dụng một trong những kịch bản , Internet Explorer 8 phiên bản của chúng tôi ( mà không hỗ trợ HTML5 ) trông như thế này :

Vì vậy, sử dụng các công cụ như polyfills và Modernizr cho phép bạn sử dụng chức năng HTML5 mới và vẫn cung cấp một kinh nghiệm tốt trên các trình duyệt cũ là tốt. Để biết thêm thông tin , hãy kiểm tra http://diveintohtml5.info/ trong đó mô tả chi tiết cách Modernizr phát hiện các tính năng HTML5 .

Tóm tắt

Trong này giới thiệu về HTML5, chúng ta đã đánh dấu ngữ nghĩa , vải, âm ​​thanh và video , và sử dụng HTML5 trong khi giữ lại hỗ trợ cho các trình duyệt cũ . Nhưng cũng lưu ý rằng có rất nhiều chúng tôi đã không bao gồm: dữ liệu vĩ mô , lưu trữ, CSS3, vv Đây là một vài nguồn lực để tiếp tục tìm hiểu về HTML5 :

IE Test Drive - ngay cả khi bạn không sử dụng Internet Explorer , đây là một trang web tuyệt vời . Nó chứa một tấn demo : Tốc độ Demo , HTML5 Demo , đồ họa Demo , và trình duyệt Demo . Thử chúng trong trình duyệt yêu thích của bạn ! Trang web này cũng có liên kết đến các nguồn lực khác , quá .

Vẻ đẹp của Web - giới thiệu các trang web tốt nhất trên web mà tận dụng lợi thế của HTML5 và tăng tốc phần cứng ghim tính năng với trình duyệt Internet Explorer 9

BuildMyPinnedSite - tất cả các mã , ý tưởng và mẫu bạn cần phải sử dụng ghim và Windows tích hợp

HTML5 Labs - Trang web này là nơi mà Microsoft nguyên mẫu đầu và thông số kỹ thuật không ổn định từ các tiêu chuẩn web cơ quan như W3C. Bạn có thể chơi với nguyên mẫu như IndexedDB , WebSockets , FileAPI , và Media Capture API.

video

" Phát triển ứng dụng với HTML5 " Brandon Satrom của nói chuyện tại TechEd 2011 - đây là một kéo dài một giờ nói chuyện tuyệt vời mà móng tay những gì bạn cần biết để làm phát triển HTML5

HTML5 nói từ MIX 2011 - một sự giàu có của các phiên HTML5

công cụ

Nhiều công cụ phát triển hỗ trợ HTML5 đã . Thử này:

Visual Studio 2010 SP1 - SP1 thêm HTML5 và CSS3 cơ bản IntelliSense và xác nhận. Để biết thêm thông tin, xem http://blogs.msdn.com/b/webdevtools/archive/2011/01/27/html5-amp-css3-in-visual-studio-2010-sp1.aspx.

Cập nhật tiêu chuẩn web cho Microsoft Visual Studio 2010 SP1 - đây là một phần mở rộng Visual Studio cho biết thêm cập nhật HTML5 và CSS3 IntelliSense và xác nhận để Visual Studio 2010 SP1 , dựa trên các đặc điểm kỹ thuật W3C hiện tại .

WebMatrix - HTML5 được hỗ trợ theo mặc định ra khỏi hộp ( thêm một trang HTML mới sử dụng loại tài liệu được mặc định HTML5 và mẫu mã )

ASP.NET MVC 3 công cụ cập nhật

o Hộp thoại New Project bao gồm một phiên bản HTML5 hộp kiểm cho phép các mẫu dự án.

o Các mẫu đòn bẩy Modernizr 1.7 hỗ trợ khả năng tương thích cho HTML5 và CSS3 trong các trình duyệt xuống cấp .

Expression Web 4 SP1

o HTML5 IntelliSense và hỗ trợ trong Code Editor và Design View

o Richer chỉnh sửa phong cách CSS3 và IntelliSense

o SuperPreview Trang Chế độ tương tác và Dịch vụ trực tuyến ( các trình duyệt từ xa bao gồm Chrome, IE8, IE9 và Safari 4 và 5 trên Windows và Mac )

Ngoài ra công cụ phát triển , đừng quên :

Windows Phone " Mango" có Internet Explorer 9 , hỗ trợ các trang web HTML5.

Internet Explorer 10 Platform Xem trước đã hỗ trợ cho nhiều CSS3 mới và các tính năng HTML5 ; danh sách đầy đủ là http://msdn.microsoft.com/en-us/ie/gg192966.aspx .

HTML5 là ở đây. Đi ra và phát triển trang web tuyệt vời !

Các phần tử (thẻ) mới trong HTML5

- Internet đã thay đổi rất nhiều kể từ 4,01 HTML đã trở thành một tiêu chuẩn trong năm 1999.
- Ngày nay, một số yếu tố trong HTML 4.01 là lỗi thời,không bao giờ được sử dụng, hoặc không được sử dụng theo cách mà họ dự định.Những yếu tố này được loại bỏ hoặc viết lại trong HTML5.
- Để xử lý tốt hơn cho việc sử dụng internet, HTML5 bao gồm các yếu tố mới cho cấu trúc tốt hơn, hình thức xử lý tốt hơn trong việc bắt lỗi, dựng hình đồ họa, và hiển thị video.

Các thẻ HTML5 dành cho nội dung:

Mô tả
<article>
Định nghĩa một bài viết (tiêu đề, hình ảnh, mô tả ngắn).

<aside>
Xác định nội dung ngoài nội dung trang

<bdi> 
Cô lập một phần của văn bản có thể được định dạng theo một hướng khác từ các văn bản khác bên ngoài nó

<command>
Định nghĩa một nút lệnh mà người dùng có thể gọi

<details>
Xác định các chi tiết khác mà người dùng có thể xem hoặc ẩn

<summary>
Định nghĩa một nhóm có thể nhìn thấy cho một yếu tố <details>

<figure>
Chỉ định nội dung khép kín, như minh họa, sơ đồ, hình ảnh, danh sách mã, v.v…

<figcaption>
Định nghĩa một chú thích cho một yếu tố <figure>

<footer>
Xác định một cái ghi chú cho một tài liệu hoặc thông tin trang web.

<header>
Xác định tiêu đề hoặc logo, logan, banner cho trang web.

<hgroup>
Tập hợp các thẻ <h1> đến <h6> theo cấp độ.

<mark>
Xác định văn bản được đánh dấu / nhấn mạnh

<meter>
Định nghĩa một phép đo vô hướng trong một phạm vi được biết đến (một thước đo).

<nav>
Định nghĩa liên kết điều hướng (cho menu trang).

<progress>
Đại diện cho sự tiến bộ của một nhiệm vụ (thanh loadding).

<ruby>
Định nghĩa một chú thích màu đỏ (kiểu chữ Đông Á)

<rt>
Định nghĩa một lời giải thích / phát âm của các ký tự (kiểu chữ Đông Á)

<rp>
Định nghĩa những gì hiển thị trong các trình duyệt không hỗ trợ bằng các dòng chú thích màu đỏ.

<section>
Định nghĩa một phần trong một tài liệu

<time>
Định nghĩa một ngày / giờ

<wbr>
Định nghĩa một dòng line-break

Thẻ Media mới.

Các thẻ HTML5 cho việc xem media tốt hơn :
Mô tả
<audio>
Thẻ tag dùng cho nghe mp3

<video>
Thẻ tag dùng cho xem video

<source>
Xác định nguồn<video>và <audio>

<embed>
Định nghĩa một tập hơp ứng dụngbên ngoài hoặcnội dung tương tác(plug-in)

<track>
Văn bản mô tả cho<video>và<audio>

Thẻ <canvas>

Mô tả
<canvas>
Được sử dụng để vẽ đồ họa,album ảnh,thông qua script (thường làJavaScript)

Thẻ Form mới.

HTML5 cung cấp các yếu tố hình thức mới, nhiều chức năng hơn:

Mô tả
<datalist>
Định nghĩa một danh sách tùy chọn (giống tag select).

<keygen>
Xác định một cặp trường khóa chính sử dụng cho<form>.

<output>
Đại diện cho kết quả của phép tính (giống như được thực hiện bởi script).

Các thẻ HTML 4.01 bị loại bỏ trong HTML5:

• <acronym>
• <applet>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <noframes>
• <strike>
• <tt>

Các thẻ cấu trúc HTML5 mới dành cho thiết kế website

HTML5 là gì?

HTML5, phiên bản mới nhất của Ngôn ngữ đánh dấu siêu văn bản (HTML), là bản hiệu chỉnh triệt để nhất về ngôn ngữ này cho đến nay. Nó giới thiệu nhiều tính năng mới trong nhiều lĩnh vực. Một số trong những bổ sung đáng chú ý hơn cả bao gồm:

Với một bộ các thẻ cấu trúc mới, HTML5 sửa đổi cách cấu trúc các tài liệu HTML. Các thẻ cấu trúc mới tập trung vào cách chia một tài liệu HTML thành các phần logic. Tên của thẻ mô tả kiểu nội dung dự kiến chứa trong thẻ. Trong bài này, hãy tìm hiểu về các thẻ mới chi tiết hơn.Các thẻ đa phương tiện có sẵn cho âm thanh và video.
Một thẻ canvas (khung nền ảnh) để vẽ nội dung trong trình duyệt.
Các biểu mẫu thông minh hơn cho phép bạn làm những việc như xác nhận hợp lệ thông qua việc sử dụng một thuộc tính cần thiết.

Một chút về lai lịch

Tim Berners-Lee đã tạo ra HTML ban đầu vào năm 1989 để giải quyết một số những thiếu sót của các phương pháp truy cập thông tin hiện có trên Internet. Từ buổi đầu của Internet, việc tìm đường của bạn trên Internet là một nhiệm vụ khó khăn. Nội dung trên Internet được coi là các tài liệu cá nhân, không có phương pháp dễ dàng nào để điều hướng giữa chúng. Về cơ bản bạn phải biết địa chỉ của tài liệu mà bạn đang tìm kiếm và nhập nó vào bằng tay. Để giải quyết vấn đề này, Berners-Lee đã tạo ra hai công nghệ: HTTP (Hypertext Transfer Protocol – Giao thức truyền siêu văn bản) và HTML.

HTTP là một giao thức dịch vụ được các máy chủ web sử dụng để cung cấp nội dung. Phần đầu của một URL trong trình duyệt web của bạn (giả sử trình duyệt hiển thị URL đầy đủ) thích hợp nhất sẽ bắt đầu bằng http://. Phần này của URL cho trình duyệt biết sử dụng kiểu giao thức nào khi đưa ra yêu cầu đến máy chủ web. Khi máy chủ nhận được một yêu cầu về một tài liệu, tài liệu đó có thể được viết hoặc được chuyển đổi sang HTML. Tài liệu HTML là thứ được gửi trở lại trình duyệt đưa ra yêu cầu đó.

HTML là một ngôn ngữ kịch bản lệnh để cho một trình duyệt web biết cách trình bày nội dung. Các liên kết đến những tài liệu khác có thể nằm trong nội dung này, cung cấp một phương pháp chuyển hướng thân thiện với người dùng giữa các tài liệu trên Internet.

Sự kết hợp giữa HTTP và HTML đưa ra sự chuyển hướng nội dung nhanh chóng và dễ dàng trên Internet bằng cách cho phép bạn chỉ cần nhấn chuột vào các liên kết văn bản để chuyển hướng giữa các tài liệu. Sau khi tạo ra hai công nghệ này, Berners-Lee vẫn tiếp tục làm việc để thành lập W3C (World Wide Web Consortium – Liên minh mạng toàn cầu). W3C đã là tổ chức chỉ đạo cho bốn phiên bản đầu tiên của HTML.

Ý định ban đầu của Internet là dùng cho các tài liệu văn bản đơn giản. Tất cả các trình duyệt đầu tiên đều dựa trên văn bản (không có cửa sổ bắt mắt nào — chỉ có văn bản trên màn hình). Ngay cả việc thêm các hình ảnh vào cũng là một vấn đề lớn khi được giới thiệu lần đầu. Bây giờ, mọi người làm mọi thứ từ việc gửi các thông báo qua e-mail đến xem truyền hình trên Internet. Internet đã trở nên có nhiều thứ hơn là một cơ chế để vận chuyển các tài liệu văn bản đơn giản. Với các tính năng và các cách sử dụng mới đã có những thách thức và các vấn đề mới mà ngôn ngữ HTML chưa bao giờ được thiết kế để xử lý.

W3C đã cố gắng để giải quyết các vấn đề của Internet ngày nay với tiêu chuẩn XHTML 2.0 (Extensible Hypertext Markup Language – Ngôn ngữ đánh dấu siêu văn bản mở rộng). Tuy nhiên, tiêu chuẩn này không được đón nhận rộng rãi và phần lớn đã bị loại bỏ. Vào năm 2004, trong khi W3C đã đang tập trung vào tiêu chuẩn XHMTL 2.0, một nhóm có tên là WHATWG (Web Hypertext Application Technology Working Group - Nhóm công tác Công nghệ ứng dụng siêu văn bản Web) đã bắt đầu xây dựng tiêu chuẩn HTML5 và tiêu chuẩn này được đón nhận nồng nhiệt hơn so với tiêu chuẩn XHTML 2.0. W3C đã từ bỏ tiêu chuẩn XHTML 2.0 và hiện đang làm việc với WHATWG về phát triển HTML5.

Các trình duyệt được hỗ trợ

Vào thời điểm viết bài này, HTML5 vẫn chưa chính thức được phát hành. Hầu hết các nội dung trên web vẫn còn đang được viết cho đặc tả HTML 4. Tuy nhiên, một số trình duyệt đưa vào sự hỗ trợ cho đặc tả HTML5. Vì mỗi trình duyệt chỉ có thể hỗ trợ các tính năng nhất định của HTML5, nên nhiều thứ có thể khó khăn. Trước khi viết một trang web dựa trên HTML5, hãy kiểm tra từng trình duyệt đích của bạn để chắc chắn rằng chúng hỗ trợ các tính năng mà bạn sẽ sử dụng cho trang web của mình.

Kiểu tài kiệu mới

Bất kể các khả năng của các trình duyệt đích của bạn, bạn phải cho trình duyệt biết bạn muốn biểu diễn nội dung nào của mình khi sử dụng đặc tả HTML5. Bạn làm điều này bằng cách sử dụng khai báo kiểu tài liệu (doctype).

Khai báo kiểu tài liệu cho trình duyệt biết trang được viết bằng phiên bản nào của ngôn ngữ đánh dấu. Nó làm như vậy bằng cách tham khảo một DTD (Document Type Definition – Đinh nghĩa kiểu tài liệu). DTD chỉ rõ các quy tắc được ngôn ngữ đánh dấu sử dụng sao cho các trình duyệt biểu diễn đúng nội dung.

Các kiểu tài liệu có thể là một khái niệm khó hiểu. Trong đặc tả HTML hiện nay, có nhiều kiểu tài liệu và sự khác biệt giữa chúng không hoàn toàn rõ ràng. Bảng 1 (Bảng 1) cho thấy các kiểu tài liệu hiện có sẵn và các khả năng của chúng.

Bảng 1. Các kiểu tài liệu và các khả năng

Các kiểu tài liệu	Các khả năng	Ví dụ
HTML 4.01 chính xác	Cho phép tất cả các phần tử và các thuộc tính HTML, nhưng không cho phép các thẻ trình bày, như thẻ phông chữ. Không cho phép các bộ khung.	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 chuyển tiếp	Tương tự như HTML chính xác, nhưng cho phép sử dụng các phần tử không chấp nhận như thẻ phông chữ. Không cho phép các bộ khung.	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 bộ khung	Tương tự như HTML chuyển tiếp, nhưng cho phép các bộ khung.	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 chính xác	Tương tự như HTML chính xác, nhưng tất cả nội dung phải được viết đúng định dạng XML. Ví dụ, tất cả các thẻ mở phải có một thẻ đóng phù hợp. Không cho phép các bộ khung.	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 chuyển tiếp	Tương tự như HTML chuyển tiếp, nhưng tất cả nội dung phải được viết đúng định dạng XML. Không cho phép các bộ khung.	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 bộ khung	Tương tự như XHTML chuyển tiếp, nhưng cho phép các bộ khung.	<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1	Tương tự như XHTML chính xác, nhưng cũng cung cấp các khả năng cho các mô-đun, như hỗ trợ Ruby cho các ngôn ngữ Đông Á.	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Thật may, việc khai báo kiểu tài liệu được đơn giản hóa rất nhiều trong HTML5. Trong thực tế, chỉ có một kiểu tài liệu. Đối với trình duyệt của bạn để biểu diễn bằng cách sử dụng đặc tả HTML 5, hãy thêm kiểu tài liệu như hiển thị trong Liệt kê 1.

Liệt kê 1. Kiểu tài liệu HTML5

<!DOCTYPE html>

Khai báo kiểu tài liệu là việc nên làm đầu tiên trong một tài liệu HTML, trước thẻ <html>.

Các phần tử cấu trúc mới

Lý do để tạo ra các thẻ cấu trúc mới là để chia các trang web thành các phần logic với các thẻ có mô tả các kiểu nội dung mà chúng chứa. Theo khái niệm, hãy suy nghĩ về trang web như một tài liệu. Các tài liệu có chứa các tiêu đề, các cuối trang, các chương và các quy ước khác nhau để phân chia tài liệu thành các phần logic.

Phần này rà soát lại các phương pháp hiện tại về chia một tài liệu HTML bằng cách sử dụng mã mẫu tổng quát. Trong phần còn lại của bài này, bạn sẽ sửa đổi mã ban đầu bằng cách sử dụng các thẻ cấu trúc HTML5 mới để thấy từng bước chuyển đổi tài liệu thành các phần logic như thế nào.

Cách tiếp cận của HTML 4

Nếu bạn đã từng tạo phần đơn giản nhất của các tài liệu HTML, thì bạn đã hiểu rõ thẻ div. Thẻ div là cơ cấu chính trong thời kỳ trước HTML5 để tạo ra các khối nội dung trong một tài liệu HTML. Ví dụ, Liệt kê 2 cho thấy cách bạn có thể sử dụng các thẻ div để tạo ra một trang đơn giản có một tiêu đề, vùng nội dung và cuối trang.

Liệt kê 2. Trang HTML đơn giản khi sử dụng các thẻ div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
        Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>
   <head> 
      <title> A Simple HTML Page Using Divs </title> 
   </head>
   <body> 
      <div id='header'>Header</div> 
      <div id='content'>Content</div> 
      <div id='footer'>Footer</div> 
   </body>
</html>

Trang này hoạt động tốt; thẻ div là một thẻ đa năng thú vị. Tuy nhiên, khác với việc xem xét thuộc tính id của mỗi thẻ div, thật khó để nói mỗi thẻdiv biểu diễn phần nào của tài liệu. Mặc dù bạn có thể biện luận rằng id là đủ cho một chỉ thị nếu được đặt tên đúng, các thuộc tính id là tùy ý. Có nhiều biến thể có thể được coi giống như các id hợp lệ. Bản thân thẻ đó không chỉ thị kiểu nội dung mà người ta dự kiến biểu diễn nó.

Cách tiếp cận của HTML5

HTML5 giải quyết vấn đề này bằng cách cung cấp một bộ các thẻ để xác định rõ hơn các khối nội dung chính tạo ra một tài liệu HTML. Bất kể nội dung cuối cùng được hiển thị bởi một trang web, hầu hết các trang web đều chứa các tổ hợp khác nhau của các phần và các phần tử trang web phổ biến.

Mã trong Liệt kê 2 tạo ra một trang đơn giản có một tiêu đề, vùng nội dung và cuối trang. Các phần này và các phần khác và các phần tử trang, là khá phổ biến, do đó, HTML5 gồm có các thẻ để ngắt các tài liệu thành các phần phổ biến và cho biết nội dung được chứa trong mỗi phần. Các thẻ mới là:

• header (tiêu đề)
• section (phần)
• article (mục)
• aside (dự trữ)
• footer (cuối trang)
• nav (chuyển hướng)

Phần còn lại của bài này cung cấp một cái nhìn tổng quan về mỗi thẻ. Bạn cũng sẽ tìm hiểu cách sử dụng các thẻ dự kiến bằng cách sửa đổi ví dụ mã dựa vào div ban đầu của Liệt kê 2 để sử dụng các thẻ cấu trúc HTML5 mới.

Thẻ header

Như tên cho thấy, thẻ header được dự kiến để đánh dấu một phần của trang HTML là phần tiêu đề. Liệt kê 3 cho thấy ví dụ mã từ Liệt kê 2 được sửa đổi để sử dụng một thẻ header.

Liệt kê 3. Thêm một thẻ header

<!DOCTYPE html> 
<html> 
   <head> 
      <title> A Simple HTML Page</title> 
   </head> 
   <body>
      <header>Header</header> 
      <div id='content'>Content</div> 
      <div id='footer'>Footer</div> 
   </body>
        
</html>

Kiểu tài liệu trong Liệt kê 3 cũng được thay đổi để cho biết rằng trình duyệt nên sử dụng HTML5 để biểu diễn trang. Từ điểm này trở đi, tất cả các ví dụ đều giả định bạn đang sử dụng kiểu tài liệu đúng.

Thẻ section

Thẻ section dùng để xác định các phần quan trọng của nội dung trên trang. Thẻ này có phần tương tự như việc chia một cuốn sách thành các chương. Thêm một thẻ section vào các kết quả ví dụ mã trong đoạn mã ở Liệt kê 4.

Liệt kê 4. Thêm một thẻ section

<!DOCTYPE html> 
<html> 
   <head> 
      <title> A Simple HTML Page</title> 
   </head> 
   <body> 
      <header>Header</header>
      <section> <p> This is an important section of the page. </p>
      </section> 
      <div id='footer'>Footer</div> 
   </body> 
</html>

Thẻ article

Thẻ article (mục) xác định các phần nội dung chính trong một trang web. Hãy nghĩ về một blog, nơi mà mỗi bài đăng riêng sẽ tạo nên một phần nội dung có ý nghĩa. Thêm các thẻ article vào các kết quả ví dụ mã trong đoạn mã được hiển thị trong Liệt kê 5.

Liệt kê 5. Thêm các thẻ article

<!DOCTYPE html> 
<html> 
   <head> 
      <title> A Simple HTML
        Page</title> 
   </head> 
   <body> 
      <header>Header</header>
      <section> 
         <article> <p> This is an important section of content on the
                page. Perhaps a blog post. </p> 
         </article> 
         <article> <p> This is an important section of content on the 
                page. Perhaps a blog post. </p>
         </article> 
      </section> 
      <div id='footer'>Footer</div>
   </body> 
</html>

Thẻ aside

Thẻ aside cho biết nội dung có chứa trong thẻ này có liên quan đến nội dung chính của trang, nhưng không phải là một phần của nó. Nó hơi giống như việc sử dụng các dấu ngoặc đơn để tạo ra một chú thích trong phần thân của văn bản (như thế này). Nội dung trong các dấu ngoặc đơn cung cấp thêm thông tin về phần tử chứa nó. Thêm một thẻ aside vào các kết quả ví dụ mã trong đoạn mã ở Liệt kê 6.

Liệt kê 6. Thêm một thẻ aside

<!DOCTYPE html> 
<html> 
   <head> 
      <title> A Simple HTML Page </title> 
   </head> 
   <body> 
      <header>Header</header>
      <section> 
         <article> <p> This is an important section of content on the
               page. Perhaps a blog post. </p> 
            <aside> <p> This is an aside for the
               first blog post. </p> </aside> 
         </article> 
         <article> <p> This is an important section of content on 
              the page. Perhaps a blog post. </p>
         </article> 
      </section> 
      <div id='footer'>Footer</div> 
   </body>
</html>

Thẻ footer

Thẻ footer đánh dấu nội dung phần tử đã chứa như cuối trang của tài liệu. Thêm một thẻ footer vào các kết quả ví dụ mã trong đoạn mã được hiển thị trong Liệt kê 7.

Liệt kê 7. Thêm một thẻ footer

<!DOCTYPE html> 
<html> 
   <head> 
      <title> A Simple HTML Page</title> 
   </head> 
   <body> 
      <header>Header</header>
      <section> 
         <article> <p> This is an important section of content on the
             page. Perhaps a blog post. </p> 
             <aside> <p> This is an aside for the first blog post. </p> 
             </aside> 
         </article> 
         <article> <p> This is an important section of content on the page. 
             Perhaps a blog post. </p> 
         </article>
      </section> 
      <footer>Footer</footer> 
   </body> 
</html>

Tại thời điểm này, tất cả các thẻ div ban đầu đã được thay thế bằng các thẻ cấu trúc HTML5.

Thẻ nav

Nội dung có chứa trong thẻ nav được dành cho các mục đích chuyển hướng. Thêm một thẻ nav vào các kết quả ví dụ mã trong đoạn mã ở Liệt kê 8.

Liệt kê 8. Thêm một thẻ nav

<!DOCTYPE html> 
<html> 
   <head> 
      <title> A Simple HTML
        Page</title> 
   </head> 
   <body> 
      <header>Header 
         <nav> 
            <a href='#'>Some Nav Link</a> <a href='#'>Some Other Nav Link</a> 
            <a href='#'> A Third Nav Link</a> 
         </nav> 
      </header> 
      <section>
        <article> <p> This is an important section of content on the page. 
                Perhaps a blog post. </p> 
           <aside> <p> This is an aside for the first blog
                 post.</p> 
           </aside> 
         </article> 
         <article> <p> This is an important section of content on the page. 
               Perhaps a blog post. </p> 
         </article>
      </section> 
      <footer>Footer</footer> 
   </body> 
</html>

Ví dụ cuối

Liệt kê 9 cho thấy kết quả của việc thay thế các thẻ div ban đầu bằng các thẻ cấu trúc HTML5 mới.

Liệt kê 9. Ví dụ cuối

<!DOCTYPE html> 
<html>
   <head> <title> A Simple HTML Page </title> </head> 
   <body>
      <header>Header <nav> <a href='#'>Some Nav Link</a> <a
            href='#'>Some Other Nav Link</a> <a href='#'>A Third Nav Link</a>
            </nav> 
      </header> 
      <section> 
         <article> <p> This is an important section of content on the page. 
             Perhaps a blog post. </p> 
             <aside> <p> This is an aside for the first blog post. </p> 
             </aside> 
         </article>
         <article> <p> This is an important section of content 
             on the page. Perhaps a blog post. </p> 
          </article> 
      </section> 
      <footer>Footer</footer>
        
   </body> 
</html>

Mặc dù ví dụ này đơn giản, dùng cho các mục đích trình diễn, khi bạn so sánh ví dụ dựa vào thẻ div ban đầu từ Liệt kê 2 đến kết quả trong Liệt kê 9, nghĩa của các thẻ cấu trúc mới sẽ rõ ràng.

Kết luận

Các thẻ HTML5 mới mô tả các kiểu nội dung mà chúng chứa và chúng giúp chia tài liệu thành các phần logic. Nó vẫn để cho bạn quyết định sử dụng các thẻ mới trong một tài liệu khi nào và ở đâu, tương tự như một tác giả đang viết một cuốn sách. Trong khi hai tác giả đang viết chung một cuốn sách có thể chọn các cách khác nhau để chia cuốn sách thành các chương, việc sử dụng các chương vẫn đưa ra một phương pháp nhất quán về chia cuốn sách thành các phần. Tương tự, trong khi hai tác giả của một trang web cụ thể có thể chọn các cấu trúc khác nhau, các thẻ cấu trúc HTML5 mới cung cấp các quy ước mới để các nhà phát triển trang web có thể sử dụng chúng trong khi các thẻ div cũ không cung cấp được.