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 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 ...

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 awidth
  • 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

Bài liên quan

Phần tử SVG trong HTML5

Ở bài học trước, Quantrimang đã cùng bạn tìm hiểu về phần tử Canvas trong HTML5 dùng để vẽ đồ họa cho website. Hôm nay chúng mình xin giới thiệu thêm một phần tử nữa có nhiệm vụ tương tự, cũng được sử dụng để vẽ đồ họa 2D và các ứng dụng đồ họa trên website, đó là phần tử SVG. Vậy SVG có ...

Vũ Văn Thanh viết 16:00 ngày 06/12/2018

Phần tử Canvas trong HTML5

Phần tử <canvas> trong HTML được sử dụng để vẽ đồ họa cho trang web. Vậy canvas có những nội dung gì, cách sử dụng ra sao, bạn hãy cùng Quantrimang tìm hiểu qua bài viết này nhé. Canvas là gì? Phần tử <canvas> sử dụng để vẽ các thành phần đồ họa từ đơn giản như các đường ...

Trần Trung Dũng viết 23:49 ngày 22/11/2018

Các phần tử ngữ nghĩa trong HTML5

Semantics học là nghiên cứu về ý nghĩa của từ và cụm từ trong một ngôn ngữ. Các phần tử Semantics = các phần tử có ý nghĩa. Các phần tử Semantic là gì? Một phần tử Semantic mô tả rõ ràng ý nghĩa của nó đối với cả trình duyệt và nhà phát triển. Ví dụ về các ...

Trịnh Tiến Mạnh viết 15:09 ngày 07/09/2018

Các phần tử form trong HTML

Phần tử <input> Đây được coi là phần tử form quan trọng bậc nhất. Phần tử <input> có thể được hiển thị bằng nhiều cách, tùy thuộc vào thuộc tính type. Phần tử <select> Phần tử <select> định nghĩa một drop-down list : Ví dụ: ...

Tạ Quốc Bảo viết 14:56 ngày 07/09/2018

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 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 ...

Bùi Văn Nam viết 11:25 ngày 22/08/2018
0