HTML
HTML5
CANVAS
HEADING TAGS
FORM TAGS
LIST TAGS
PARAGRAPH TAGS
p br pre
COMMON TAGS
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Thẻ article trong HTML5

Trong bài này chúng ta sẽ tìm hiểu cách sử dụng thẻ article trong HTML5, qua đó bạn sẽ biết được khi nào thì dùng thẻ article và khi nào dùng thẻ section.

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.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Trước khi xem bài này thì bạn phải xem bài cấu trúc HTML5 đã nhé, bởi vì mình sẽ không giải thích lại cấu trúc của một trang web làm bằng HTML5.

1. Thẻ article trong HTML5 là gì?

Article là một thẻ HTML được thêm vào trong phiên bản HTML5, nó được dùng để khai báo cấu trúc cho các bài viết sẽ hiển thị lên trang web.

Thẻ article được dùng trong các trang về danh sách bài viết hoặc chi tiết bài viết. Bên trong mỗi article bạn cũng có thể khai báo thêm các thẻ header khác, đó chính là phần tiêu đề của mỗi article.

<article></article>

Về tính chất thì thẻ article cũng giống như thẻ div, tức là hiển thị dạng block với chiều rộng 100% và chiều cao phụ thuộc vào nội dung bên trong của nó.

article jpg

2. Thêm article trong HTML5 vào layout

Trước tiên các bạn xem đoạn code cấu trúc 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 articleheader 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ẻ h1h2 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.

Nếu bạn có danh sách 2 mẫu tin thì làm thế nào? Rất đơn giản, bạn chỉ cần copy thẻ article thành 2 là được:

Demo RUN
<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:

article 1 JPG

Các bạn đừng hỏi mình là tại sao lại xấu thế nhé :3 Bởi vì chúng ta chưa sử dụng CSS để style cho giao diện này.

3. Lời kết

Qua bài này ta thấy thẻ header và footer không 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 header lại. Và đương nhiên là việc sử dụng các 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 một thẻ thông thường khác.

Cùng chuyên mục:

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Top