HTML section and body Element

Sectioning Content – Part 1

Foreword: In this part of the series, I talk about the HTML5 element called, the section element, and I also talk about the body element.

By: Chrysanthus Date Published: 30 Jul 2015

Introduction

This is part 1 of my series, Sectioning Content. In this part of the series, I talk about the HTML5 element called, the section element, and I also talk about the body element. The section element is an example of a sectioning content element. Sectioning content elements are used to hold HTML contents in different types of sections.

The building of a web page is as follows: Small elements like text elements form a group and go into a grouping element. Grouping elements form a larger group and go into a sectioning content element. Sectioning content elements form an even larger group, and go into the body element.

The reasons for the existence (added in HTML5) of sectioning content elements is to make editing of the HTML document easy: in future you may want to move sections about; if the sections are in sectioning content elements, it will be easy to move the sections about.

Pre-Knowledge
This series is part of the volume, HTML Course. At the bottom of this page, you have links to the different series you should have read before reaching here.

Recall
A block level element is an element that has an inherent line break element (<br>) above and below it. It will also occupy all the width of its containing element, everything being equal. An inline element does not have any inherent break line (<br>) element above and below it. It does not occupy all the width of its containing element. It can have elements on its right or left on the same line in which it finds itself.

The Body Element
A web page document has the HTML element as the principal element. The HTML element has the head and the body element. The head element has the title element. The title is displayed at the browser window tab of the web page. The body element is a sectioning content element. It has all what you see on the screen. The basic code for the body element is:

<html>
</html>

The body element is a block level element. The start tag can be omitted under certain conditions, but I suggest you never omit it. The end tag can be omitted under certain conditions, but I suggest you never omit it.

Sectioning content elements can nest other sectioning content elements. The body element nests all sectioning content elements. The body element is also known as a sectioning root element. The body element should have a heading element, e.g. h1 or h2 or h3 or h4 or h5 or h6. It is appropriate for any sectioning content element to have a heading element. That for the body element is typically, H1.

The section Element
This is a double tag element, written as:

    <section>
    </section>

It has content in between its tags. It is a block level element. It should have a heading element. It can have nested section elements, for example,

    <section>
        <section>
        </section>
    </section>

It is appropriate for each section element to have a heading element. For this example, the outer section element should have a heading element and the inner section element should have a heading element. The heading element for a section element goes inside the pair of tags for the section element.

Now, consider the following HTML4 style coding of a web page (read it):

<!DOCTYPE HTML>
<title>The Economic Doc </title>
<body>
<h1>The Economic Doc</h1>
<h2>Earning Money</h2>
<p>Earning money is a good thing.</p>
<h3>Having a job</h3>
<p>In order to earn money you normally need a job.</p>
<h2>Spending Money</h2>
<p>Spending is what money is mainly used for.</p>
<h3>Low Priced Things</h3>
<p>Buying cheap things often is not cost-effective.</p>
<h3>High Priced Things</h3>
<p>The most expensive thing is often not the most cost-effective either.</p>
<p>Few people buy expensive things.</p>
<h2>Investing Money</h2>
<p>You can lend your money to other people.</p>
<h2>Losing money</h2>
<p>If you spend money or invest money, sooner or later you will lose money.</p>
<h3>Weak Judgment</h3>
<p>Usually if you lose money it's because you made a mistake.</p>
</body>
</html>

This is a very simplified example of a document. It is a very short document. In practice there will be more paragraphs. Our interest is the content of the body element. This document has implied sections:

You have the body section, whose heading is <h1>The Economic Doc</h1>, for the whole body element. You have an implied section with the heading <h2>Earning Money</h2> and its paragraph, <p>Earning money. . . You have an implied section with the heading <h3>Having a job</h3> whose paragraph is <p>In order to . . . Now, this section with the H3 heading is actually a nested section to the previous section with the H2 heading.

You have the implied section with the heading <h2>Spending Money</h2> and its paragraph <p>Spending is . . . This section has two nested implied sections, whose headings are <h3>Low Priced Things</h3> and <h3>High Priced Things</h3>. The first nested section has one paragraph and the second nested section has two paragraphs.

You have an implied section with the heading <h2>Investing Money</h2> and its one paragraph. You have an implied section, <h2>Losing money</h2> and its one paragraph. This implied section has a nested implied section whose heading is <h3>Weak Judgment</h3> with one paragraph.

Problem with Implied Sections
Implied sections are of HTML4 and lower versions. The main problem is that the document cannot be easily edited by moving sections about. There is also no coding indentation to indicate sections and nested sections.

Solution to Implied Sections
HTML5 introduced sectioning content elements to solve the above problems, and recommends that you code the body of the above document as follows:

<body>
    <h1>The Economic Doc</h1>
    <section>
        <h2>Earning Money</h2>
        <p>Earning money is a good thing.</p>
        <section>
            <h3>Having a job</h3>
            <p>In order to earn money you normally need a job.</p>
        </section>
    </section>
    <section>
        <h2>Spending Money</h2>
        <p>Spending is what money is mainly used for.</p>
        <section>
            <h3>Low Priced Things</h3>
            <p>Buying cheap things often is not cost-effective.</p>
        </section>
        <section>
            <h3>High Priced Things</h3>
            <p>The most expensive thing is often not the most cost-effective either.</p>
            <p>Few people buy expensive things.</p>
        </section>
    </section>
    <section>
        <h2>Investing Money</h2>
        <p>You can lend your money to other people.</p>
    </section>
    <section>
        <h2>Losing money</h2>
        <p>If you spend money or invest money, sooner or later you will lose money.</p>
        <section>
            <h3>Weak Judgment</h3>
            <p>Usually if you lose money it's because you made a mistake.</p>
        </section>
    </section>
</body>

This second code is easier to edit (spot and move sections around). The sections are clearly demarcated. A nested (or subsection) is indented more into the page, rightward. If you display the document, you are not likely going to see indentation of the sections; however, you should indent the sections when coding, for easier editing later.

Note: top-level elements are elements such as h1 and paragraph elements that are of the H1 level, immediately nested to the body element. They can be spaced out vertically with <section> elements between them.

As another example, consider the following code that is OK for HTML4 but not OK for HTML5 and the future:

<body>
<h1>Foo</h1>
  <p>para 11</p>
<h2>Bar</h2>
<blockquote>
  <h3>Bla</h3>
</blockquote>
<p>papa 12</p>
<h2>Quux</h2>
<p>papa 21</p>
<h3>Thud</h3>
<p>para 31</p>
<p>para 32</p>

</body>

Looking at this code, it is not clear whether the paragraph <p>para 32</p> is of the top level or not. HTML5 recommends you code this document as follows:

<body>
    <h1>Foo</h1>
    <p>para 11</p>
    <section>
        <h2>Bar</h2>
        <blockquote>
            <h3>Bla</h3>
        </blockquote>
    </section>
    <p>papa 12</p>
    <section>
        <h2>Quux</h2>
        <p>papa 21</p>
        <section>
            <h3>Thud</h3>
            <p>para 31</p>
            <p>para 32</p>
        </section>
    </section>
</body>

This is a better code: easier to read and easier to maintain and edit.

Note: like the body element, the blockquote element is an example of a sectioning root element. Here, it is like a section element nested into another section element.

In practice, a section element may have more than one paragraph and many paragraphs will not just be one sentence long.

Sectioning Root Elements
Certain elements are called sectioning root elements. They are: blockquote, body, fieldset, figure and td – see details later.

Advantage of Sectioning
With HTML4 and below, you had implied sections. HTML5 has added sectioning content elements to HTML. Sectioning helps for editing and maintenance of the document, when you have to spot sections and their contents and move sections about in the document.

Remember: the body and section elements are examples of sectioning content elements.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

HTML section and body Element

Sectioning Content – Part 1

Introduction

Related Links

Comments