The article Tag

Contact Us or call 1-877-932-8228
The article Tag

The article Tag

The W3C specification described the article element as follows:

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

The major difference between the article element and the section element is that an article element encapsulates content that could stand alone and might be of interest outside the context of the page. The most obvious example is a blog entry; however, we could also apply this to the whole of our course description as you can imagine wanting to syndicate all of our outlines to a website that aggregates course information from different training companies.

To do this, we would just wrap everything up in an article tag:

Code Sample:

html5-sections/Demos/html5-course-outline-article.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----
<article id="css-course">
	<h1>CSS Training</h1>
	<div id="left">
		<section id="overview">
---- C O D E   O M I T T E D ----
		</section>
		<section id="goals">
---- C O D E   O M I T T E D ----
		</section>
	</div>
	<div id="right">
		<section id="outline">
---- C O D E   O M I T T E D ----
		</section>
		<section id="tech-reqs">
---- C O D E   O M I T T E D ----
		</section>
	</div>
</article>
</body>
</html>

This would have no visual impact on the page.

Note that you can nest articles. The common example used is a comment in a blog article. However, we might want to change our overview from a section element to an article element recognizing that the course aggregation site might want to have a page aggregating the overviews:

Code Sample:

html5-sections/Demos/html5-course-outline-article-nested.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----
<article id="css-course">
	<h1>CSS Training</h1>
	<div id="left">
		<article id="overview" title="Webucator CSS Class Overview">
			<h2>Class Overview</h2>
			<p>This CSS training class teaches students to use Cascading Style Sheets to format HTML pages.</p>
		</article>
		<section id="goals">
---- C O D E   O M I T T E D ----
		</section>
	</div>
	<div id="right">
		<section id="outline">
---- C O D E   O M I T T E D ----
		</section>
		<section id="tech-reqs">
---- C O D E   O M I T T E D ----
		</section>
	</div>
</article>
</body>
</html>

In addition to nesting articles within articles, you can:

  • Nest sections within sections.
  • Nest sections within articles.
  • Nest articles within sections.
Next