HTML5 article element
article element is used to semantically mark the main content section or sections of a
An HTML5 page may contain multiple individual parts of main content. For instance, a blog website may contain a page
with multiple blog posts in. In that case, each blog post would be enclosed in its own
element. Another example could be individual news articles on a news site.
Here is an illustration of a page with multiple content sections:
|The main content sections of an HTML5 page.|
Here is how it could look in HTML5 code:
<html> <body> <header> Logo etc. <nav> <a href="page1.html">Page 1</a> <a href="page2.html">Page 2</a> <a href="page3.html">Page 3</a> </nav> </header> <nav> <a href="subpage1.html">SubPage 1</a> <a href="subpage2.html">SubPage 2</a> <a href="subpage3.html">SubPage 3</a> </nav> <article> <p>Main content section 1</p> </article> <article> <p>Main content section 2</p> </article> <footer>...</footer> </body> </html>
Remember that the
article element is a semantic element. It does not have any special look.
You can still style it using CSS though, as you can with a
Also remember, that being a semantic element you do not have to put a
into your page. The
article element is intended to be used by future intelligent browsers (maybe)
and web crawlers etc. but there is no guarantee about how these software components will use these elements.
Only the future will tell.
Main Content Headers
In case your main content sections have head lines or other header information (publishing date, author etc.),
that content goes inside the
article element. Here is an example:
<article> <h2>Title</h2> <p>Main content section 1</p> </article>