[HTML/HTML5] Phần 36: Các phần tử mới trong HTML5

Cập nhật lần cuối: 24/04/2018 lúc 16:48:58

Thể loại: HTML/HTML5

Các phần tử cấu trúc/ngữ nghĩa mới
HTML5 cung cấp nhiều phần tử mới để định nghĩa cấu trúc tài liệu:

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

Liên quan: [HTML/HTML5] Phần 31: Các phần tử Form

Các phần tử Form mới
HTML5 cung cấp 2 phần tử form mới đó là:

datalist: Đặc tả một danh sách các lựa chọn trước cho các điều khiển đầu vào (input control)
output: Định nghĩa kết quả của một tính toán

Các dạng nhập liệu mới

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

Các thuộc tính nhập liệu mới

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height và width
list
min và max
multiple
pattern (regexp)
placeholder
required
step

Các cú pháp thuộc tính mới
HTML5 cho phép 4 cú pháp khác nhau để thể hiện thuộc tính. Ví dụ thể hiện các cú pháp dùng cho thẻ input.

Rỗng: <input type=”text” value=”John” disabled>
Không nháy: <input type=”text” value=John>
Nháy đôi: <input type=”text” value=”John Doe”>
Nháy đơn: <input type=”text” value=’John Doe’>

Đồ họa HTML5
HTML5 cung cấp 2 phần tử đồ họa đó là canvas (vẽ đồ họa bằng Javascript) và svg (vẽ bằng vector đồ họa).

Các phần media mới
Một số phần tử media mới trong HTML5 như audio, embed, source, track và video giúp việc thể hiện âm thanh, hình ảnh và các đối tượng đa phương tiện dễ dàng hơn trên HTML5.

Kết luận: Bạn đã làm quen và nắm tất cả các thẻ mới trong HTML5. Hi vọng bạn có thể áp dụng các thẻ này trong quá trình thiết kế website.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

APA:
Dammio. (2018). [HTML/HTML5] Phần 36: Các phần tử mới trong HTML5. https://www.dammio.com/2018/04/05/html-html5-phan-36-cac-phan-tu-moi-trong-html5.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[HTML/HTML5] Phần 36: Các phần tử mới trong HTML5}, year = {2018}, url = {https://www.dammio.com/2018/04/05/html-html5-phan-36-cac-phan-tu-moi-trong-html5}, urldate = {2024-12-08} }

Kết nối