Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Organizing your HTML code

Saturday, August 24th, 2013 by Servage

Organizing Page Content

Prior to HTML5, there was no way to group these bits into larger parts other than wrapping them in a generic division (div) element.

HTML5 introduced new elements that give semantic meaning to sections of a typical web page or application, including sections (section), articles (article), navigation (nav), tangentially related content (aside), headers (header), and footers (footer). The new element names are based on a Google study that looked at the top 20 names given to generic division elements (code.google.com/webstats/2005-12/classes.html). Curiously, the spec lists the old address element as a section as well, so we’ll look at that one here too.

The elements discussed in this section are well supported by current desktop and mobile browsers, but there is a snag with Internet Explorer versions 8 and earlier.

Sections and articles

<section>…</section>
Thematic group of content

<article>…</article>
Self-contained, reusable composition

Long documents are easier to use when they are divided into smaller parts. For example, books are divided into chapters, and newspapers have sections for local news, sports, comics, and so on. To divide long web documents into thematic sections, use the aptly named section element. Sections typically have a heading (inside the section element) and any other content that has a meaningful reason to be grouped together.

The section element has a broad range of uses, from dividing a whole page into major sections or identifying thematic sections within a single article.

In the following example, a document with information about typography resources has been divided into two sections based on resource type.

<section>
<h2>Typography Books</h2>
<ul>
<li>…</li>
</ul>
</section>
<section>
<h2>Online Tutorials</h2>
<p>These are the best tutorials on the web.</p>
<ul>
<li>…</li>
</ul>
</section>

Use the article element for self-contained works that could stand alone or be reused in a different context (such as syndication). It is useful for magazine or newspaper articles, blog posts, comments, or other items that could be extracted for external use. You can think of it as a specialized section element that answers the question “Could this appear on another site and make sense?” with “yes.”

To make things interesting, a long article could be broken into a number of sections, as shown here:

<article>
<h1>Get to Know Helvetica</h1>
<section>
<h2>History of Helvetica</h2>
<p>…</p>
</section>
<section>
<h2>Helvetica Today</h2>
<p>…</p>
</section>
</article>

Conversely, a section in a web document might be comprised of a number of articles.

<section id="essays">
<article>
<h1>A Fresh Look at Futura</h1>
<p>…</p>
</article>
<article>
<h1>Getting Personal with Humanist</h1>
<p>…</p>
</article>
</section>

The section and article elements are easily confused, particularly because it is possible to nest one in the other and vice versa. Keep in mind that if the content is self-contained and could appear outside the current context, it is best marked up as an article.

Aside (sidebars)

<aside>…<aside>
Tangentially related material

The aside element identifies content that is related but tangential to the surrounding content. In print, its equivalent is a sidebar, but they couldn’t call the element sidebar, because putting something on the “side” is a presentational description, not semantic.

In this example, an aside element is used for a list of links related to the main article.

<h1>Web Typography</h1>
<p>Back in 1997, there were competing font formats and tools for making
them…</p>
<p>We now have a number of methods for using beautiful fonts on web
pages…</p>
<aside>
<h2>Web Font Resources</h2>
<ul>
<li><a href="http://typekit.com/">Typekit</a></li>
<li><a href="http://www.google.com/webfonts">Google Fonts</a></li>
</ul>
</aside>

The aside element has no default rendering, so you will need to make it a block element and adjust its appearance and layout with style sheet rules.

Navigation

<nav>…</nav>
Primary navigation links

The new nav element gives developers a semantic way to identify navigation for a site. Wrapping that list in a nav element makes its purpose explicitly clear.

<nav>
<ul>
<li><a href="">Serif</a>/li>
<li><a href="">Sans-serif</a></li>
<li><a href="">Script</a></li>
<li><a href="">Display</a></li>
<li><a href="">Dingbats</a>/li>
</ul>
</nav>

Not all lists of links should be wrapped in nav tags, however. The spec makes it clear that it should be used for links that provide primary navigation around a site or a lengthy section or article.

Headers and footers

  • Headers
<header>…</header>

The header element is used for introductory material that typically appears at the beginning of a web page or at the top of a section or article. There is no specified list of what a header must or should contain; anything that makes sense as the introduction to a page or section is acceptable.

  • Footers
<footer>…</footer>

The footer element is used to indicate the type of information that typically comes at the end of a page or an article, such as its author, copyright information, related documents, or navigation. The footer element may apply to the entire document, or it could be associated with a particular section or article. If the footer is contained directly within the body element, either before or after all the other body content, then it applies to the entire page or application.

Organizing your HTML code, 3.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.