HTML5 03 – Các thành phần (thẻ) mới trong HTML5

0
293

Bài 3 trong series học HTML5, chúng ta sẽ đi vào tìm hiểu cụ thể từng thẻ mới trong HTML5, tác dụng của từng thẻ trong 1 văn bản HTML.

Sự thay thế 1 số thẻ trong HTML4

Ngôn ngữ HTML5 sinh ra đã giới thiệu 1 số thẻ (thành phần) mới, thay thế cho 1 số thẻ trong HTML4.

Thẻ mới trong HTML5 sẽ định nghĩa lại nội dung bên trong thẻ chứ không chỉ chú trọng vào cấu trúc như HTML4.

Ví dụ:

Phiên bản cũ HTML4 Phiên bản mới HTML5
<div id=”header”>Logo</div> <header>Logo</header>

Các thẻ (thành phần) mới trong HTML5

Giới thiệu về HTML5

1. Thẻ <header>

Thẻ <header> là thẻ chứa phần nội dung đầu của khối hoặc văn bản html. Nếu lúc trước bạn dùng thẻ <div> thì với HTML5 bạn sẽ dùng thẻ <header> để thay thế.

Có thể có nhiều thẻ <header> trong 1 tài liệu web.

Ví dụ:

2. Thẻ <nav>

Thẻ <nav> định nghĩa khu vực thiết lập menu điều hướng.

Ví dụ:

3. Thẻ <section>

Thẻ <section> định nghĩa các khối (block) của trang web, chứa các nội dung chính của website.

Ví dụ:

4. Thẻ <article>

Thẻ <article> là thành phần thường chứa nội dung một bài viết, tin tức, …

Có thể lồng thẻ <article> vào trong thẻ <section>.

Thẻ <article> có thể chứa các thẻ <header>, <footer>, <section>

Ví dụ:

Ở bài sau, tôi sẽ có 1 bài viết riêng về thẻ <article> này, giúp các bạn áp dụng thẻ này thực tế hơn trên website.

5. Thẻ <aside>

Thẻ <aside> sử dụng cho vùng sidebar của website, định nghĩa các phần nội dung bên lề, không phải nội dung chính của website.

Thẻ <aside> thường sử dụng bên trong thẻ <section>, chứa các nội dung như quảng cáo, slide, thông tin bên lề, ….

Ví dụ:

6. Thẻ <footer>

Thẻ <footer> chỉ rõ phần nội dung chân trang của website. Có thể có nhiều thẻ <footer> trong 1 trang web.

Nội dung bên trong footer như: địa chỉ liên lạc, email, số điện thoại, thông tin chung website, …

Ví dụ: 

7. Thẻ <figure> và <figcaption>

Ví dụ:

8. Thẻ <video>

Thẻ <video> cho phép nhúng video vào trang web mà không cần dùng plugin của trình duyệt.

Các thuộc tính của thẻ <video>:

Tên thuộc tính Mô tả
controls Thanh điều khiển
poster Ảnh đại diện
autoplay Tự động chạy video

Ví dụ:

9. Thẻ <audio>

Thẻ <audio> cho phép nhúng file âm vào thanh vào trang web mà không cần dùng plugin của trình duyệt.

Ví dụ:

10. Thẻ <canvas>

Thẻ <canvas> được sử dụng để vẽ những hình ảnh đồ họa linh động trên trang web thông qua các ngôn ngữ script (thông thường là Javascript)

Canvas có thể vẽ một khối màu đỏ, khối màu gradient hay tập hợp nhiều màu trên một khối, tạo chữ nhiều màu, đổ bóng….

Ví dụ: 

Lưu ý

Đối với những bạn làm SEO, HTML5 sẽ có những tác động có ích khi thêm vào các thẻ như Header, Article để tối ưu bài viết sẽ dễ dàng để con bọ tìm kiếm Google hoạt động, theo dõi, phân tích dựa trên những thuật toán hiện tại.

Kết luận

Như vậy trong bài viết hôm nay, chúng ta đã có cái nhìn chi tiết hơn về các thành phần mới trong HTML5, cách sử dụng của chúng. Hẹn gặp lại các bạn trong bài kế tiếp.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây