facebook google plus twitter
Webucator's Free HTML5 Tutorial

Lesson: Sections and Articles

Welcome to our free HTML5 tutorial. This tutorial is based on Webucator's HTML5 Training for Web Developers course.

In HTML 4, we use the <div> tag to separate HTML pages into parts. Sometimes those parts were structurally meaningful. For example, a page describing a course might include an overview, goals, prerequisites, and an outline. Each of those parts might be enclosed in a <div> tag with meaningful ids to provide meaningful structure to the page. However, <div> tags are also used to separate parts of a page for styling purposes, for example to create a column layout. In this case the areas encompassed in <div> tags might not be structurally different. Browsers cannot distinguish between structurally meaningful and meaningless divs, so they do not attribute any special significance to either kind.

This lesson explains the purpose of and difference between <section> and <article> tags, how they differ from <div> tags and how they affect a page's "outline."

Lesson Goals

  • Learn how to use <section> and <article> tags to eliminate inherent HTML 4 structure problems.
  • Learn what outlining is and how it is determined.
  • Learn how heading tags (<h1>, <h2>, etc.) affect a document's structure/outline.

The section Tag

HTML5 introduces the <section> tag to break up a page in a meaningful way, leaving <div> tags to be used only for structurally meaningless page sectioning. First we will look at the HTML 4 way and then we'll see how to "fix" things with HTML5.

The HTML 4 Way

This following two demos show how pages can be "sectioned" in HTML 4.

Code Sample:

html5-sections/Demos/html4-course-outline.html
---- C O D E   O M I T T E D ----

<h1>CSS Training</h1>
<div id="overview">
	<h2>Class Overview</h2>
	<p>This CSS training class teaches students to use Cascading Style Sheets to format HTML pages.</p>
</div>
<div id="goals">
	<h2>Class Goals</h2>
	<ul>
		<li>Learn the benefits of CSS.</li>
		<li>Learn to avoid using deprecated tags and attributes.</li>
		<li>Learn CSS syntax.</li>
		<li>Learn to use &lt;div&gt; and &lt;span&gt; tags appropriately.</li>
		<li>Learn most of the common properties and their values.</li>
		<li>Learn to create custom CSS cursors.</li>
		<li>Learn to style links with CSS to create "CSS Buttons".</li>
		<li>Learn to work with borders, margin, and padding (the box model).</li>
		<li>Learn to style tables with CSS.</li>
	</ul>
</div>
<div id="outline">
	<h2>Class Outline</h2>
	<ol>
		<li>Crash Course in CSS</li>
		<li>CSS Fonts</li>
		<li>CSS Text</li>
		<li>Colors and Backgrounds</li>
		<li>Custom Cursors</li>
		<li>CSS and Links</li>
		<li>Borders, Margins and Padding</li>
		<li>Styling Tables with CSS</li>
	</ol>
</div>
<div id="tech-reqs">
	<h2>Technical Requirements</h2>
	<ol>
		<li>HTML or Text Editor</li>
		<li>Web Browser</li>
	</ol>
</div>
</body>
</html>

We have used some CSS to make the page render as follows: Course Outline

Note that each "section" is separated visually, but without the CSS they would not be. Also note that the browser doesn't know that these divisions have structural meaning. To illustrate this point, we'll add a couple meaningless <div> tags.

Code Sample:

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

With new "left" and "right" divs, we can now style the page with CSS to render as follows: Course Outline with Left and Right Divs

But these two new <div> tags have not provided any new context to the page. They are purely there for formatting purposes.

The HTML5 Way

Now let's look at the HTML5 way.

Code Sample:

html5-sections/Demos/html5-course-outline.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----
<h1>CSS Training</h1>
<div id="left">
	<section id="overview">
		<h2>Class Overview</h2>
---- C O D E   O M I T T E D ----
	</section>
	<section id="goals">
		<h2>Class Goals</h2>
---- C O D E   O M I T T E D ----
	</section>
</div>
<div id="right">
	<section id="outline">
		<h2>Class Outline</h2>
---- C O D E   O M I T T E D ----
	</section>
	<section id="tech-reqs">
		<h2>Technical Requirements</h2>
---- C O D E   O M I T T E D ----

	</section>
</div>
</body>
</html>

The above code will render the following:Course Outline with HTML5

Notice how we used <section> tags for the structurally meaningful parts:

  • Overview
  • Goals
  • Outline
  • Technical Requirements

And <div> tags for the structurally meaningless "left" and "right" divisions.

Display of HTML5 Structural Elements

By default, browsers treat the <div> tag as a block-level element as per instructions provided by the W3C. However, the W3C didn't initially specify anything for the new HTML5 structural tags (e.g., header, footer, aside, section, article, nav). As such, the different browser makers have had to decide individually whether to display these elements as blocks or inlines. The W3C now does specify that these should all be treated as block-level elements.

Consider the following code sample:

Code Sample:

html5-sections/Demos/html5-structural-tags.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Structural Elements - Default Styling</title>
</head>
<body>
	<header>header</header>
	<nav>nav</nav>
	<aside>aside</aside>
	<section>section</section>
	<article>article</article>
	<footer>footer</footer>
</body>
</html>

Here is how different browsers display this page: HTML5 Structural Tag Display

As the image above shows, earlier versions of browsers (Internet Explorer prior to version 9, in particular) treat HTML5 structural tags as inlines. All the latest browsers correctly treat them as block-level elements; however, to be backward compatible, you may want to include the following code in your CSS:

header, footer, aside, section, article, nav, hgroup { display: block; }

Internet Explorer 8 and Earlier

Unfortunately, for Internet Explorer 8 (and earlier), we must take a further step. Because IE8 does not recognize these new tags, it ignores them unless they have been created programatically (i.e, with JavaScript). You can create each element using document.createElement(), but someone has already done all this heavy lifting for you. To make sure IE8 treats these new elements properly, all you have to do is add the following code in your head:

<!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

The included JavaScript is called the html5shim or html5shiv. More information is available at http://code.google.com/p/html5shiv.

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.

Using section and article Elements

Duration: 15 to 25 minutes.

In this exercise, you will modify an HTML page we worked on earlier in the course to replace meaningless div elements with meaningful section and article elements.

  1. Open html5-sections/Exercises/html5-layout.html.
  2. Replace meaningless div elements with meaningful section and article elements. Note that there is room for interpretation here, so there is no one correct solution.
  3. To keep the page looking as it did before, you will also need to modify html5-sections/Exercises/style-html5.css.

Solution:

html5-sections/Solutions/html5-layout.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----
<div id="content">
	<article id="services" title="HTML5 Solutions Services">
		<h1>Services</h1>
		<section id="training">

---- C O D E   O M I T T E D ----
		</section>
		<section id="consulting">

---- C O D E   O M I T T E D ----
		</section>
	</article>
	<article id="products" title="HTML5 Solutions Products">
		<h1>Products</h1>
		<section id="editor">

---- C O D E   O M I T T E D ----
		</section>
		<section id="templates">

---- C O D E   O M I T T E D ----
		</section>
	</article>
</div>
---- C O D E   O M I T T E D ----

An argument could be made for turning the "content" div into a section; however, the main reason for wrapping that content in a div tag is to be able to position the main content on the page, so we left it as a div.

Likewise, you could argue for making each partner div a section or even an article, but we wrapped them in div tags mostly so that we could float them left.

Finally, turning the "services" and "products" div elements into article elements is a bit arbitrary too. You could just as easily make them sections.

Solution:

html5-sections/Solutions/style-html5.css
body {
	font-family:tahoma;	
}

header, footer, aside, section, article, nav, hgroup {
	display: block;
}
---- C O D E   O M I T T E D ----
#content section h2  {
	float:right;
	font-size:xx-large;
	color:#006;
}

#content>article {
	clear:both;	
}

#content article section {
	float:left;
	padding:10px;
	width: 500px;
	border:1px solid #006;
	font-size:small;
}
---- C O D E   O M I T T E D ----

Outlining

The HTML5 specification describes an algorithm to determine the outline of a web page. This allows:

  1. User agents (e.g., browsers and screenreaders) the ability to present data to the consumer in a logical way.
  2. Syndicators to syndicate portions of a page's content in a structurally meaningful way.
  3. Authors to create pages with any number of heading levels.

While this feature is useful, it is poorly implemented in modern versions of all browsers at the time of this writing. For those interested in investigating HTML5 outling in more detail, we suggest checking out the HTML5 Outliner project, offering Chrome and FireFox browser extensions to display outlines, and more detailed background information from the W3C.