You Developers: Creating articles and sections with HTML5

Friday, May 25, 2012

Creating articles and sections with HTML5

If you write for a living, as I do, you learn to organize content into chunks, and sub-chunks, concepts and sub-concepts, ideas and more detailed ideas, and so on. The basic rule for organizing content in this way is that if you create a sub-section, you have to create two sub-sections. Otherwise, there is no point in creating a sub-section.

In line with our recurring theme of the unity between content and design in HTML5 layout, content in HTML5 pages (where it has to be broken down) is broken down into articles. Moreover, where there is a need for distinct sub-sections within an article, those sub-sections are sections.

As you create a CSS file to match your HTML layout elements, you might well assign specific formatting to articles, and to sections. For example, you might choose to indent section content, or place a unique background behind it. In the following example, article content is set off with a unique background and text color, and within articles, sections are indented.

The code for the <article> and <section> elements in the preceding illustration, including placeholder text and headings is:

<article>
<h3>First article</h3>
<p>First article content ....</p>
<p>more content....</p>
<section>
<h3>1st section heading</h3>
<p>1st section content</p>
</section>
<section>
<h3>2nd section heading</h3>
<p>2nd section content</p>
</section>
</article>

Or… you might not apply specific CSS rules to articles and sections, and simply wrap content in the <article> and <section> elements for content organizing purposes, while relying on the <body> tag, the <p> (paragraph) tag, or custom class styles that you define in Dreamweaver for formatting article and section content.