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

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

HTML5 cung cấp các phần tử mới giúp cấu trúc trang tốt hơn.

Dưới đây là danh sách các phần tử mới trong HTML5

Thẻ

Mô tả

<article>

Xác định một bài viết trong tài liệu

<aside>

Xác định nội dung bên lề của nội dung trang

<bdi>

Cô lập một phần văn bản có thể được định dạng theo hướng khác với văn bản bên ngoài

<details>

Xác định chi tiết thê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 tiêu đề cho một phần tử <figure>

<figure>

Xác định một nội dung độc lập

<footer>

Xác định footer cho tài liệu hoặc một section

<header>

Xác định tiêu đề cho tài liệu hoặc section

<main>

Xác định nội dung chính cho tài liệu

<mark>

Xác định băn bản được đánh dấu

<meter>

Xác định bộ đo bên trong một khoảng đã biết trước

<nav>

Xác định các liên kết điều hướng

<progress>

Biểu thị tiến trình của một tác vụ

<rp>

Chỉ ra hiển thị thay thế nếu trình duyệt không hỗ trợ chú thích ruby

<rt>

Xác định một giải thích/phát âm cho các ký tự (cho kiểu chữ Đông Á)

<ruby>

Xác định chú thích ruby (cho kiểu chữ Đông Á)

<section>

Xác định một vùng trong tài liệu

<summary>

Xác định một tiêu đề hiển thị cho phần tử <details>

<time>

Xác định ngày/giờ

<wbr>

Xác định có thể ngắt dòng

 

Các phần tử mới cho form (biểu mẫu)

 

Thẻ

Mô tả

<datalist>

Xác định một danh mục định trước cho input

<output>

Xác định kết quả một phép tính

 

Các kiểu input mới

 

Kiểu input mới

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

 

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

HTML5 cho phép bốn kiểu cú pháp mới cho thuộc tính

Ví dụ dưới đây minh họa bốn kiểu cú pháp được sử dụng trong thẻ <input>

Kiểu

Ví dụ

Trố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'>

 

HTML5 Graphics (đồ họa)

Thẻ

Mô tả

<canvas>

Vẽ đồ họa, nhanh chóng, thông qua script (thường là JavaScript)

<svg>

Vẽ đồ họa vector có thể mở rộng

 

 

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

Thẻ

Mô tả

<audio>

Xác định nội dung âm thanh

<embed>

Xác định bộ chứa cho một dứng dụng mở rộng (không phải HTML)

<source>

Xác định nguồn cho các phần tử đa phương tiện (<video> và <audio>)

<track>

Xác định phụ đề cho các phần tử đa phương tiện (<video> <audio>)

<video>

Xác định video hoặc đoạn phim

 

 

Tác giả: Nguyễn Văn Hợi

Chú ý: Tất cả các bài viết trên TEDU.COM.VN đều thuộc bản quyền TEDU, yêu cầu dẫn nguồn khi trích lại trên website khác.

Lên trên