Numbering Sections in a Web page

Marking and Numbering Sections with CSS3 – Part 3

Forward: In this part of the series, we see how to number sections in a web page.

By: Chrysanthus Date Published: 3 Aug 2012

Introduction

This is part 3 of my series, Marking and Numbering Sections with CSS3. In this part of the series, we see how to number sections in a web page. I assume you have read the different parts of the series, before reaching here.

Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.

HTML Sectioning
Today, html has sectioning elements to create sections similar to book page sections. The html sectioning elements are: nav, section, header, footer, article and aside. In this tutorial we shall use only the principal sectioning element, which is, section.

Kind of Numbers
Let us make things simple. As I said in the first part of this series, we imagine a number of web pages that form a book. There is one chapter per web page. Each chapter has three sections. So chapter 2 for example has section 2.1, section 2.2 and section 2.3.

To number a section, you can start with a word, e.g. section, then the number of the chapter and then the decimal point (period) and then the number of the section, counting from section 1.

It is simple to achieve this, you just use the knowledge acquired in the previous part of the series (see Recall below).

Recall
To number a set of consecutive html elements in a web page, you need the :before pseudo element, which will be inserted in front (on the left) of each of the consecutive elements. You also need three css properties, which are: counter-reset, counter-increment and content, in that order. For ordinary numbering, the value of the counter-reset property is a name of your choice that you give to the counter that will do the counting. There is no code for the counter, the counter-reset property declares the counter and gives it the name of your choice. The value of the counter-increment property for ordinary counting is the name of the counter, and the default counting increment is 1. The value of the counter property is a string code consisting of short text and spacing and the counter function call, for ordinary numbering. The argument of the counter function for ordinary numbering is the name of the counter.

Illustration
In the following code, there are three html section elements. The sections are labeled as “Section 3.1”, “Section 3.2” and “Section 3.3”. The assumption here is that we are dealing with Chapter 3. Each section has paragraphs, but the paragraphs are not numbered or labeled.

So, the CSS declaration block for the body element would have;

    counter-reset: section

Here, the word, “section” is the name (of your choice) of the counter and not of the html section element.

Let us assume here that each section in the web page book has the h3 heading. It is advisable to type the h heading just after the start tag of the section element. So it is the h3 heading that would receive the section marking (label) and number. It is normal, for the heading elements to receive the numbering (and marking). Let us name the class of the h3 elements that need the marking and numbers as, “section”. So in the declaration block for the h3 element, you would have,

        h3.section:before
            {
                counter-increment:section;
                content:"Section 3."counter(section)" - ";
            }

String as part of the value to the content attribute has to be in double quotes. So “Section 3.” will appear in front (before and on the left) of every generated number, giving “Section 3.1” for the first section heading. Note that the decimal point is part of the string, “Section 3.” and is not the result of some calculation. Here, CSS generates only the numbers after the decimal point.

Here is the complete code. Read and try it:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
    <style type="text/css">
        body {counter-reset:section}
        h3.section:before
            {
                counter-increment:section;
                content:"Section 3."counter(section)" - ";
            }
    </style>
</head>
<body>

    <section>
        <h3 class="section">First Heading</h3>
        <p class="test">Section 1 paragraph.</p>
        <p class="test">Section 1 paragraph</p>
    </section>
    <section>
        <h3 class="section">Second Heading</h3>
        <p class="test">Section 2 paragraph.</p>
        <p class="test">Section 2 paragraph</p>
    </section>
    <section>
        <h3 class="section">Third Heading</h3>
        <p class="test">Section 3 paragraph.</p>
        <p class="test">Section 3 paragraph</p>
    </section>

</body>
</html>

At this point, you should be able to design the marking and numbering of sections of any article page on the web.

We stop here and continue in the next part of the series.

Chrys

Broad Network

Related Articles

Numbering Sections in a Web page

Marking and Numbering Sections with CSS3 – Part 3

Introduction

Related Links

Comments