Header and footer area
The header and footer areas can be defined using the two elements header and footer. The head element is used to define the header area. This does not necessarily have to be the header of the entire page. You can also use head to mark the header area of other elements such as sections and articles.
Caution: Do not confuse header with the familiar head element, which is used to define the header area of HTML documents containing the document title, stylesheet and JavaScript calls.
For an entire document, the use of header would look like this:
<body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body>
Applied to a section element, the following image would result:
<section> <header> <h1> Creating web apps (part 09): jQuery mobile (1)</h1> <p> jQuery is undoubtedly one of the best-known JavaScript frameworks.</p> </header> <p>As a result, jQuery is already used thousands of times on "classic" websites. The sister framework jQuery mobile (jQM) was specially designed for use in web apps. This framework helps you to make your web app look like a real app in no time at all. Reason enough to take a detailed look at jQM. </p> <footer> <p>Copyright by PSD-Tutorials.de</p> </footer> </section>
In any case, make sure that the footer and header do not contain any additional header and footer elements.
Grouping headings
Headings come into play in connection with sections. These headings can initially be the classic elements h1 to h6. However, the hgroup element is also permitted in HTML5. These hgroup elements can in turn contain several headings.
First, take a look at a classic HTML document in which the "usual" structure is defined using hx elements.
<h1> Book </h1> <h2> Chapter 1 </h2> <h2> Chapter 2 </h2> <h3> Subchapter 2.1 </h3> <h3> Subchapter 2.2 </h3> <h2> Chapter 3 </h2>
This definition means the following structure:
Book
Chapter 1
Chapter 2
Subchapter 2.1
Subchapter 2.2
Chapter 3
However, the headings are not indented in the browser.
hgroup is particularly interesting in connection with journalistic texts. These often consist of a two-part heading made up of the main line and the header or subheading. An example should illustrate this aspect.
<hgroup> <h1>Cloud OS</h1> <h2>The web as an operating system</h2> </hgroup> <p>This is where the content of the article begins ...</p>
This example clearly shows that the subline does not introduce a separate section within the article. Rather, it is part of the article title. Something like this can be summarized using the hgroup element.
The elements h1 to h6 are permitted within hgroup.
The outline concept
The outline concept also comes into play in HTML5, which involves the interaction of section elements with the various hx elements. With this concept, the headings are divided into different levels by the elements h1 to h6, as was previously the case. Here, h1 corresponds to the top level, while h6 represents the lowest level. So there is no change here compared to before. This is because the hx elements can now be defined within section elements. And the counting starts anew each time, but always one level lower.
The outline concept looks quite complicated in the HTML5 specification, but the idea behind it is very simple. In fact, it can be used to define a content specification that makes the document structure machine-readable.
Here is another example:
<h1> Chapter 1 </h1> <section> <h1> Chapter 2 </h1> <section> <h1> Chapter 3 </h1> </section> </section>
The outline concept of HTML5 results in the following structure:
1. chapter 1
- Chapter 2
- Chapter 3
- Chapter 3
Another example illustrates the effect. Here, too, we start with the source document.
<section> <h1>Installation and configuration</h1> <section> <h2>Installation</h2> <p>All about installation </section> <section> <h2>Configuration</h2> <p>Here you will find everything about configuration </section> <aside> <p>Interesting books on the topic.... </aside> </section> <footer> <p>(c) by PSD-Tutorials.de </footer> </section>
The resulting structure looks as follows:
1. section (installation and configuration)
1.1 Section (installation)
1.2 Section (configuration)
1.3 Section (aside)
- Section (footer)
And another example:
<body> <h1>Installation and configuration</h1> <h2>Installation</h2> <p>All about the theme Installation ...even more content... <section> <h3>Prerequisites</h3> <p>All about the theme Installation prerequisites ...even more content... <h3>Preparations</h3> <p>All about the topic Preparations ...even more content... <h2>Configuration</h2> <p>All about the topic Configuration ...even more content... </section> </body>
The result structure is as follows:
1. installation and configuration
1.1 Installation
1.1.1 Prerequisites
1.1.2 Preparations
1.2 Configuration
The internal count starts at 1 each time. Only these elements are affected by the outline concept:
- article
- aside
- nav
- section
The two elements header and footer are not affected.
Please note that the outline concept is not yet supported by browsers.
However, it will only be a matter of time before the browser manufacturers take action here. The advantages of the outline concept would be too great. Think of automatically generated navigation bars, for example. But even if browsers currently ignore structuring in this way, you should try to structure your documents logically now. This will also give you a certain degree of future-proofing for your websites.
