Article tag in html5 example

Html5 provides article tag to specify your content within the web page and distinguish other elements from the page.

In earlier HTML there was no element for article, we used to write a css-class that can be used for article, though there was some article tag in schema.org, now there is <article> tag in HTML5, and we don’t need to write any additional class, though still we can enhance the look of the tag using css.

The <article> element identifies a self-contained piece of content which can be distributed with other websites

Use Article tag inside section tag in html5?

The article tag indicates a self-sufficient piece of content which can be distributed with any other websites and social media platforms.

We can use this article tag for our blog post another way to tell search engine about the new piece of information to be crawled first.

Though Article tag definition in schema.org remain the first choice

Article tag example

<article>
This is an example of article tag in html5
</article>

Html5 article tag vs section

The section element actually represents a generic section of a document or application, this would be good for grouping of contents.

Article element contains complete information of any document, chapter, article can be more appropriate for articulating complete information on any subject, blog post can be good example

Sometimes people use article tag inside section tag like example below, means in one section they put multiple articles, personally i don’t like this

<section id="main">
    <article>
      <!-- blog post 1 -->
    </article>
    <article>
      <!-- blog post 2 -->
    </article>
    <article>
      <!-- blog post 3 -->
    </article>
</section>

Rather i feel using section tag inside article tag is more logical and make sense to me, like example below

<article>
    <section id="introduction">
    </section>
    <section id="content">
    </section>
    <section id="summary">
    </section>
</article>

Article title tag html5

Some of you may have question whether we can use title tag inside an article tag, or how to use title inside article tag, the answer is yes, you can add title tag inside every article tag, below is an example of how article tag can be used

<article>
  <header>
    <h1>HTML5 Tutorial</h1>
    <p>Published: <time pubdate="pubdate">2019-19-08</time></p>
  </header>
  <p>Here is the details of tutorial will appear</p>
  <footer>
    <p> if you want to add some link at the bottom of the article</p>
  </footer>
</article>

HTML5 Tags Examples

Here are some of very useful html5 tags you must know