Trong bài viết trước, mình đã chia sẻ cấu trúc cơ bản của HTML5 gồm những thẻ quan trọng mà bạn gặp thường xuyên như thẻ header, body, section, footer,aside, nav. Tiếp theo bài viết này mình chia sẻ cách chèn một thẻ Article vào HTML5. Các bạn theo dõi tiếp đoạn code sau nhé.

<!doctype html>
<html lang="vi">
    <head>
        <meta charset="utf-8" />
        <title>Đây là tiêu đề của trang web</title>
    </head>
    <body>
        <header>
            <h1>ĐÂY LÀ THẺ HEADER CỦA WEBSITE </h1>
        </header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Giới thiệu</a></li>
                <li><a href="#">Sản phẩm</a></li>
                <li><a href="#">Liên hệ</a></li>
            </ul>
        </nav>
        <section>
            Đây là phầnnội dung trang web
            <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>Sidebar HTML</h3>
            Sidebar quảng cáo đặt ở đây
        </aside>
        <footer>
            Ở đây là thẻ footer bên dưới website nhé
        </footer>
    </body>
</html>

Tiếp theo chúng ta sẽ đi phân tích sâu hơn về thẻ article.

<section>
            <article>
                <header>
                    <hgroup>
                        <h1>Đây là phần tiêu đề của mẫu tin của bạn</h1>
                        <h2>Bản Tin 24/7</h2>
                    </hgroup>
                </header>
                <p>Đây là phần nội dung của mẫu tin bình thường</p>
                <footer>
                    <p>Đây là phần thông tin tác giả và ngày đăng</p>
                </footer>
            </article>
</section>
Thẻ 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.
Các bạn chỉ cần lưu ý các thẻ article, hgroup, header, footer, section, aside nó thuộc HTML5, các thẻ còn lại thì đã sẵn có trong HTML thông thường
Nếu bạn muốn có 2 hay nhiều mẫu tin tức thì bạn chỉ cần thêm tương ứng thẻ Article, các thẻ nằm bên trong thẻ Article vẫn không thay đổi.
<section>
            <article>
                <header>
                    <hgroup>
                        <h1>Đây là phần tiêu đề của mẫu tin 1 của bạn</h1>
                        <h2>Bản Tin 24/7</h2>
                    </hgroup>
                </header>
                <p>Đây là phần nội dung của mẫu tin bình thường</p>
                <footer>
                    <p>Đây là phần thông tin tác giả và ngày đăng</p>
                </footer>
            </article>
             <article>
                <header>
                    <hgroup>
                        <h1>Đây là phần tiêu đề của mẫu tin 2 của bạn</h1>
                        <h2>Bản Tin 24/7</h2>
                    </hgroup>
                </header>
                <p>Đây là phần nội dung của mẫu tin 2 bình thường</p>
                <footer>
                    <p>Đây là phần thông tin tác giả 2 và ngày đăng</p>
                </footer>
            </article>
</section>
Bài viết này chỉ đơn giản như vậy, tham khảo thêm mẫu template các thẻ cơ bản trong HTML5 tại đây nhé.