Home arrow HTML arrow Page 2 - Embedding External Content with HTML 5`s Article Tag
HTML

Embedding External Content with HTML 5`s Article Tag


In this penultimate part of a series on HTML 5, you will learn how to use its new <article> tag. This element should be used when itís necessary to include in a web page content that comes from an external source, such as feeds, blogs and even multiple web services. The beauty of <article> rests on its ability to wrap external data in a truly semantic way, which is harder to achieve with regular divs.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 6
May 03, 2010
TABLE OF CONTENTS:
  1. · Embedding External Content with HTML 5`s Article Tag
  2. · Review: semantic sidebars in HTML 5 with the aside element
  3. · Embedding external content into an HTML 5 document with the article tag
  4. · Including multiple blog entries in a document

print this article
SEARCH DEVARTICLES

Embedding External Content with HTML 5`s Article Tag - Review: semantic sidebars in HTML 5 with the aside element
(Page 2 of 4 )

As always, before I start digging deeper into the proper the usage of the <article> element referenced in the introduction, itíd be helpful to reintroduce the examples shown in the previous article. They demonstrated how to utilize the <aside> tag for creating a sidebar on a web page.

Having said that, hereís the first of the examples. In this particular case it defines only a simple sidebar in a document, without including the corresponding footer. Here it is:

<!doctype html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Example of the HTML 5 aside tag</title>

</head>

<body>

<header>

<h1>Example of the HTML 5 aside tag</h1>

</header>

<nav>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Articles</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

<section id="biography">

<header>

<h2>This is the introduction to my biography</h2>

</header>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>

</section>

<aside>

<header>

<h2>This is the sidebar</h2>

</header>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>

</aside>

</body>

</html> 

Certainly, the <aside> tag isnít going to change forever the way that you design your HTML documents, but it can help you get rid of the extra divs that you use frequently for creating your sidebars. The above code sample shows how to create a section like this in a pretty trivial manner, since it doesnít include a footer area.

The following code fragment, however, is slightly more realistic. It uses the  <aside> tag in conjunction with the already familiar <footer> element to add the missing footer. Check it out:

<!doctype html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Example of the HTML 5 aside tag (with a footer section)</title>

</head>

<body>

<header>

<h1>Example of the HTML 5 aside tag (with a footer section)</h1>

</header>

<nav>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Articles</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

<section id="biography">

<header>

<h2>This is the introduction to my biography</h2>

</header>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>

</section>

<aside>

<header>

<h2>This is the sidebar</h2>

</header>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>

</aside>

<footer>

<section id="news">

<header>

<h2>Latest News</h2>

</header>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>

</section>

</footer>

</body>

</html>

Well, at this point youíll have to agree with me that the previous document looks much better! As you can see, the process of defining semantic sidebars with the <aside> HTML 5 element can be easily mastered, even if youíre just taking your first steps in the terrain of professional web design.

And now that you've learned how to work with the <aside> tag, itís time to explore a few other elements provided by HTML 5. In keeping with this idea, in the upcoming segment Iím going to demonstrate how to work with the <article> tag, which can (and should) be used for wrapping contents retrieved from an external source.

Now, click on the link below and keep reading.


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials