Introduction to sections within HTML 5

Last updated on by cjh

Introduction to the new structural sections of HTML 5

  

HTML has been around for a long time, predating CSS, Flash, JavaScript, Firefox, Chrome, Internet Explorer, Google, Twitter, Amazon, and even the iPhone, but has only recently in its lifecycle starting receiving an update, having remained the same since just around the Millennium.

There has been xHTML, of course, but that was more about converting HTML 4 to XML like mark-up, which involved a lot stricter rules about how the HTML could be written, and was less about adding new elements, features, and functions.

HTML 5, on the other hand, has been targeting HTML 4 with the goal of becoming more relevant and meaningful in today’s World Wide Web.

What is HTML?

HTML has always been about marking up and defining what a piece of information is supposed to be when related to a web document. In the past, this has included:

The likes of CSS and JavaScript appeared to make these documents more interesting to look at and use, as well as the likes of Flash that made web pages a lot more interactive and fun, but the HTML behind these web pages generally remained the same.

But as the Internet has advanced, with millions of users and billions of pages and trillions of bytes flying all over the place, it became apparent that HTML would eventually need an update, and as a result of many developers, designers, and browser vendors, HTML 5 is well on its way to become an official HTML upgrade.

HTML 5

The HTML 5 specification aims to bring HTML based web pages forward for today’s market, by including more multi-media functions without a need for plug-ins, and by implementing mark-up that can be used throughout the Internet on all browsers, be they desktop, mobile, or TV based.

On area that HTML 5 has extended HTML is the marking up of sections of a web document. Certainly not the most exciting aspect of making web pages, but one that can be useful for defining what your content represents. If you’re interested in HTML 5, then knowing the available sections might be useful to you.

HTML 5 Candidate Recommendation.

On the 17th of December 2012, the HTML 5 specification reached the stage of “Candidate Recommendation”, meaning that the specification is getting close to being set in stone. A few changes could still be made, but if you wanted to, you could make use of HTML 5 today.

CSS Styling and JavaScript

Because the new elements are part of the HTML web page, they are usable in the same way by CSS and JavaScript in supporting Web Browsers. For example, you can style an HTML 5 element in the same way, or apply JavaScript code to an HTML 5 element, such as:

<style type="text/css">
div, article, section, p {
color: black;
background: white;
}
</style>

<script type="text/javascript">
var allDIVelements = document.getElementsByTagName("div"); // Get all <div>’s
var allSECTIONelements = document.getElementsByTagName("section"); // Get all <section>’s
var allPelements = document.getElementsByTagName("p"); // Get all <p>’s
</script>

And, with that, lets see those new HTML 5 elements that have made an appearance.

The new “article” element, as defined using the <article> HTML element

The article element, written as <article>, is designed to mark out the principal content of a web page, which could be a news story, a blog post, a post on a forum [http://chat.freeola.com/], anything.

It isn’t intended as exclusively used to mark-up an actual “article” such as you would find on a news site, so there isn’t <article> for an article, <blog> for a blog, <guide> for a guide, <manual> for a manual, etc.

<!DOCTYPE html>
<html>
<head>
<title>My Example HTML 5 Web Page</title>
</head>
<body>

<!-- Some Links, logo, maybe some ads. -->

<article>
<h1>A short guide to HTML 5</h1>
<p>Hello, and welcome to this short guide to HTML 5</p>
<p>Below is the short guide</p>

<h2>What is HTML 5?<h2>
<p>A short section that may introduce HTML 5</p>
<p>It could talk about who uses it and why, and when it was created.</p>
<p>Oh, and you could add a picture as well <img src="/images/html5.png" alt="HTML 5 Logo">.</p>

<h2>Why HTML 5 and not just Flash?<h2>
<p>This section might talk about HTML 5 vs. Flash.</p>
<p>Such a section would usually consist of more than two paragraphs.</p>
</article>

<!-- Some links, copyright info, contact info. -->

</body>
</html>

The example above shows that you would surround the main contain of the web page within the <article> and </article> elements, and within it use HTML headings and paragraphs to talk about HTML 5.

If you wanted to use CSS on the article element, you can do so just like any other CSS declaration, such as:

<style type="text/css">
article { /* Add a red dashed border around the <article> elements content. */
border: 1px dashed red;
}
article h2 { /* Add a underline border to each <h2> element within <article>. */
border-bottom: 2px solid blue;
}
</style>

The new “section” element, as defined using the <section> HTML element

  

The section element, written as <section>, is designed to mark out different sections of a web page’s content. If used within an <article> element, it could be used to break up the content in to different parts of the document, similar to how you might break up a book with chapters, or a user guide to a video game with different <section>’s for each level of the game.

A <section> can in itself contain its own level 1 heading (<h1>) to highlight a principal heading for that individual section of your web page.

A <section> doesn’t have to be exclusively used within an <article> element, though this is perhaps where it will most likely make its appearance. You might want a <section> for your main page navigation, the top part of your page that contains the page logo and web site name, or the bottom of the page, but other elements exist that might be better for the task, which are talked about later.

Adding a <section> is easy, as shown in the example below that extends the first example we had above:

<!DOCTYPE html>
<html>
<head>
<title>My Example HTML 5 Web Page</title>
</head>
<body>

<!-- Some Links, logo, maybe some ads. -->

<article>
<h1>A short guide to HTML 5</h1>
<p>Hello, and welcome to this short guide to HTML 5</p>
<p>Below is the short guide</p>

<section id="whatHTML">
<h1>What is HTML 5?</h1>
<p>A short section that may introduce HTML 5</p>
<p>It could talk about who uses it and why, and when it was created, but because we’re using <section>’s you could add level 2 headings for each part.</p>

<h2>Who invented HTML 5?</h2>
<p>This part of the section could talk about WHATWG and its members.</p>
<p>Oh, and you could add a picture as well <img src="/images/whatwg.png" alt="Logo for the WHATWG">.</p>

<h2>Why did WHATWG create HTML 5?</h2>
<p>Then, you could talk about why they extended HTML.</p>

<h2>Who uses HTML?</h2>
<p>Then, you could talk about who uses HTML.</p>
</section>

<section id="whyHTML">
<h1>Why HTML and not just Flash?<h1>
<p>This section might talk about HTML vs. Flash.</p>

<h2>HTML</h2>
<p>Using a level 2 heading, you could go a little deeper into this section and add a little more detail about HTML</p>

<h2>Flash</h2>
<p>Using a level 2 heading, you could go a little deeper into this section and add a little more detail about Flash</p>
</section>

<section id="firstHTML">
<h1>Your first HTML 5 Web Page</h1>
<p>… and so on …</p>
</section>
</article>

<!-- Some links, copyright info, contact info. -->

</body>
</html>

You may notice the use of the “id” attribute within each <section> element, which is the same as any other use of “id” within a web page, in that the attribute value must be unique. It’s also handy to add an ID to each <section> for internal linking in a larger web page, such as using <a href="#whyHTML">Why use HTML?</a> to internally link to that section, which we’ll use as an example for the next element.

The new “nav” element, as defined using the <nav> HTML element

The nav element, written as <nav>, is designed to mark out the main navigational area of your web page. This can be the main “site-wide” navigation that you include on every page, as well as smaller navigational segments you only include on some pages, or even for the internal links to sections of a single web page.

The <nav> element does not replace the use of list elements (<ul>, <ol>, <il>) that people may already use, instead it merely surrounds the links to highlight any navigational links that are related to the web site as a whole, or the current web page.

The example below adds some internal links to each <section> of the web page, using an ordered list (<ol>), which is then surrounded by the <nav> element to mark it out as navigational:

<!DOCTYPE html>
<html>
<head>
<title>My Example HTML 5 Web Page</title>
</head>
<body>

<!-- Some Links, logo, maybe some ads. -->

<article>
<h1>A short guide to HTML 5</h1>
<p>Hello, and welcome to this short guide to HTML 5</p>
<p>Below is the short guide</p>

<nav>
<ol>
<li><a href="#whatHTML">What is HTML 5?</a></li>
<li><a href="#whyHTML">Why use HTML 5?</a></li>
<li><a href="#firstHTML">Your first HTML 5 Web Page</a></li>
</ol>
</nav>

<section id="whatHTML">
<h1>What is HTML 5?</h1>
<p>A short section that may introduce HTML 5</p>
<p>It could talk about who uses it and why, and when it was created, but because we’re using <section>’s you could add level 2 headings for each part.</p>

<h2>Who invented HTML 5?</h2>
<p>This part of the section could talk about WHATWG and its members.</p>
<p>Oh, and you could add a picture as well <img src="/images/whatwg.png" alt="Logo for the WHATWG">.</p>

<h2>Why did WHATWG create HTML 5?</h2>
<p>Then, you could talk about why they extended HTML.</p>

<h2>Who uses HTML?</h2>
<p>Then, you could talk about who uses HTML.</p>
</section>

<section id="whyHTML">
<h1>Why HTML and not just Flash?<h1>
<p>This section might talk about HTML vs. Flash.</p>

<h2>HTML</h2>
<p>Using a level 2 heading, you could go a little deeper into this section and add a little more detail about HTML</p>

<h2>Flash</h2>
<p>Using a level 2 heading, you could go a little deeper into this section and add a little more detail about Flash</p>
</section>

<section id="firstHTML">
<h1>Your first HTML 5 Web Page</h1>
<p>… and so on …</p>
</section>
</article>

<!-- Some links, copyright info, contact info. -->

</body>
</html>

The new “aside” element, as defined using the <aside> HTML element

The aside element, written as <aside>, is designed to mark out a section of content that is related to the current web page, but not necessarily a major part of it, and of which could be considered separate.

Such uses for the <aside> element could be to link to other web sites that offer related content to the current web page. For example, the examples used in this article are about a guide to HTML 5, and so an <aside> to this might be links to other people’s blog, articles, comments or forum post about HTML 5:

<!DOCTYPE html>
<html>
<head>
<title>My Example HTML 5 Web Page</title>
</head>
<body>

<!-- Some Links, logo, maybe some ads. -->

<article>
<h1>A short guide to HTML 5</h1>
<p>Hello, and welcome to this short guide to HTML 5</p>
<p>Below is the short guide</p>

<nav>
<ol>
<li><a href="#whatHTML">What is HTML 5?</a></li>
<li><a href="#whyHTML">Why use HTML 5?</a></li>
<li><a href="#firstHTML">Your first HTML 5 Web Page</a></li>
</ol>
</nav>

<section id="whatHTML">
<h1>What is HTML 5?</h1>
<p>A short section that may introduce HTML 5</p>
<p>It could talk about who uses it and why, and when it was created, but because we’re using <section>’s you could add level 2 headings for each part.</p>

<h2>Who invented HTML 5?</h2>
<p>This part of the section could talk about WHATWG and its members.</p>
<p>Oh, and you could add a picture as well <img src="/images/whatwg.png" alt="Logo for the WHATWG">.</p>

<h2>Why did WHATWG create HTML 5?</h2>
<p>Then, you could talk about why they extended HTML.</p>

<h2>Who uses HTML?</h2>
<p>Then, you could talk about who uses HTML.</p>
</section>

<section id="whyHTML">
<h1>Why HTML and not just Flash?<h1>
<p>This section might talk about HTML vs. Flash.</p>

<h2>HTML</h2>
<p>Using a level 2 heading, you could go a little deeper into this section and add a little more detail about HTML</p>

<h2>Flash</h2>
<p>Using a level 2 heading, you could go a little deeper into this section and add a little more detail about Flash</p>
</section>

<section id="firstHTML">
<h1>Your first HTML 5 Web Page</h1>
<p>… and so on …</p>
</section>
</article>

<aside>
<h1>Related to HTML 5</h1>
<p>Here are some other web sites about HTML 5 that you may like to read:</p>
<nav>
<ul>
<li><a href="http:// … etc …">Why I love HTML 5</a> by Joe</li>
<li><a href="http:// … etc …">Why I hate HTML 5</a> by Alice</li>
<li><a href="http:// … etc …">We’ve upgraded to HTML 5</a> from BBC News</li>
<li><a href="http:// … etc …">Apple sue HTML 5 for patent infringement, ask for $50,000,000,000 and HTML 5 ban</a> from Sky</li>
</ul>
</nav>
</aside>

<!-- Some links, copyright info, contact info. -->

</body>
</html>

An aside to a web page could also be related facts about the content, for example, the <aside> in the above example could contain a glossary of certain abbreviations:

<aside>
<h1>Definitions</h1>
<h2>HTML – HyperText Markup Language</h2>
<p>Used to mark up a web document.</p>
<h2>CSS – Cascading Style Sheets</h2>
<p>Used to add colour to a page and set out the layout.</p>
<h2>JavaScript</h2>
<p>Used to add interactivity to web pages, additional connectivity to your web site users, and security breaches in Internet Explorer.</p>
</aside>

The new “hgroup” element, as defined using the <hgroup> HTML element

The hgroup element, written as <hgroup>, is designed to mark out multiple levels of the heading elements (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) when used together to create multi-layered headings.

<html>

…

<hgroup>
<h1>Major News Story Headline</h1>
<h2>An important fact about the story</h2>
</hgroup>

.. news story goes here …

</html>

If we take a look at a very important story from the Daily Mail Web Site, you may see multiple headings under the main story heading, which could be marked up as such:

<html>

…

<hgroup>
<h1>Pamela Anderson is out (in more ways than one): Baywatch star voted off Dancing on Ice... but was her costume fail to blame for stumble in skate-off?</h1>
<h2>Voted off by the judges despite ending up third in the leaderboard with debut performance, with TV presenter Chegwin at the bottom</h2>
</hgroup>

… rest of story goes here …

</html>

  

The <hgroup> element is one that hasn’t been completely committed to the HTML 5 specification, and is currently on the “at risk” list, which may mean it doesn’t make it in to the next stage of the HTML 5 specification (Proposed Recommendation).

The new “header” element, as defined using the <header> HTML element

The header element, written as <header>, is designed to mark out the area of a web page that would contain the documents headings, or the headings within a section, as well as other content that may be considered relevant, such as a logo, tagline, or maybe the banner advert.

For example, previously authors might have used something like:

<div id="header">
<h1>Welcome to my Web Page</h1>
<p>Here is a tagline, and our logo <img src="/images/logo.png" alt="Logo"></p>
<p> … search box goes here… </p>
</div>

Whereas with the introduction of the <header> element, an author could chose to do the above in a more up to date way:

<header>
<h1>Welcome to my Web Page</h1>
<h2>Here is a tagline, and our logo <img src="/images/logo.png" alt="Logo"></h2>
<p> … search box goes here… </p>
</header>

Applying CSS would be just as simple, by including the required element names in your CSS, such as:

<style type="text/css">
header {
            font-size: 1.3em;
            background-color: black;
}
header h1, header h2 {
            font-size: 2.5em;
            color: white;
}
</style>

While a <header> would most likely appear at the top of your web page, just after the opening <body> element, it can also be used within other sections of your web site, such as within the <article> element, or <section> element to define the header of each segment of your web page.

Such an example could be if you have a <section> for forum posts or comments, that would include the date of the post and the person who write it, perhaps with a link to their profile, though this information could instead be written in the <footer> of such a section.

If, for example, Freeola used HTML 5 for the web forums, a forum post may be marked up like this:

<article id="post6598">

… initial post here…

<section id="post6598reply8">
… other sections where people have added their own post here …
</section>

<section id="post6598reply7">
<header>
<p>Username: <a href="http://profiles.freeola.com/cjh/">cjh</a></p>
<p>Posted: <time datetime="2013-01-07T17:45:00">Today, 5:45pm</time></p>
</header>
<p>My post would go here, below my username and time of posting.</p>
<p>My post may contain multiple paragraphs!</p>
</section>

<section id="post6598reply6">
… other sections where people have added their own post here …
</section>
</article>

The new “footer” element, as defined using the <footer> HTML element

The footer element, written as <footer>, is designed to mark out the area of the web page that would contain the web pages footer information, or the footer information within a section, such as the date it was published, a reference link, or the author of the content.

For many web pages, this might include the copyright info, terms of service links, contact us links, etc, such as:

<html>
… Web Page content …
<footer>
<p>Copyright 2012, <a …>T&C’s</a>, <a …>About us</a> <a …>Contact us</a></p>
</footer>
</body>
</html>

The <footer> can contain the <nav> element, for sites that include many site-wide links at the bottom of the web page.

While a <footer> would most likely appear at the bottom of your web page, just before the closing </body> element, it can also be used within other sections of your web site, such as within the <article> element, or <section> element to define the footer of each segment of your web page.

Such an example could be if you have a <section> for forum posts or comments, that would include the date of the post and the person who write it, perhaps with a link to their profile, though this information could instead be written in the <header> of such a section.

If we take the same example from above, using a Freeola form post, but place the username and post tome below the post itself, the forum post may be marked up like this:

<section id="post6598reply7">
<p>My post would go here, above my username and time of posting.</p>
<p>My post may contain multiple paragraphs!</p>
<footer>
<p>Username: <a href="http://profiles.freeola.com/cjh/">cjh</a></p>
<p>Posted: <time datetime="2013-01-07T17:45:00">Today, 5:45pm</time></p>
</footer>
</section>

As with a <header>, you can style a <footer> using CSS.

The “address” element, as defined using the <address> HTML element

The address element, written as <address>, is designed to mark out the contact information for the author of the page, or the person or company who run the web site. This isn’t a new element, but its use has been more specifically designated.

This <address> content does not have to be a physical address, as it is more about marking up the segment of the page that contains contact information, be it a home or business address, an email address, a phone number, etc.

The key aspect of the <address> element is that it isn’t designed to just mark up a postal address, it’s more about targeting the contacting information of the web page authors. If the web page authors have a postal address, then this can be included within the <address> element, but the <address> could just as easily link to an author page, or a Twitter and Facebook profile of the author.

Often, the <address> element would be used within the <footer> element, for example:

<html>
… web page content…
<footer>
<p> Web site maintained by:
<address>
<a href="http://example.com/author/john-smith">John Smith</a>,
<a href="http://example.com/author/jain-smith">Jain Smith</a>.
</address>
</p>
</footer>
</body>
</html>

HTML5 Web Forms and the <video> element

HTML 5 is still progressing, it isn’t a full recommendation, and even when it is it won’t cause the older HTML to just be forgotten about. You don’t have to HTML 5 up your web site, there is no deadline and Google won’t de-index you tomorrow if it doesn’t see you’re using HTML 5, but there are many people who are keen or at least curious as to what HTML 5 offers, and hopefully this article has given you a bit of a start.

If you’re going to get in to HTML 5, then the next step might be to make use of the Web Forms updates available in HTML 5 as well as the HTML 5 <video> element.


Did you find this article helpful?