In the previous section you learned about the wbr element that is new to HTML5, and this section takes a closer look at using the familiar <h..>
tag and some related tags for structuring text. Also, you saw how to
start with a hand-drawn sketch of what you want and implement it in a
HTML5 script. Moving from a fairly concrete sketch to a more general
block outline helps understand how HTML5 is organized into blocks. The
first kind of block examined is the text block — in fact we’ve already
begun, discussing <h1>, <h2>, and other h elements. Figure 1 illustrates the block organization.
Figure 1: Text block organization.
In terms of organizing your page, the layout for different levels of h elements is the HTML5 <hgroup> tag. For example, take a look at the following Web page from Wittgenstein (who seemed to write using h tags in 1918 when he completed writing Tractatus Logico-Philosophicus):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Tractatus logico-Philosophicus</title>
</head>
<body>
<h1>Tractatus logico-Philosophicus</h1>
<h1>by Ludwig Wittgenstein</h1>
<hgroup>
<h2>1 The world is all that is the case.</h2>
<h3>1.1 The world is the totality of facts, not of things.</h3>
<h4>1.11 The world is determined by the facts, and by their being all the facts.</h4>
<h4>1.12 For the totality of facts determines what is the case, and also whatever is not the case.</h4>
<h4>1.13 The facts in logical space are the world.</h4>
<h3>1.2 The world divides into facts.</h3>
<h4>1.21 Each item can be the case or not the case while everything else remains the same.</h4>
</hgroup>
</body>
</html>
If we look at the Web page, we can see where the different h
elements give the parts different sizes, but we don’t see the
indentations Wittgenstein used in his original writings. Figure 2
shows the Web page on a mobile phone — whatever else you think of
Wittenstein, his style sure works well for mobile screens.
Figure 2: Outline format using <h> tags on the iPhone.
If you look at the original Wittgenstein, you’ll
find that his style of writing used an indented outline that appeared as
the following:
1 The world is all that is the case.
1.1 The world is the totality of facts, not of things.
1.11 The world is determined by the facts, and by their being all the facts.
1.12 For the totality of facts determines what is the case, and also whatever is not the case.
We can fix that if we want by adding indents to the <h..> tags. We could do this by adding margins using CSS3 as you’ll see in the next section. However, the purpose of the h element and the <hgroup> is not to set indents but to help with more general outlines. The <hgroup> tag sets the highest level <h..> tag in the hgroup container
as the outline element. For example, since Wittenstein wrote Tractatus
Logico-Philosophicus wholly in outline, his entire work using the hgroup element would look exactly like the outline in his actual Abstract to the work.
1 The world is all that is the case.
2 What is the case — a fact — is the existence of states of affairs.
3 A logical picture of facts is a thought.
4 A thought is a proposition with a sense.
5 A proposition is a truth-function of elementary propositions. (An elementary proposition is a truth-function of itself.)
6 The general form of a truth-function is [p, E, N(E)]. This is the general form of a proposition.
7 What we cannot speak about we must pass over in silence.
The hgroup
element is tied into the outline algorithm in HTML5, and although it’s
unlikely that you’ll be using it for writers like Wittenstein, it is
useful for helping you think about your page in terms of the structure
within an HTML5 page. One way to think about the <hgroup> tag is as a mask (or even a Romulan cloaking device) over other h elements below the highest-level element in the hgroup container. In our example, the h3 and h4 are masked and only the h2 element is recognized as part of the outline.
