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

Nguyễn Trang

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

Những phần tử cú pháp/cấu trúc mới trong HTML5

HTML5 mang tới các phần tử mới để cấu trúc văn bản tốt hơn.

Thẻ	Mô tả
<article>	Định nghĩa một bài viết.
<aside>	Định nghĩa nội dung bên cạnh nội dung trang
<bdi>	Phân tách một phận văn bản có thể được định dạng theo cách khác những phần còn lại
<details>	Định nghĩa chi tiết thêm để người dùng xem hoặc ẩn
<dialog>	Định nghĩa hộp thoại hoặc cửa sổ
<figcaption>	Định nghĩa mô tả cho phần tử <figure>
<figure>	Định nghĩa nội dung tự chứa
<footer>	Định nghĩa footer cho văn bản (document) hoặc phần văn bản (section)
<header>	Định nghĩa tiêu đề cho văn bản hoặc phần văn bản
<main>	Định nghĩa cho nội dung chính của văn bản
<mark>	Định nghĩa cho phần văn bản được đánh dấu/nhấn mạnh
<meter>	Định nghĩa đo lường vô hướng cho một khoảng biết trước
<nav>	Định nghĩa cho đường dẫn điều hướng
<progress>	Đại diện cho tiến độ công việc
<rp>	Định nghĩa cho những gì sẽ hiển thị trên trình duyệt mà không hỗ trợ ghi chú ruby.
<rt>	Định nghĩa để giải thích/phát âm kí tự (với chữ Đông Á)
<ruby>	Định nghĩa cho ghi chú ruby (với chữ Đông Á)
<section>	Định nghĩa cho một phần trong văn bản.
<summary>	Định nghĩa cho phần tiêu đề nhìn thấy được của phần tử <details>
<time>	Định nghĩa cho ngày tháng/thời gian
<wbr>	Định nghĩa cho đoạn xuống dòng khả thi

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

Thẻ	Mô tả
<datalist>	Xác định danh sách các lựa chọn định trước cho dữ liệu đầu vào
<output>	Định nghĩa cho kết quả tính toán

Các kiểu nhập dữ liệu đầu vào mới trong HTML5

Kiểu dữ liệu đầu vào mới	Kiểu thuộc tính cho dữ liệu đầu vào 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

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

HTML5 cho phép 4 kiểu cú pháp cho các thuộc tính. Ví dụ dưới đây cho biết các kiểu cú pháp được dùng trong thẻ <input>

Loại	Ví dụ
Rỗng	<input type="text" value="John" disabled>
Không trích dẫn	<input type="text" value=John>
Trích dẫn kép	<input type="text" value="John Doe">
Trích dẫn đơn	<input type="text" value='John Doe'>

Trong HTML5, tất cả 4 cú pháp đều có thể được sử dụng, tùy vào việc thuộc tính đó cần gì.

Đồ họa trong HTML5

Thẻ	Mô tả
<canvas>	Vẽ đồ họa nhanh chóng thông qua kịch bản (thường là JavaScript)
<svg>	Vẽ đồ họa vector có thể thay đổi kích thước

Các phần tử đa phương tiện mới trong HTML5

Thẻ	Mô tả
<audio>	Định nghĩa nội dung là âm thanh
<embed>	Định nghĩa bộ chứa (container) cho ứng dụng ngoài (không phải HTML)
<source>	Định nghĩa nhiều nguồn cho các phần tử đa phương tiện (<video> và <audio>)
<track>	Định nghĩa text track cho phần tử đa phương tiện (<video> và <audio>)
<video>	Định nghĩa video hoặc phim

Bài trước: Hỗ trợ HTML5 trên các trình duyệt

Bài sau: Cú pháp trong HTML5

Thứ Năm, 05/07/2018 15:29

4,2 ★ 5 👨 3.562

Bạn nên đọc

Xác thực tài khoản!

Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:

Số điện thoại chưa đúng định dạng!