HTML5 04 – Thêm Article trong HTML5

0
276

Bài trước chúng ta đã được tìm hiểu các thành phần mới trong HTML5, trong bài này, chúng ta sẽ tìm hiểu thêm 1 thẻ mới  đó là thẻ article trong HTML5. Mỗi article chính là một mẫu tin, và ta sẽ coi nó như là một phần gồm có header và footer.

Khái niệm

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ụ mẫu

Trong phần section này tôi muốn hiển thị một mẫu tin tức nên đã tạo một article và trong article có header chứa tiêu đề, một thẻ p chứa nội dung và một thẻ footer chứa thông tin tác giả và ngày đăng của tin tức.

Trong header có 2 thẻ h1 và h2 nên tôi có dùng một thẻ hgroup để bao quanh lại, nếu bạn chỉ sử dụng một thẻ h1 thôi thì không cần dùng thêm thẻ hgroup.

Tất cả những thẻ article, hgroup, header, footer, section, aside là những thẻ HTML5, những thẻ còn lại là thẻ HTML thông thường.

Giả sử bạn có danh sách 2 mẫu tin thì làm thế nào? Đơn giản bạn chỉ cần copy thẻ article thành 2 là được. Ví dụ:

Kết luận

Qua bài này ta thấy thẻ header footer không phải chỉ để dùng cho phần layout chính mà bạn có thể dùng cho bên trong thẻ article. Trong header ta có thẻ HTML5 hgroup để gộp phần header lại, và đương nhiên việc sử dụng thẻ này là không bắt buộc, tức là thay vì dùng thẻ header trong article thì bạn có thể dùng thẻ div hay thẻ thông thường khác.

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