article tag in HTML5 with example

Home » HTML 5 Examples » HTML 5 Tutorials » HTML5 » article tag in HTML5 with example

article tag in HTML5 with example

Posted by 20Fingers2Brains on Tags: HTML 5 Examples , HTML 5 Tutorials , HTML5

The HTML5 tag article is used to represent an article.
The content of article tag is independent from the other contents of the site.
The article tag can have a post, an article, a blog or user's comment as content.
This tag was introduced in HTML5.
The <article> tag is supported in Internet Explorer 9+, Firefox, Opera, Chrome, and Safari. Internet Explorer 8 and earlier versions, do not support the <article> tag.

Example 1 :

<html>
    <head><title>Article tag in HTML5</title>
    </head>
    <body>
        <article>
            <b>jQuery</b>
            <p>jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. </p>
            <p>It is currently developed by a team of developers led by Dave Methvin. Used by over 55% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today</p>
        </article>
    </body>
</html>

Demo :

In the above example, we have created a bold element and two paragraph elements inside an article element.

Example 2 : article and Style

<html>
    <head><title>Article tag in HTML5</title>
        <style type="text/css">
            article
            {
                font-family:comic sans ms;
                color:orange;
            }
        </style>
    </head>
    <body>
        <article>
            <b>jQuery</b>
            <p>jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. </p>
            <p>It is currently developed by a team of developers led by Dave Methvin. Used by over 55% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today</p>
        </article>
    </body>
</html>

Demo :

In the above example, we have applied CSS class to the article element. We have used element selector to apply the style. The style is applied to all the elements inside the artilce element.

Example 3 : Article and jQuery

<html>
    <head><title>Article tag in HTML5</title>
    <style type="text/css">
    .article
            {
                font-family:comic sans ms;
                color:orange;
                border:10px solid skyblue;
            }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#myButton").click(function () {
                $("article").toggleClass("article");
            });
        });
    </script>
    </head>
    <body>
        <article class="article">
            <b>jQuery</b>
            <p>jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. </p>
            <p>It is currently developed by a team of developers led by Dave Methvin. Used by over 55% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today</p>
        </article>
        <br />
        <button id="myButton">Toggle Class</button>
    </body>
</html>

Demo :

In the above example, we have created an article element having paragraph element inside it. We have applied style to article tag, which is applied to all the elements inside it. We have used jQuery to select an article element, and we are toggling its style class on button click.