Scribd
Upload
49 views20 pages

Documento 1 de HTML5

The document discusses new structural elements introduced in HTML5 that simplify document structure. These elements include <header>, <footer>, <nav>, <article>, <section>, <time>, <aside>, and <figure>. They were added based on common IDs and class names found in a study of over a billion web pages to represent popular page sections. Using these new semantic elements allows for cleaner code and native browser handling compared to using <div> tags. An example page structure is provided to demonstrate combining the new elements.

Uploaded by

Prueba HACK
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
49 views20 pages

Documento 1 de HTML5

The document discusses new structural elements introduced in HTML5 that simplify document structure. These elements include <header>, <footer>, <nav>, <article>, <section>, <time>, <aside>, and <figure>. They were added based on common IDs and class names found in a study of over a billion web pages to represent popular page sections. Using these new semantic elements allows for cleaner code and native browser handling compared to using <div> tags. An example page structure is provided to demonstrate combining the new elements.

Uploaded by

Prueba HACK
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

New structural elements in HTML5

1 de 20

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

1 Introduction to HTML5

Introduction: towards more simplicity, new


structuring elements
Towards more simplicity
Changes to elements in HTML5 go towards a greater simplicity. In this section, we'll see some examples
highlighting these improvements, such as the new doctype definition, the fact that the "type" attribute of elements
such as <link> or <script> are now optional, the syntax constraints that have been relaxed, the new structuring
elements that have been added, etc.

A minimal HTML5 document

Well, this minimal HTML5 document is really minimal, isn't it?


Let's compare it to the HTML4 minimal document (source: http://www.sitepoint.com/a-minimal-html-document/).
Differences have been highlighted in red:
1
2
3
4

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

16/05/2015 04:31 p.m.

New structural elements in HTML5

2 de 20

5
6
7
8
9
10
11
12

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

<title>title</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
...
</body>
</html>

Simpler character set definition


One word about the <meta charset="utf-8"> line in the HTML5 version: while it looks simpler than the
HTML4 version, it is really a good practice to declare the character set of your document to protect against a serious
security risk.

No more complicated doctype definitions


The "Doctype", often called DTD (Document Type Declaration) is used by tools such as HTML validators (i.e.
the W3C validator), and specify the rules used by an HTML or an XHTML page. These rules are contained in
special documents called "Document Type Definitions" (also abbreviated as DTD), written in a language that may
seem a bit barbaric to humans (they are intended to be read by software), and hosted on the W3C site. DTDs are not
used by current web browsers to validate the structure of an HTML page, as they "read" the code without using the
DTD to decipher it, using only "rules" contained in their own "engine" but it is still preferable to indicate the
doctype a smodern browsers have several rendering engines that are chosen depending on the doctype. Old HTML1
web pages will not be rendered the same way as HTML5 pages, since in the 90's some of them were written by
hand and may contain errors, imbricated HTML elements, etc.
With HTML4, doctype definitions looked like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">, and this was even
more complicated as one had to choose between three different possibilities (doctypes could be transitional, strict,
or frameset). Most of the time, the doctype definition was copied and pasted from one document to another and was
nearly impossible to memorize.
With HTML5, there is only one way to indicate the doctype, and it's so simple there is no reason to forget it:
<!doctype html>

The "type" attribute is optional


With a rel="stylesheet" attribute, it is no longer necessary to indicate type="text/css" (from the specification: "the
default type for resources given by the stylesheet keyword is text/css.")
The "type" attribute is not needed in HTML5, and even old browsers will use text/css as the default type for style
sheets today. So, either way, you can omit the "type" attribute altogether and use
<link href="file.css" rel="stylesheet"/>

instead of:
<link href="file.css" rel="stylesheet" type="text/css"/>

We will not go into extra details about the <link> element, but the fact that the type attribute is becoming
optional shows the current direction taken by HTML5: towards greater simplicity.
Look also at the way we included a javascript file in our page:
<script src="script.js"></script>

16/05/2015 04:31 p.m.

New structural elements in HTML5

3 de 20

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

Here again, the type attribute has been omitted. Just as a reminder, the old way to do the same
thing: <script type="text/javascript" src="script.js"></script>

More flexible syntax constraints


If you look at the "minimal document" example, or at other examples in this course, you won't find a lot of
differences compared to to the same code in XHTML: attributes' values are surrounded by quotes, all elements are
written in lower case, etc. This is because we are used to writing this way. With HTML5 you can omit quotes or use
uppercase. Even if you forget to include the <head>, <body>, or <html> elements, it will still validate (in
fact, the browser will add these elements for you, OK...).

New structuring elements


External resources:
VERY GOOD article: http://coding.smashingmagazine.com/2013/01/18/the-importanceof-sections/
http://dev.opera.com/articles/view/new-structural-elements-in-html5/
http://catcubed.com/2009/10/15/the-semantics-of-html5-structural-elements/

History
As web site layouts evolved, HTML5 structuring elements like lists, paragraphs, tables, etc. showed
their limits. Today, many web sites offer navigation menus, tabbed panels, headers, footers, and so on.
The way these "parts"' are implemented relies heavily on <div> and <span> elements with
different id and class attributes, lots of CSS and lots of JavaScript code to apply custom styles and behaviors.
There are some problems however, with this approach:
id and class names differs from one developer to another, from one country to another, etc
Even with same ids and class names, the css rules may be different,
JavaScript libraries became heavier and heavier over the years,
Web pages became heavier and heavier over the years!
These elements could not be handled by the web browser natively...
Even if there are differences between ids, classes and css/js implementations, there are also common behaviors,
common layouts, common "way of doing things" that could be guessed at first glance by a human.
So different studies have been conducted in order to identify the most popular ids, class names, widgets, etc used on
the web:
According to http://dev.opera.com/articles/view/new-structural-elements-in-html5/, "During the creation of HTML5,
the editor Ian Hickson used Google's tools to mine data from over a billion web pages, surveying what ID and class
names are most commonly used on the real world web. You can see one of the surveys published at Google Code:
Web Authoring Statistics: Classes. Opera did a similar study, of 3.5 million URLs, calling it MAMA. MAMA had a
smaller URL set, but looked at a larger and wider variety of web page statistics. For more information, take a look
at MAMA common attributes, MAMA's id list, and MAMA's class list. For more options, go to the MAMA home
page."

New elements added to the HTML5 set


The results of these surveys led to the addition of new structuring elements in HTML5. For example, the very
popular <div class="header"> led to the creation of a <header> element, <div class="aside"> to a <aside> element,
etc...
Finally, the 20 most popular IDs and class names found in Hickson's and Opera surveys gave birth to these new

16/05/2015 04:31 p.m.

New structural elements in HTML5

4 de 20

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

elements (click on the element's name to go to the W3C specification about this element)
<header>

Introduction of an article, another section or the entire document (header page).


Typically the header of a web site that appears on top of each page, or a header of a
long <article> or of a long <section>

<footer>

Contains the footer of a site, a long <article>, or a long <section>

<nav>

Section that contains the main navigation links (within the document or to other
pages).

<article>

Independent content, which can be individually extracted from the document and
syndicated (RSS or equivalent) without penalizing its understanding. Typically a
blog post.

<section>

Generic section used to group different articles into different purposes or subjects,
or to define the different sections of a single article. Generally used with a header.

<time>

Used for marking up times and dates.

<aside>

Section whose content is not necessarily directly related to the main content that
surrounds it, but can provide additional information.

<hgroup>

Used to wrap more than one heading if you only want it to count as a single heading
in the page's heading structure. News from 2 April 2013: the <hgroup> element
removed from the HTML5 specification.

<figure> and
<figcaption>

Used to encapsulate a figure as a single item, and contain a caption for the figure,
respectively.

And there is no <content> element even though the <div class="content"> was very popular. Instead,
the HTML5 group decided that anything not embedded in one of the elements from the above table is "default
content". If the content is of a type that corresponds to one of the elements from the table, i.e. if the content is an
article, it should be embedded between <article> and </article>.

How to mix all the new structuring elements together ?


Let's study an example: http://jsbin.com/agoyoj/7/edit (as usual, all examples we have cooked up that are available
on the jsbin.com web site can be modified: you can save your own version using the "create milestone" menu, share
your version, etc. Don't hesitate to play with the source code, etc.

16/05/2015 04:31 p.m.

New structural elements in HTML5

5 de 20

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

This example is just one of the different ways to organize a blog. For this basic example, we have designed the web
site using a <header> element that contains the "Simple HTML5 blog" text that appears on top of the page:
The new <header> element
1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html>
<head>
<title>Simple HTML5 blog</title>
</head>
<body>
<header>
<h1>Simple <span>HTML5</span> blog</h1>
</header>
...

And here the CSS rules we have used:


CSS for the headers
1
2
3
4
5
6
7
8

header {
color: #007e99;
font-size: 2.5em;
padding: 20px 50px
}
header span {
color: #722
}

The navigation menu just below the header is a <nav> element. For the purpose of this example we haven't
provided any value for the hyperlinks...
The <nav> element
1
2
3
4
5

<!DOCTYPE html>
<html>
<head>
<title>Simple HTML5 blog</title>
</head>

16/05/2015 04:31 p.m.

New structural elements in HTML5

6 de 20

6
7
8
9
10
11
12
13
14
15
16
17

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

The <nav> element


<body>
<header>
<h1>Simple <span>HTML5</span> blog</h1>
</header>
<nav>
<ul>
<li><span>Blog</span></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>

And here is the CSS we used in this example for the <nav> element:
CSS for the <nav> elements
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

nav {
font-size: 1.5em;
margin: 5px 0;
padding: 20px 50px
}
nav li {
display: inline;
margin: 0 15px
}
nav li:first-child {
margin-left: 0
}
* html nav ul {
margin-left: -15px
}
nav span, nav a {
padding: 3px 15px 4px
}
nav span {
background: #722;
color: #fff
}

Now, we have one big <section> element that contains a set of <article> elements:
The <section> element
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<section>
<article>
...
</article>
<article>
...
</article>
<article>
...
</article>
</section>

And here is the CSS:


CSS for the <section> element
1
2
3
4
5
6
7
8
9
10

section {
float: left;
padding: 35px 0;
position: relative;
width: 70%
}
section article {
margin: 0 50px 40px;
padding: 25px 0 0;
position: relative

16/05/2015 04:31 p.m.

New structural elements in HTML5

7 de 20

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

CSS for the <section> element


11
12
13
14
15
16
17
18

}
section header {
font-size: 1em;
padding: 0;
}
section h1 {
font-size: 2.3em;
}

Note that the H1, article, article header, etc. will be styled using these rules.
Next, in each article in the section we have a header (to display the article title), paragraphs (article
content), an so on. Example for the first blog article :
The <article> element
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<section>
<article>
<header>
<h1><a href="">Information about this example</a></h1>
<h2>Some subtitle in the header</h2>
This example is a modified version of <a href="http://netstream.ru/htmlsamples/html5-blog/index.html">
http://netstream.ru/htmlsamples/html5-blog/index.html</a>
</header>
<p>Try to move the mouse on different elements. The structure will be highlighted and you will be able
to see the different inclusions of elements one in each other. If you move the cursor to this sentence,
it will be highlighted in dark grey, showing the presence of an <article> element, surrounded by a
<section> element (light grey), etc. So we have some articles in a single section element. The page
title at the top is a <header> element, while the tag cloud on the right is a <aside> element. The
main menu on top (with Blog, About, Contact) is a <nav> element.</p>
<figure>
<img src="http://www.fredcavazza.net/files/2009/09/html5_structure.png" alt="Example of HTML5 structuring
tags" />
<figcaption>
Fig. 1 : an example of how new structuring elements could be used. This page put a <nav> on top, and
does not have headers and footer for each article, like in this figure, but it could... By the way,
this is a <figcaption> inside a <figure> element...
</figcaption>
</figure>
</article>
...
</section>

Notice also the way we included a figure using the new "HTML5" way, using a <figure>..</figure>
element that embedded a <img src=.../> element together with a <figcaption> element.
Here is the CSS for the <figcaption> element we have used in the example (we did not apply any
style to the <figure> element):
CSS for the <figcaption> element
1
2
3
4
5

figcaption {
font-style:italic;
font-size: 0.8em;
width: 100%
}

and here is the result:

16/05/2015 04:31 p.m.

New structural elements in HTML5

8 de 20

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

After the long <section> element that contains all the blog articles displayed in the page, we added
the HTML code for the tag cloud that is displayed on the right of the page, "aside" ! This is done using
-you already guessed it- an <aside> element:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

the <aside> element


<section>
.... all <article>... </article> here....
</section>
<aside>
<h1>Tag cloud</h1>
<ul class="tag-cloud">
<li><a href="" rel="tag" class="w2">ajax</a></li>
<li><a href="" rel="tag" class="w8">apple</a></li>
<li><a href="" rel="tag" class="w3">css</a></li>
<li><a href="" rel="tag" class="w6">firefox</a></li>
<li><a href="" rel="tag" class="w8">google</a></li>
<li><a href="" rel="tag" class="w2">html</a></li>
<li><a href="" rel="tag" class="w2">internet explorer</a></li>
<li><a href="" rel="tag" class="w6">iphone</a></li>
<li><a href="" rel="tag" class="w9">css3</a></li>
<li><a href="" rel="tag" class="w2">ipod</a></li>
<li><a href="" rel="tag" class="w5">javascript</a></li>
<li><a href="" rel="tag" class="w1">jquery</a></li>
<li><a href="" rel="tag" class="w2">mac</a></li>
<li><a href="" rel="tag" class="w4">opera</a></li>
<li><a href="" rel="tag" class="w2">rss</a></li>
<li><a href="" rel="tag" class="w10">html5</a></li>
<li><a href="" rel="tag" class="w2">web</a></li>
<li><a href="" rel="tag" class="w8">web 2.0</a></li>
<li><a href="" rel="tag" class="w1">web-??????????</a></li>
<li><a href="" rel="tag" class="w3">windows</a></li>
<li><a href="" rel="tag" class="w2">yahoo</a></li>
<li><a href="" rel="tag" class="w7">youtube</a></li>
</ul>
</aside>
...

We are not going to show the complete CSS here as it uses some tricks to display the list as a "real tag
cloud" that uses JavaScript for handling events, etc.
CSS for the <aside> element
1
2

aside {
float: right;

16/05/2015 04:31 p.m.

New structural elements in HTML5

9 de 20

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

CSS for the <aside> element


3
4
5
6
7
8
9
10
11
12
13
14
15
16

padding: 70px 0 30px;


position: relative;
width: 25%
}
aside h1 {
color: #888;
font-size: 1.8em
}
aside .tag-cloud {
padding: 15px 35px 10px 0;
text-align: center
}
...

We used a float:right CSS rule to put the tag cloud on the right...
Here is the result:

Finally, we added a <footer> element after the tag cloud definition, for displaying a page footer:
The <footer> element
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html>
...
<body>
...
<section>
...
</section>
<aside>
...
</aside>
<footer>
<p>&copy; 2009 Some blog</p>
</footer>
</body>
</html>

With this CSS rule:


CSS for the <footer> element
1
2
3
4
5

footer {
clear: both;
color: #777;
padding: 10px 50px
}

Here is the result at the bottom of the page:

16/05/2015 04:31 p.m.

New structural elements in HTML5

10 de 20

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

More on <article> and <section>


It may be not clear whether a <section> may contain one or several <article> elements or if an
<article> may contain one or several <section> elements.
The <article> element was designed for stand-alone parts of a document that could eventually be
syndicated in RSS streams. <section> elements are used to cut a logical part into subparts. So yes, an
<article> may be cut into different <section> elements.
The blog example on the other hand uses a single <section> that contains several <article> elements.
We can imagine having a <section> that regroups all blog post per month.
Example of a blog post cut into <section> elements:
Blog posts cut in <section> elements
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<article id="id1">
<section id="id1part1">
<h2>Introduction</h2>
</section>
<section id="id1part2">
<h2>My travel to India</h2>
</section>
<section id="id1part3">
<h2>Return to France</h2>
</section>
</article>

Can we put a <nav> in an <article>?


Yes we can, in case you would like to propose some navigation links with each blog post, for example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Some <nav> into <article> elements


<article>
<header>
<h1>Blog post title</h1>
<p>Author : Michel</p>
</header>
<nav>
<ul>
<li><a href="...">Next post</a></li>
<li><a href="...">Previous post</a></li>
<li><a href="...">Contact author</a></li>
</ul>
</nav>
<p>Content...</p>
<footer>
<p>Posted by Michel, the <time datetime="2012-02-02">February 2, 2012</time> </p>

16/05/2015 04:31 p.m.

New structural elements in HTML5

11 de 20

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

Some <nav> into <article> elements


16
17

</footer>
</article>

In that case, the nav element proposes navigation links to the next or previous blog post, as well as a
link to contact the author of the blog post. Notice also that we used in that example a <footer>
element in the blog post.

What about the <div> element ? Is it still useful ?


The new structuring tags have been primarily designed for simplifying the code of HTML pages such as the ones
generated by blog or CMS software, however do not forget that they add new semantics and will be taken into
account by :
Browsers natively or browsers' extensions, i.e. for generating automatically a table of content, an outline view
of the document, for applying default CSS rules to these elements, etc. See for
example: http://code.google.com/p/h5o/ (Chrome extension).
JavaScript libraries,
Screen readers that vocalize documents' content, see http://www.accessibleculture.org/articles/2011/04/html5aria-2011/ for an interesting HTML5 aria support blog post.
Web crawlers, etc.
You can use <div> elements in all cases where the proposed structuring elements do not fit your needs. For defining
some structural content that should be styled, for example.
Recommended lecture about "to <div> or not to <div>": http://coding.smashingmagazine.com/2011/11/11/ourpointless-pursuit-of-semantic-value/

Using HTML5 structuring elements and document outline


Structuring elements such as <h1>..<h6> as well as the new HTML5 structuring elements we just
studied are taken into account by a new "outline" algorithm described in the HTML5 specification
(see: http://dev.w3.org/html5/spec/single-page.html#outline)
Before HTML5, we had the concept of a document outline: take into account only the different headers <h1> to
<h6> in order to get (in general, using some JavaScript or browsers' extensions) an "outline view" or a "table of
contents" view, similar to the "outline view" of a document in a word processor (Word and Open Office have such
an option).
This is the "outline" of this page generated by the Chrome HTML5 outliner extension:

Note: this page has been created by Moodle, a CMS-like software for creating online courses. The current version

16/05/2015 04:31 p.m.

New structural elements in HTML5

12 de 20

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

does not use HTML5 structuring elements such as <section>, <article>, <header> etc. On this outline "Towards
more simplicity" is a <h1>, "A minimal HTML5 document" is a <h2>, etc...
But, before HTML5 we were stuck with only 6 hierarchy levels and in case of content syndication into RSS streams
or inclusion of some HTML parts into another HTML document, we could get "bad header hierarchies". Imagine
that we extract HTML content with only <h5> and <h6> headers and put this content inside another document or
into a RSS stream with only <h1> and <h2> headers. Outlining algorithms may be confused and/or the table of
contents that will be generated will have "missing hierarchy levels".
The new structuring elements of HTML5 solve this problem, and for the first time, an algorithm for outlining a
document is included in the specification.
Let's get back to our blog example : http://jsbin.com/agoyoj/7/edit
We will now look at the "outline" of our blog document. Since in September 2012 no web browser has a native
implementation of the outlining algorithm, we can try several tools:
Geoffrey Sneddon's on-line HTML5 outliner,
A browser extension such as this one for Chrome: Google HTML5 outliner, or the HTML5 Outliner Opera
Extension or this Firefox extension
Use a bookmarklet like the one also proposed on the Google HTML5 outliner page,
So, try one of these solutions with the example. You should get something like this (for the screenshots, we used the
Chrome extension):

Hmmm, there are some "Untitled NAV" and "Untitled SECTION" entries in there: we will see how to fix that later...
The interesting part is that the <header> elements have been taken into account. A good practice with HTML5 is to
have <header> elements for each "title part" of your document and hierarchize them. In our example, "Simple
HTML5 blog" is a <header> at the top of the hierarchy of <header> elements, while the whole "Information about
this example" is two levels further down in the hierarchy. And the "Untitled..." parts show that both <section> and
<article> elements are also parts of this hierarchy.
So... let's add <header> elements to fix these missing parts, and we will continue the discussion...
Fixed version: http://jsbin.com/agoyoj/9/edit
Parts that have been modified:
Fixed version with a header in the <nav> element
1
2
3

<!DOCTYPE html>
<html>
<head>

16/05/2015 04:31 p.m.

New structural elements in HTML5

13 de 20

4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

Fixed version with a header in the <nav> element


<title>Simple HTML5 blog</title>
</head>
<body>
<header>
<h1>Simple <span>HTML5</span> blog</h1>
</header>
<nav>
<header>
<h1>Navigation menu</h1>
</header>
<ul>
<li><span>Blog</span></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
<section>
<header>
<h1>Blog posts for April 2012</h1>
</header>
<article>
<header>
<hgroup>
<h1><a href="">Information about this example</a></h1>
<h2>Some subtitle in the header</h2>
This example is a modified version of <a href="http://netstream.ru/htmlsamples/html5-blog/index.html"
http://netstream.ru/htmlsamples/html5-blog/index.html
</hgroup>
</header>

We just added a <header> in the <nav> element and in the <section> element. So here is the "fixed" result:

Outline and the "sectioning" elements


Some of the new structuring elements, <article>, <section>, <nav>, and <aside> define so-called "sectioning
contents". The outline will be generated based on the hierarchy of these elements. If they have a <header> element,
its content will be displayed in the outline, otherwise you will get a "Undefined NAV", "Undefined ARTICLE" like
we saw previously.
Let's see one example: http://jsbin.com/epofer/7/edit

16/05/2015 04:31 p.m.

New structural elements in HTML5

14 de 20

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

Source code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Some headers that include several other elements


<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Something</title>
</head>
<body>
<header>Welcome to an example of &lt;header&gt;&lt;/header&gt;
<section>
<header>
<h1>Some text in a <code>h1</code> in a <code>header</code> of a <code>section</code></h1>
<h1>Some other text in a <code>h1</code> in a <code>header</code> of a <code>section</code></h1>
</header>
</section>

</body>
</html>

Notice that we have two different <h1> elements in the <header> of the <section>.
Here is the result and the corresponding outline:

Here is another version:

1
2
3
4
5
6
7
8
9

Use of <hgroup> to display only 1 subheader in the outline


<section>
<header>
<h1>Some text in a <code>h1</code> in a <code>header</code> of a <code>section</code></h1>
<h2>This a <code>h2</code> in the <code>header</code>...</h2>
</header>
</section>

Note that we also added a <h2> element in the header, just to get a more complete outline in our example. Here is
the result:

Examples with the table of contents inserted directly in the page (no need for a browser
extension)
In these examples, we included directly in the HTML document a minified JavaScript version of the code that is run
by the HTML5 Outliner browser extension. The code comes from the "minifiedJS" link in the HTML5 Outliner
(h5o) page.
Look at the previous example, with a link for displaying the table of contents in a <aside> element in the main
<section>:

16/05/2015 04:31 p.m.

New structural elements in HTML5

15 de 20

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

Online version: http://jsbin.com/epofer/4/edit

And after clicking:

We also added in in a <aside> element, but not included in a <section>, in the blog example:
Online version: http://jsbin.com/agoyoj/73/edit
Before:

After:

16/05/2015 04:31 p.m.

New structural elements in HTML5

16 de 20

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

Discussion: can we have more than one H1 in a document ? When do I


need a HEADER element ? Etc.
There have been a lot of discussion during the last session of this course. People heard that a best practice is not to
have more than one <H1> in a document, people who followed the W3C accessibility course asked how these new
elements will be handled by assistive technologies etc. Here is a summary of these discussions and also a nice chart
from HTML5doctor web site that may help.

16/05/2015 04:31 p.m.

New structural elements in HTML5

17 de 20

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

About the H1 element and best practices


Here is an answer we got from the person in charge of the HTML5 specification writing (Robin
Berjon <[email protected]>). Here are some extracts (I translate his message as he wrote in french):
--------"With the Document Outline algorithm, normally you can use the hN you want where you want and as long as
you're in a proper sectioning element it does not change anything (article, aside, nav, section). The outline will be
correct whatever happens. That said, the outline algorithm is not completely guaranteed, no one really uses it today,
there is no native implementations in browsers yet, no associated style, just JavaScript implementations."
If you read: http://www.w3.org/html/wg/drafts/html/master/sections.html # headings-and-sections
You will see: "Sections may contain headings of any rank, and authors are strongly encouraged to use headings
of the appropriate rank for the section's nesting level"
Note also that the <header> counts for nothing, only sectioning elements are taken into account.
If it makes you feel better, you will also see in the specification: "Authors are also encouraged to explicitly wrap
sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple
headings in one element of sectioning content"
If you look at the code of the spec, you'll see it sits its heavy butt on this good practice;-)
---------

16/05/2015 04:31 p.m.

New structural elements in HTML5

18 de 20

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

H1 and HEADER, comparing the HTML5 way to the "old way"


As you guessed, the way we used H1, h2 etc. has changed with HTML5. Main reason is that h1..h6 was not enough
(sometimes we need more than 6 levels), and when a "section" of a document is integrated in a stream of data, like
in RSS flux, keeping a hierarchy with correct levels of h1..h6 was complicated.
And yes! We can have as many H1 as we like in a document.
For example (taken from a french I know well: http://css.4design.tl/quelques-notes-sur-la-balise-h1-avec-html5)
This example :
1 <body>
2
<h1>Let's call it a draw(ing surface)</h1>
3
<h2>Diving in</h2>
4
<h2>Simple shapes</h2>
5
<h2>Canvas coordinates</h2>
6
<h3>Canvas coordinates diagram</h3>
7
<h2>Paths</h2>
8 </body>

Follows the "old way" of using headers, is equivalent to:


1 <body>
2
<h1>Let's call it a draw(ing surface)</h1>
3
<section>
4
<h1>Diving in</h1>
5
</section>
6
<section>
7
<h1>Simple shapes</h1>
8
</section>
9
<section>
10
<h1>Canvas coordinates</h1>
11
<section>
12
<h1>Canvas coordinates diagram</h1>
13
</section>
14
</section>
15
<section>
16
<h1>Paths</h1>
17
</section>
18 </body>

The second form is certainly machine generated while the first one looks more than something a WYSIWYG editor
may produce.
If we look at this example now:
1 <body>
2
<h1>Apples</h1>
3
<p>Apples are fruit.</p>
4
<section>
5
<h2>Taste</h2>
6
<p>They taste lovely.</p>
7
<section>
8
<h3>Sweet</h3>

16/05/2015 04:31 p.m.

New structural elements in HTML5

19 de 20

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

9
<p>Red apples are sweeter than green ones.</p>
10
</section>
11
</section>
12
<section>
13
<h2>Color</h2>
14
<p>Apples come in various colors.</p>
15
</section>
16 </body>

It uses h2 directly in <section> elements... this is not recommended in case of syndication. A preferred way is:
1 <body>
2
<h1>Apples</h1>
3
<p>Apples are fruit.</p>
4
<section>
5
<h1>Taste</h1>
6
<p>They taste lovely.</p>
7
<section>
8
<h1>Sweet</h1>
9
<p>Red apples are sweeter than green ones.</p>
10
</section>
11
</section>
12
<section>
13
<h1>Color</h1>
14
<p>Apples come in various colors.</p>
15
</section>
16 </body>

With multiple <h1> in each sectioning parts. In that cas h1..h6 are used for hierarchizing inside sectionning
elements. And nested sectioning contents (articles in sections or sections in sections or articles, etc.) add also
hierarchy levels, breaking the 1-6 levels of h.. barrier.
Document produced by a WYSIWYG editor vs a web site:
If we look again at the first example:
1 <body>
2
<h1>Let's call it a draw(ing surface)</h1>
3
<h2>Diving in</h2>
4
<h2>Simple shapes</h2>
5
<h2>Canvas coordinates</h2>
6
<h3>Canvas coordinates diagram</h3>
7
<h2>Paths</h2>
8 </body>

That is what a typical WYSIWYG editor in CMS/Blog would produce, the content between <body>..</body> will
need to be integrated in the web site layout, where <header>, <footer>, <article> and <section> will be used. It may
become:
1 <section>
2 <header>
3
<hgroup>
4
<h1>Posts from March 2013</h1>

16/05/2015 04:31 p.m.

New structural elements in HTML5

20 de 20

http://classroom.w3devcampus.com/mod/book/tool/print/index.php?id=...

5
<h2>.../h2>
6
</hgroup>
7
<p>Whatever description....</p>
8 </header>
9 <article>
10
<h1>Let's call it a draw(ing surface)</h1>
11
<h2>Diving in</h2>
12
<h2>Simple shapes</h2>
13
<h2>Canvas coordinates</h2>
14
<h3>Canvas coordinates diagram</h3>
15
<h2>Paths</h2>
16 </artcile>
17 </section>

etc... sectioning elements and headers have been mainly designed for CMS/Blog softwares. The new way of
organizing h1..h6 and the way they interact with sectionning elements is much more simple to handle for blog/cms
developers.

A few words about accessibility and these new elements


From Shadi Abou-Zahra ([email protected]), who works with the accessibility group at W3C.
"It seems important that we differentiate between what is theoretically possible and what browsers and assistive
technologies (such as screen readers for blind computer users) currently support (ie. practically accessible vs
theoretically accessible).
Both HTML (4 & 5) and the Web Content Accessibility Guidelines (WCAG) 2.0 do not prescribe a heading-levels
order meaning that multiple H1s etc. may be used *when* necessary. There are several use-cases that require such
use of headings (especially in richer web applications) but in general they should be avoided where possible. In
most cases hierarchical organization of your content is the clearest (for your users, search engines, etc.).
As to page area separators such as header and section areas, theoretically these are each separate areas that can
have their own hierarchical heading structures. This is particularly useful for aggregated web pages and content as
was mentioned. However, I'm unsure how widely supported these elements are in current assistive technologies and
I think in some they are still ignored. This could make a web page very quickly complex and difficult to overview as
the user may not be able to easily identify the main content its organization.
In conclusion I'd say there isn't one correct solution but to keep thinking about how to present your information in
the simplest and most appropriate way. It is good when an "alarm bell" goes off whenever complex nesting (like
duplicate H1s or headers in articles etc.) is spotted but that does not necessarily mean it is wrong per-se. There may
be no better solution for the particular situation."

16/05/2015 04:31 p.m.

You might also like