11

11Headers, footers and basic navigation

11.1

The header components

The header is the bit at the top of every page; this is the header for section 3 of the website:

Figure 11.2 - Section 3 header
Figure 11.2   Section 3 header

I’ve highlighted everything in the header (contained in the <header> element) in blue.

There are three bits to the header:

  1. The navigation bar at the top:

Figure 11.2a - Nav bar

  1. The title:

Figure 11.2b - Title

  1. The table of contents:

Figure 11.2c - Table of contents

These three components occur on every page within the website (there is some slight variation on the main landing page. I look at that in section 23).

11.1.1

The basic <header> code

The <header> code is the first thing in the <body> section of the page, it looks like this:

header html
<body>


<!-- ****************************************************************** [WP HEADER]
     HEADER (COVER & TABLE OF CONTENTS)
     ***************************************************************-->
    <header id="js--000000">

<!-- ****************************************************************** [WP TOPNAV]
     TOP NAVIGATION (ABOVE CONTENTS LIST)
     ***************************************************************-->

    <nav>                                               <!-- Start of top nav bar     -->
        <div class="top-nav">                           <!-- Start of top nav row     -->
            <div class="rg-row">                        <!-- Start of nav button row  -->
                     ... <!-- NAVIGATION BAR CODE -->
            </div>                                      <!-- End of nav button row    -->
        </div>                                          <!-- End of top nav row       -->
    </nav>                                              <!-- End of top nav bar       -->
<!-- ================================================================== [WP END]      -->

<!-- ****************************************************************** [WP TITLE]
     TITLE BAR (Section number and text)
     ***************************************************************-->

    <div class="rg-row title-row">                      <!-- Start of title row       -->
        <div class="rg-col rg-span1-5"></div>           <!-- left column (not used)   -->
        <div class="rg-col rg-span3-5 title-centre">    <!-- Start of title           -->
            <div class="title-num-box"><p>3</p></div>
            <div class="title-text-box"><h1><span class="title-small-num">3</span>Grids</h1></div>
        </div>                                          <!-- End of title             -->
        <div class="rg-col rg-span1-5"></div>           <!—right column (not used)    -->
    </div>                                              <!-- End of title             -->

<!-- ****************************************************************** [WP TOC]
     TABLE OF CONTENTS
     ***************************************************************-->

    <div class="rg-row">                                <!-- Start of TOC section     -->
        <div class="rg-col rg-span1-5"></div>           <!-- Left column (not used)   -->
        <div class="rg-col rg-span3-5">                 <!-- Start of TOC column      -->
                     ... <!-- TOC CONTENTS -->
        </div>                                          <!-- End of TOC column        -->
        <div class="rg-col rg-span1-5"></div>           <!-- Right column (not used)  -->
    </div>                                              <!-- End of TOC section       -->
<!-- ================================================================== [WP END]      -->

    </header>                                           <!-- End of header            -->
<!-- ================================================================== [WP END]      -->
Code 11.1   HTML associated with the <header> element

I haven’t included the full code for the navigation bar (where it says <!-- NAVIGATION BAR CODE -->) or the table of contents (where it says <!-- TOC CONTENTS -->); I look at these separately in the following sections.

I’ve coloured the areas for the three components, navigation bar (red), title (green) and table of contents (blue) and again, I look at each in the following sections.

The <header> element itself just surrounds all these components (in orange). There is not much to the header, just an ID:

        <header id="js--000000">

The ID is used as a scroll point (I discussed this here where I’d used it in the <section> code. There is a more involved discussion in § 13.4).

The header, on every page, always has the id:

js--000000

Indicating it is the first thing on the page. There is nothing else to the <header> (there are no CSS classes associated with it).

Of the three components mentioned here, there is only one that is in anyway complicated and this is the navigation bar and that’s what I’m going to look at next:



End flourish image