Bài 02: Thêm Article Trong HTML5

Bài trước chúng ta đã được tìm hiểu cấu trúc một template chuẩn HTML5 nhưng chỉ mới học cách sử dụng đơn giản, nên trong bài này ta sẽ đi sâu vào ...

Bài trước chúng ta đã được tìm hiểu cấu trúc một template chuẩn HTML5 nhưng chỉ mới học cách sử dụng đơn giản, nên trong bài này ta sẽ đi sâu vào hơn xíu đó là khai báo một 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.

Trước tiên các bạn xem lại code ở bài trước đã nhé. Ở bài trước ta đã tạo được một template đơn giản theo chuẩn HTML5, và trong bài này ta sẽ tiến hành xây dựng phần section.

Thêm Article Trong HTML5

Các bạn xem đoạn code HTML5 dưới đây:

<!doctype html>
<html lang="vi">
    <head>
        <meta charset="utf-8" />
        <title>Chương Trình HTML Đầu Tiên</title>
    </head>
    <body>
        <header>
            <h1>HTML5 Cho Người Mới Bắt Đầu Tại Freetuts.net</h1>
        </header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Serie</a></li>
                <li><a href="#">Tutorial</a></li>
                <li><a href="#">Ebook</a></li>
            </ul>
        </nav>
        <section>
            <article>
                <header>
                    <hgroup>
                        <h1>Trung Quốc vi phảm chủ quyền biển Việt Nam</h1>
                        <h2>Bản Tin 24/7</h2>
                    </hgroup>
                </header>
                <p>Trung quốc xâm phạm vùng biển thuộc chủ quyền việt nam một cách trắng trợn</p>
                <footer>
                    <p>Tác giả: thehalfheart - Đăng ngày: 08-05-2014</p>
                </footer>
            </article>
        </section>
        <aside>
            <h3>Tuts HTML</h3>
            Học Lập Trình HTML5
        </aside>
        <footer>
            Copyright 2014 By Freetuts.net
        </footer>
    </body>
</html>
Trong này phần header và nav, aside và footer vẫn y như bài trước, riêng phần section mình có thêm một số thẻ bên trong, đó là:
<section>
            <article>
                <header>
                    <hgroup>
                        <h1>Trung Quốc vi phảm chủ quyền biển Việt Nam</h1>
                        <h2>Bản Tin 24/7</h2>
                    </hgroup>
                </header>
                <p>Trung quốc xâm phạm vùng biển thuộc chủ quyền việt nam một cách trắng trợn</p>
                <footer>
                    <p>Tác giả: thehalfheart - Đăng ngày: 08-05-2014</p>
                </footer>
            </article>
        </section>
Trong phần section này mình muốn hiển thị một mẫu tin tức nên mình đã 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 mình có 2 thẻ h1 và h2 nên mình 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:

<section>
            <article>
                <header>
                    <hgroup>
                        <h1>Trung Quốc vi phảm chủ quyền biển Việt Nam</h1>
                        <h2>Bản Tin 24/7</h2>
                    </hgroup>
                </header>
                <p>Trung quốc xâm phạm vùng biển thuộc chủ quyền việt nam một cách trắng trợn</p>
                <footer>
                    <p>Tác giả: thehalfheart - Đăng ngày: 08-05-2014</p>
                </footer>
            </article>
            <article>
                <header>
                    <hgroup>
                        <h1>Trung Quốc vi phảm chủ quyền biển Việt Nam</h1>
                        <h2>Bản Tin 24/7</h2>
                    </hgroup>
                </header>
                <p>Trung quốc xâm phạm vùng biển thuộc chủ quyền việt nam một cách trắng trợn</p>
                <footer>
                    <p>Tác giả: thehalfheart - Đăng ngày: 08-05-2014</p>
                </footer>
            </article>
        </section>
Vậy là đã có 2 mẫu tin rồi đúng không nào :D. Chạy lên và kết quả là đây:

Lời Kết

Qua bài này ta thấy thẻ header và 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 để gop 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.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan

Bài 02: Một số quy tắc & chỉ thị cơ bản trong file .htaccess

Ý nghĩa của một số cụm từ/thuật nghữ được sử dụng trong bài viết. Rewrite: Viết lại. Rewrite Engine: Công cụ/máy viết lại Rewrite Url: Viết lại đường dẫn. Rewrite Rule: Quy tắc viết lại Rewrite Cond: Điều kiện để thực thi việc viết lại. Trong khuôn khổ bài viết này mình sẽ trình bày một số ...

Tạ Quốc Bảo viết 3 tuần trước

Bài 02: Các phần tử trong HTML

Trong bài trước mình đã viết một thẻ hay phần tử HTML là tất cả nội dung phía trong thẻ mở và thẻ đóng bao gồm cả tên thẻ. Thẻ bắt đầu * Nội dung của phần tử Thẻ kết thúc * <p> Đây là một đoạn </p> <a href="/default.htm"> Đây là một liên kết ...

Bùi Văn Nam viết 3 tuần trước

Bài 02: Hiểu về Data Binding trong AngularJs

Ở bài trước, mình đã có nhắc sơ về Data Binding trong AngularJs, và có đưa ra một ví dụ Hello Worls để các bạn có cái nhìn đầu tiên về AngularJS. Bài viết này mình sẽ giúp các bạn đi sâu vào tìm hiểu & giải thích cho các bạn cơ chế Data Binding trong AngularJs. 1. Data Binding trong ...

Tạ Quốc Bảo viết 3 tuần trước

Phân Biệt Thẻ <section> và Thẻ <article> trong HTML5

HTML5 giới thiệu một loạt các thẻ mới giúp các lập trình viên frontend có thể đánh dấu trang văn bản HTML một cách rõ ràng và chi tiết hơn. Tuy nhiên cách sử dụng của một số thẻ mới này đã gây ra không ít bối rôi cho các lập trình viên. Hai trong số các thẻ khiến người dùng cảm thấy bối rối khi sử ...

Bùi Văn Nam viết 17:01 ngày 12/08/2018

Bài 02: Cấu trúc cây trong XML

Một tài liệu XML được tạo bởi các thẻ ( XML element ) và chúng có thể được tổ chức theo một cấu trúc cây thư mục, điều này còn có thể gọi là ...

Trịnh Tiến Mạnh viết 10:23 ngày 03/08/2018
0