Bài 31: Các phần tử mới trong HTML5

Nội dung

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

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

Dưới đây là danh sách các phần tử mới trong HTML5 và mô tả cách sử dụng của mỗi phần tử.

Ngữ nghĩa và cấu trúc các phần tử

HTML5 cung cấp các phần tử mới để bạn có thể tạo ra một cấu trúc tài liệu tốt hơn:

Thẻ	Mô tả
<article>	Định nghĩa một bài viết trong một tài liệu
<aside>	Định nghĩa nội dung nằm bên lề mô tả cho nội dung chính
<bdi>	Định nghĩa hướng chữ của một đoạn văn bản theo các định dạng khác nhau( có thể từ trái sang phải hoặc từ phải sang trái)
<details>	Xác định nội dung chi tiết mà người dùng có thể xem hoặc ẩn đi
<dialog>	Xác định một hộp thoại hoặc một cửa sổ
<figcaption>	Xác định chú thích cho phần tử <figure>
<figure>	Xác định nội dung khép kín như: hình ảnh minh họa,biểu đồ, sơ đồ, hình ảnh,…
<footer>	Xác định phần chân trang cho một văn bản hoặc một tác phẩm
<header>	Xác định tiêu đề cho một văn bản hoặc một tác phẩm
<main>	Xác định nội dung chính của một văn bản
<mark>	Xác định đánh dấu hoặc làm nổi bật chữ của một văn bản
<menuitem>	Xác định một menu con có thể được người sử dụng lấy ra từ một popup menu
<meter>	Xác đinh một phép đo vô hướng trong một pham vi định sẵn( thước đo)
<nav>	Xác định các liên kết chuyển hướng trong văn bản
<progress>	Xác định tiến trình của một văn bản
<rp>	Xác định nội dung thay thế trong trường hợp trình duyệt không hỗ trợ các thẻ ruby
<rt>	Xác định các cách phát âm/ giải thích của các kí tự( dành cho kiểu chữ Đông Á)
<ruby>	Xác định chú thích ruby (dành cho kiểu chữ Đông Á)
<section>	Xác định một phần/ một đoạn văn bản
<summary>	Xác định tiêu đề bởi phần tử <details>
<time>	Xác định nội dung hiển thị là Ngày tháng/ Thời gian
<wbr>	Xác định một đoạn nội dung có thể xuống dòng tránh làm hỏng cấu trúc giao diện của một trang văn bản

Bạn có thể tìm hiểu thêm các phần tử ngữ nghĩa (Semantics) trong HTML5 thông qua các bài học tiếp theo.

Các phần tử Form mới

Thẻ	Mô tả
<datalist>	Xác định các lựa chọn gợi ý cho thẻ Input
<keygen>	Xác định một cặp khoá key-pair cho các trường (trong form)
<output>	Xác định kết quả của một phép tính

Bạn có thể tìm hiểu tất cả các phần tử cũ và mới của form tại đây.

Các kiểu Input mới

Các kiểu Input mới	Các thuộc tính Input mới
color date datetime datetime-local email month number range search tel time url week	autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height and width list min and max multiple pattern (regexp) placeholder required step

Bạn có thể tìm hiểu tất cả các kiểu Input cũ và mới trong HTML tại đây.

Bạn có thể tìm hiểu tất cả các thuộc tính Input cũ và mới trong HTML tại đây.

Cú pháp cho thuộc tính mới trong HTML5

HTML5 cho phép chúng ta sử dụng 4 cú pháp khác nhau cho các thuộc tính.

Dưới đây là các ví dụ về 4 cú pháp khác nhau được sử dụng cho thẻ <input>:

Kiểu	Ví dụ
Empty( Chỉ có tên thuộc tính)	<input type=”text” value=”John” disabled>
Unquoted( Không có ngoặc )	<input type=”text” value=John>
Double-quoted( Ngoặc kép)	<input type=”text” value=”John Doe”>
Single-quoted( Ngoặc đơn)	<input type=”text” value=’John Doe’>

Trong HTML5, tất cả 4 cú pháp trên đều có thể được sử dụng, nó tùy thuộc loại thuộc tính.

Đồ họa trong HTML5

Thẻ	Mô tả
<canvas>	Xác định vẽ đồ họa sử dụng JavaScript
<svg>	Xác định vẽ đồ họa sử dụng SVG

Các bạn có thể tìm hiểu thêm về HTML5 Canvas và HTML5 SVG trong các bài học tiếp theo.

Phần tử Media mới

Thẻ	Mô tả
<audio>	Chỉ định việc chèn thêm âm thanh hoặc nội dung âm nhạc vào trang web
<embed>	Xác định nhúng các ứng dụng bên ngoài vào trang web (như các plug-ins)
<source>	Xác định các nguồn phát <video> và <audio>
<track>	Xác định tạo phụ đề và chạy chữ trong<video> và <audio>
<video>	Xác định chèn nội dung video hoặc movie vào trang web