The section Tag

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

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.

Next