The article tag in HTML5

24-07-2022
Trung Minh
0 Comments

In this article we will learn how to use the article tag in HTML5, so you will know when to use the article tag and when to use the section tag.

In the previous post, we have learned the structure of a standard HTML5 template but just learned how to use it simply, so in this article we will go into a little more depth that is declaring an article in html5 . Each article is a record, and we will treat it as a part that includes header and footer.

Before reading this article, you must see the HTML5 structure lesson, because I will not explain the structure of a web page made of HTML5.

1. What is the article tag in HTML5?

Article is an HTML tag added in the HTML5 version, it is used to declare the structure for the articles to be displayed on the web page.

The article tag is used in pages about article listings or article details. Inside each article you can also declare other header tags, which is the title of each article.

 <article></article>

In terms of properties, the article tag is like a div tag, ie displaying a block with a width of 100% and a height depending on its content.

2. Add HTML5 article to layout

First, see the HTML5 structure code below:

 <!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 web888.vn</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 web888.vn </footer> </body> </html>

In this section, the header and nav, aside and footer are still the same as in the previous post, the section itself has some more tags inside, which are:

 <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>

In this section , I want to display a news template, so I created an article , and in the article there is a header containing the title, a p tag containing the content and a footer tag containing the author information and the post date of the news. In the header , I have 2 tags h1 and h2 , so I used an hgroup tag to surround it, if you only use an h1 tag, you don't need to use an additional hgroup tag.

All the article, hgroup, header, footer, section, aside tags are HTMl5 tags, the rest are regular HTML tags.

What if you have a list of 2 records? It's very simple, you just need to copy the article tag into 2.

 <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>

3. Conclusion

Through this article we see that the header and footer tags are not only for the main layout but you can also use them inside the article tag. In the header we have the html5 hgroup tag to group the header. And of course, the use of these tags is optional, ie instead of using the header tag in the article, you can use a div tag or another regular tag.