Các phần tử mới được giới thiệu trong Code Web HTML 5

Các phần tử trong html 5

Các phần tử trong html 5

Đặc tả HTML5 bao gồm một loạt các phần tử ngữ nghĩa mới được sử dụng để đưa ra một số nghĩa cho các phần hoặc các bộ phận khác nhau của một trang Web, chẳng hạn như tiêu đề, chân trang, chuyển hướng, và v.v.. Trong các phiên bản trước của HTML, bạn thường sử dụng các phần tử <div> để tạo những bộ phận này, sử dụng ID hoặc các thuộc tính lớp để phân biệt chúng với nhau. Vấn đề là điều này không có nghĩa ngữ nghĩa, vì không có các quy tắc nghiêm ngặt quy định phải chỉ rõ các tên lớp hoặc các ID nào được sử dụng, làm cho việc xác định vùng cụ thể nào đang làm việc trở nên vô cùng khó khăn đối với phần mềm. HTML5 giúp làm giảm bớt những vấn đề này, làm cho việc phân tích cú pháp cấu trúc ngữ nghĩa của một tài liệu trở nên dễ dàng hơn đối với các trình duyệt Web.

Thật đáng giá để nói rằng việc tiếp tục sử dụng các phần tử <div> trong HTML5 là hoàn toàn hợp lệ, nhưng để công việc của bạn được nâng cấp dễ dàng, điều quan trọng là bạn sử dụng các phần tử ngữ nghĩa ở nơi có liên quan. Mặt khác, điều cần thiết là bạn tránh sử dụng các phần tử mới cho các mục đích khác hơn so với dự định của chúng. Ví dụ, không nên sử dụng phần tử <nav> cho nhóm các liên kết bất kỳ; nó được dự kiến để bao quanh khối chuyển hướng chính trên trang đó.

Các phần tử ngữ nghĩa chính mà HTML5 giới thiệu là:

<header (tiêu đề)>
Phần tử này được sử dụng để định nghĩa một tiêu đề cho một số phần của một trang Web, có thể là toàn bộ trang, một phần tử <article>, hoặc một phần tử <section>.

header - tiêu đề

header – tiêu đề

<footer (chân trang)>
Giống như phần tử <header>, phần tử mới này định nghĩa một chân trang cho một số phần của một trang. Một chân trang không cần ở cuối của một trang, một phần tử article (bài viết), hoặc một phần tử section (phần), như nó thường làm.

footer - chân trang

footer – chân trang

<nav (chuyển hướng)>
Đây là một thùng chứa cho các liên kết chuyển hướng ban đầu trên một trang Web. Phần tử này không được dự kiến sử dụng với tất cả các nhóm các liên kết và chỉ nên được dùng cho các khối chuyển hướng lớn. Nếu bạn có một phần tử <footer> có chứa các liên kết chuyển hướng, thì bạn không cần bọc các liên kết này trong một phần tử <nav>, do phần tử <footer> cũng sẽ đáp ứng cho riêng nó.

menu-nav - menu chuyển hướng

menu-nav – menu chuyển hướng

<article (bài viết)>
Phần tử <article> được sử dụng để định nghĩa một mục độc lập trên trang có thể dùng cho riêng nó, chẳng hạn như một mục tin tức, bài viết trên blog, hoặc nhận xét. Thường sử dụng các nguồn cung cấp RSS để cung cấp các mục này.

article - bài viết

article – bài viết

<section (phần)>
Phần tử này đại diện cho một phần của một tài liệu hoặc ứng dụng, chẳng hạn như một chương hoặc một phần của một bài viết hoặc hướng dẫn. Ví dụ, phần bạn đang đọc bây giờ có thể được bao quanh bởi một phần tử <section> trong HTML5. Các phần tử <section> thường có một tiêu đề, mặc dù cũng không cần thiết lắm. Ví dụ, tiêu đề cho phần bạn đang đọc bây giờ sẽ chứa văn bản “Các phần tử ngữ nghĩa”.

section - thành phần

section – thành phần

<aside (nhận xét)>
Phần tử mới này có thể được sử dụng để đánh dấu một thanh phụ hoặc một số nội dung khác được cho là có phần tách rời với nội dung xung quanh nó. Một ví dụ về điều này có thể là các khối quảng cáo.

aside - nhận xét

aside – nhận xét

<hgroup>
Trong một số trường hợp, một trang, bài viết, hoặc một phần có thể cần nhiều hơn một tiêu đề, chẳng hạn như ở đây bạn có một tiêu đề và phụ đề. Ví dụ, hướng dẫn này có tiêu đề “Tạo các trang Web hiện đại sử dụng HTML5 và CSS3” và phụ đề “Triển khai các phần tử canvas và video trong HTML5”. Bạn có thể bọc tiêu đề và phụ đề này trong phần tử <hgroup> , bằng cách sử dụng một phần tử <h1> cho tiêu đề chính và một phần tử <h2> cho phụ đề.

Trang Web mẫu ở cuối hướng dẫn này gồm có một số các phần tử ngữ nghĩa mới này, và tôi sẽ giải thích cú pháp của chúng và sử dụng chi tiết hơn tại thời điểm đó.

Phần tử <canvas>
Phần tử <canvas> (khung nền ảnh) được Apple® phát triển để sử dụng trong các widget (tiện ích) của Mac OS X Dashboard và trong Safari, nhưng sau đó đã được Mozilla® và Opera® chấp nhận trong các trình duyệt Web của họ. Phần tử này đã được tiêu chuẩn hóa và đã bao gồm trong đặc tả HTML5, cùng với một loạt các API vẽ 2D có thể được sử dụng để tạo các hình dạng, văn bản, các chuyển cảnh, và hình ảnh động bên trong phần tử này.

Nhiều người tin rằng phần tử <canvas> là một trong những khía cạnh quan trọng nhất của HTML5 do nó tạo điều kiện sản xuất các biểu đồ, các trò chơi tương tác, các ứng dụng vẽ, và các đồ họa khác đang hoạt động mà không cần cần các trình cắm thêm bên ngoài, chẳng hạn như Adobe Flash.

Chính phần tử <canvas> là khá cơ bản, định nghĩa chiều rộng, chiều cao, và mã định danh (ID) duy nhất cho đối tượng. Sau đó nhà phát triển phải sử dụng một loạt các JavaScript API để thực sự vẽ các đối tượng trên khung nền ảnh (canvas), thường khi trang Web đã hoàn tất dựng hình. Những API này cho phép nhà phát triển vẽ hình dạng và các đường kẻ, phết màu, độ mờ đục và các gradient (độ dốc); tạo văn bản; chuyển đổi các đối tượng khung nền ảnh; và thể hiện hình ảnh động. Các API cũng cho phép phần tử <canvas> tương tác và đáp ứng với đầu vào người dùng chẳng hạn như các sự kiện chuột và các sự kiện bàn phím, tạo điều kiện thuận lợi cho việc sản xuất các trò chơi và các ứng dụng Web trên khung nền ảnh. Bạn sẽ thấy một ví dụ về phần tử <canvas> đang hoạt động trong trang Web HTML5/CSS3 mẫu sau trong hướng dẫn này.

Phát <audio> và <video>
Trong những năm gần đây, tính phổ biến của các trang Web chia sẻ video như YouTube và các nền tảng phân phối nội dung như Hulu đã chứng kiến một sự bùng nổ to lớn trong việc sử dụng Web để tạo luồng đa phương tiện. Thật không may, người ta không thể xây dựng được Web với nội dung theo ý đồ này, và kết quả là, định dạng tệp Flash Video (.flv) và các nền tảng Adobe Flash nhìn chung đã làm đơn giả hóa việc cung cấp các video và âm thanh.

Tuy nhiên, HTML5 bao gồm cả sự hỗ trợ cho hai phần tử mới, <audio> và <video>, cho phép các nhà phát triển Web bao gồm các nội dung đa phương tiện mà không cần người dùng cài đặt các trình cắm thêm của trình duyệt. Một số trình duyệt, gồm có Mozilla Firefox, Apple Safari, Google Chrome, đã bắt đầu hỗ trợ các phần tử mới này và cung cấp các nút điều khiển phát lại của trình duyệt chuẩn, nên chắc là người dùng sẽ chọn sử dụng chúng. Ngoài ra, một tập hợp các JavaScript API chuẩn đã được cung cấp để cho phép các nhà phát triển tạo các nút điều khiển phát lại riêng của họ, chắc là họ muốn làm như vậy. Một lợi thế quan trọng để phát lại đa phương tiện nguyên gốc là về mặt lý thuyết nó đòi hỏi ít tài nguyên CPU hơn, điều này cho phép tiết kiệm năng lượng.

Tuy nhiên, một vấn đề quan trọng với các phần tử đa phương tiện mới này là các định dạng tệp được từng trình duyệt hỗ trợ và các vấn đề cấp phép bằng sáng chế thường đi cùng với các bộ mã hóa/giải mã (codec) khác nhau dùng để mã hóa các tệp này. Mozilla và Opera muốn sử dụng các thùng chứa video Theora và codec mã nguồn mở, không đòi hỏi cấp giấy phép bằng sáng chế để bao gồm các codec đó trong trình duyệt Web. Mặt khác, Apple và Google không hài lòng với chất lượng của Theora, cụ thể đối với việc phân phối các nội dung độ nét cao (HD) trên những trang Web giống như YouTube. Họ thích codec H.264, thường có trong các tệp MP4, MOV, hoặc MKV.

Tuy nhiên, vấn đề không chỉ với video, do có các vấn đề tương tự với các codec âm thanh. Các định dạng MP3 và AAC bị hạn chế bởi các bằng sáng chế, trong khi định dạng Vorbis thì không. Vấn đề với âm thanh Vorbis là nó không được sử dụng rộng rãi, do các máy phương tiện di động và nhiều ứng dụng phần mềm phương tiện không hỗ trợ nó.

Có rất nhiều quyết định được đưa ra về các phần tử <video> về <audio> của HTML5 trong tương lai gần, và sẽ rất thú vị để xem các codec và các định dạng nào được đơn giản hóa theo khuyến cáo cuối cùng. Trong khi đó, bạn có thể cố gắng hỗ trợ tất cả các trình duyệt bằng cách làm cho video có sẵn theo một loạt các định dạng và bằng cách cung cấp video Flash như là một sự thay thế. Chúng ta hãy hy vọng rằng quyết định cuối cùng được thực hiện, và nó không để cho các nhà cung cấp trình duyệt quyết định hỗ trợ các định dạng nào, vì điều đó về cơ bản sẽ làm cho những phần tử mới này vô dụng.

Một lần nữa, bạn sẽ thấy phần tử <video> đang hoạt động sau nữa trong hướng dẫn này.

Nguồn: https://www.ibm.com/developerworks/vn/edu/wa-html5/

Cảm ơn quí vị đã tín nhiệm và đọc bài viết được đăng trên hosting Gbit.vn với 1949 lượt tải trang.

hosting pro

Quản trị mạng, thi công mạng LAN, Thiết kế web, quản trị website và thiết kế máy chủ quản lý dữ liệu, máy chủ web hosting... chuyên nghiệp. LH hosting pro qua email ciopham@live.com.

Bạn đang nghĩ gì? Hãy để lại lời nhắn tới cộng đồng hosting nhé!

Your email address will not be published. Required fields are marked *