Free Web Development Online Tutorials, Learn to Code
Learn HTML Coding, HTML5 Tag attributes, html5 Article tag usage, HTML5 Tutorial for Beginners

html5 Article tag example

Article tag in HTML5?

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

How to use Article tag?

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

HTML5 is very demmanding skill for Web Developer or Web Designer

Comment
Name
Email
Website
Subscribe