HTML5 Article Tag

The article element is one of the new elements that have been introduced with HTML5. As this is a new element there has been some confusion of how to use this element. But there seems to be an agreement that you use the <article> element when you markup content, that makes sense on its own. What does this mean? It means that you could use the <article> element when marking up an â€œabout me" page, a blog entry, and also every comment to your blog entry.

But you are not supposed to use the <article> element around every single paragraph â€“ the point is, whatever you put in the <article> element it is supposed to make sense on its own.

Example :

<!DOCTYPE html>
        <body>
        <article>
                <div id="header">
                        <h1>This is Article Tag</h1>
                </div>
                <div id="content">
                        <h2>Sample article Text 1</h2>
                         <p>Sample paragraph 1</p>
                        <h2>Sample article Text 2</h2>
                        <p>Sample paragraph 2</p>
                </div>
        </article>
        </body>
</html>

Output :

Sample article Text 1

Sample paragraph 1

Sample article Text 2

Sample paragraph 2

HTML5 Aside Tag

The aside element is new to HTML5 and it can be used in two different contexts. Basically, the context of the <aside> element is based on whether or not it inside or outside the article element.

The aside element can also be used to mark up content which is relevant to your page as a whole.

Example :

	
<!DOCTYPE html>
 
       <head>
        <title>Aside Tag</title>
        </head>
        
        <body>

       <aside>
        <h3>Top Websites List</h3>
        <a href="http://www.google.com">Google</a>
        <a href="http://youtube.com/"> youtube</a>
        <a href="http://www.linkedin.com">linkedin</a>
        </aside>
        <article>
                <header>
                        <h1>Top Websites<h1>
                </header>
                <section>
                        <h2>Sample Website</h2>
                        <p>Sample aside tag</p>
                        <p>Sample aside tag description !!!!!!</p>
                </section>
        </article>

        </body>

</html>

Output :

Top Websites

Sample Website

Sample aside tag

Sample aside tag description !!!!!!

HTML5 Tutorial