How to use the semantic element article

In this post we will learn how to use the semantic element article, as well as some suggestions on how to apply it to real projects.

Optimal use of the semantic element article

We can think of the article element as an isolated component in a document, page, or site.

That it can be reused in multiple places, without depending on the general context of the rest of what is displayed around or next to it.

An HTML document can contain more than one article element in its composition

For example, in a blog that displays a list of posts, each post can be inserted into an article element.

Some precautions to use the article:

Inside an article insert a title with heading tags (<h1>-<h6>);
When an article element is inserted into another article, it must contain a subject related to the parent article;
Publication date of an element in an article Article, for example, a post, can be described using the datetime attribute of the <time> element;

Example of using the article element

Let’s now see an HTML example of an article element if it were in a real project

The context is a blog post, in a post listing, see:

<section class="blog_posts">
     <header>
         <h1>Blog Posts</h1>
     </header>
     <article>
         <h2>How to use the article element</h2>
         <p>The article element can be used independently in HTML and also...</p>
         <a href="#">Keep reading</a>
         <footer>
             <p>
                 Written in
                 <time datetime="2019-07-31 12:00">July 31st</time>
                 by Matthew
             </p>
         </footer>
     </article>
</section>

Note that in this list of posts we only have one post, but the idea is the same for the others, to replicate this article structure for each one of them

The structure itself involved other elements, also semantic, but the main idea is that the article can be something detached from the context that was inserted

This post, for example, could be inserted in the footer of the page as well.

Conclusion

We have seen that the article element represents content that can be reused throughout your site

It does not depend on the contents surrounding it and we can also have several articles on a page

And that’s it for today, until the next post!

Also check our YouTube channel by clicking here!