HTML Basics
Stanford University Libraries & Academic Information Resources

The Body

[Previous Page] [Tutorial Top] [Tech Guide] [Next Page]

Generally, the body of a document consists of a series of sections and subsections, each identified by headings. Each of these sections is in turn composed of elements that contain text or images, such as paragraphs, lists, inline images, etc.

Headings

The first heading of each document (and in this context by document, we really mean file, i.e. the chunk of information you get when your browser fetches something, as when you select the "next" or "previous" buttons on the toolbars in this guide), is always <h1>, the topmost 'section' of the document. There is just one <h1> in each document and all the other headings are subheadings of this top-level heading.

Often, as in Spore, <h1> can be the same as the text you used for the <title> element in the head:

    <body>
      <h1>The Invasion of the Giant Spore</h1>
    </body>

HTML defines six heading levels: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. These should be thought of as (roughly) analogous to Chapters, Sections, and Subsections, etc., in a conventional document. In the vast majority of documents, you should not need to use anything below <h3>; if you do, that's a pretty good indication that your document should be broken up into smaller chunks (i.e. the sections placed in separate files). To be honest Spore really should be broken up into smaller chunks, but that would make this guide unmanageable, so for pedagogical purposes, please pardon me this disgraceful behaviour.

Now it happens that Spore is nicely organized into sections and subsections, so we can go ahead at the start and assign them headings. Note that the section numbers in the original text are included in the heading text, but they are not the same as our heading levels. What we want from the headings is the level of the heading (in other word, how deeply 'nested' is a particular section); the actual numbering scheme is of no importance to us. This is explained more fully in the section on headings. As it happens, it looks as though Spore was written from an outline, which makes it very easy to convert the outline levels to Heading levels. Let's start with the major division headings and assign them to <h2>: 


I.  What is Mold?  And Where Does It Come From?
II.  What Does Mold Do To Books and Paper, and to People?
III.  The Repulsion of the Giant Spore, or How To Rid One's Collection
IV.  Concluding Recommendations
Bibliography of sources consulted for information provided in this leaflet

which we mark up as:



  <h2>I.  What is Mold?  And Where Does It Come From?</h2>
  <h2>II.  What Does Mold Do To Books and Paper, and to People?</h2>
  <h2>III.  The Repulsion of the Giant Spore, or How To Rid One's
  Collection</h2>
  <h2>IV.  Concluding Recommendations</h2>
  <h2>Bibliography of sources consulted for information
  provided in this leaflet</h2>

Now in the original document, it happens that Sections I,II, IV, and the Bibliography have no subsections, so no further heading markup is needed, but III is subdivided like crazy:


  III. The Repulsion of the Giant Spore, or How To Rid One's Collection
  III.A. What is a Mold-Preventive Environment?
  III.A.1. Humidity
  III.A.2. Temperature
  III.A.3. Air Circulation
  III.A.4. Light
  III.A.5. Chemical Composition
  III.A.6. Miscellaneous Environmental Modifications
  III.B. What Can You Do If You Have a Mold Outbreak?
  III.B.1. Non-Chemical Treatments
  III.B.1.a. Freezing
  III.B.1.b. Gamma radiation
  III.B.1.c. Ultra-violet light
  III.B.2. Chemical treatments
  III.B.2.a. Thymol
  III.B.2.b. Gamma radiation
  III.B.2.c. Ultra-violet light
  III.B.2.d. Paradichlorobenzene
  III.B.2.e. Carbon dioxide
  III.B.3. Miscellaneous Activities to be Carried out in
  Conjunction with Treatment
  III.B.3.a. Cleaning Books and Paper
  III.B.3.b. Cleaning the Room(s)
  III.B.3.c. Odor removal
  III.B.3.d. Monitoring

Replacing each deeper level of the outline with a correspondingly lower Heading level, we get:


  <h2>III. The Repulsion of the Giant Spore, or How To Rid One's
  Collection</h2>
  <h3>III.A. What is a Mold-Preventive Environment?</h3>
  <h4>III.A.1. Humidity.</h4>
  <h4>III.A.2. Temperature.</h4>
  <h4>III.A.3. Air Circulation.</h4>
  <h4>III.A.4. Light.</h4>
  <h4>III.A.5. Chemical Composition</h4>
  <h4>III.A.6. Miscellaneous Environmental Modifications</h4>
  <h3>III.B. What Can You Do If You Have a Mold Outbreak?</h3>
  <h4>III.B.1. Non-Chemical Treatments</h4>
  <h5>III.B.1.a. Freezing</h5>
  <h5>III.B.1.b. Gamma radiation</h5>
  <h5>III.B.1.c. Ultra-violet light</h5>
  <h4>III.B.2. Chemical treatments</h4>
  <h5>III.B.2.a. Thymol</h5>
  <h5>III.B.2.b. Gamma radiation</h5>
  <h5>III.B.2.c. Ultra-violet light</h5>
  <h5>III.B.2.d. Paradichlorobenzene</h5>
  <h5>III.B.2.e. Carbon dioxide</h5>
  <h4>III.B.3. Miscellaneous Activities to be Carried out in Conjunction with Treatment</h4>
  <h5>III.B.3.a. Cleaning Books and Paper</h5>
  <h5>III.B.3.b. Cleaning the Room(s)</h5>
  <h5>III.B.3.c. Odor removal</h5>
  <h5>III.B.3.d. Monitoring</h5>

We now have a perfectly legal, and well structured HTML document. In the next section, we'll start to put some text in it.

[Previous Page] [Tutorial Top] [Tech Guide] [Next Page]

Walter Henry
Stanford University Libraries and Academic Information Resources