Front End Help

XHTML Page Templates

Each page on the Archive follows the same basic structure and order. As discussed in the Front End User Guide, there are four major regions on the Archive, three of which are included on every page. The skip links are not considered a region and are not visible; however, they are included on every page to allow users of some assistive technology to jump directly to the main content, which is contained within <div id="main">.

  1. body
    1. ul #skiplinks
    2. div #header
    3. div #main
    4. div #footer

The dashboard is the only region that does not appear on every page. It most often contains navigation specific to users and collection pages, and it generally takes the form of a sidebar on the left of such pages. (It appears beneath the header and above the main content on very small screens and mobile devices.)

  1. body
    1. ul #skiplinks
    2. div #header
    3. div #dashboard
    4. div #main .dashboard
    5. div #footer

The structure is commented in the views. Each section is announced by a heading, although many of these headings are not displayed in the Archive default style; these are called landmarks. Like the skip links, they are designed to help users of assistive technology jump around on the page.

<!--Descriptive page name and system messages, descriptions, and instructions.-->
<h2> </h2>

<!--Subnavigation, sorting and actions.-->
<h3 class="landmark"> </h3>

<!--main content-->
<h3 class="landmark"> </h3>

<!--Subnavigation, sorting and actions.-->
<h3 class="landmark"> </h3>

Here’s a brief look at the structure of a filterable work index, like the work index for The X-Files:

  1. #main
    1. h2
    2. h3 .landmark
    3. ul .navigation
      1. li a
      2. li span .current
    4. h4 .landmark
    5. ol .pagination
      1. li .previous a
      2. li span .current
      3. li a
      4. li...
      5. li .next a
    6. h3 .landmark
    7. ol .work index
      1. blurb
      2. blurb
      3. blurb
      4. blurb...
    8. form .filters
      1. h3 .landmark
      2. fieldset
        1. legend
        2. dl .filters
          1. dt .landmark
          2. dd .submit input
          3. dt
          4. dd
          5. dt...
          6. dd...
          7. dt .landmark
          8. dd .submit input
    9. h4 .landmark
    10. ol .pagination
      1. li .previous a
      2. li span .current
      3. li a
      4. li...
      5. li .next a
    11. div .clear

Other indices on the Archive, such as a tag’s bookmark index and the collections index, follow the same pattern. There are also variations of it that don’t have filters, such as the main works index, or that have filters and a dashboard, such as a user’s bookmark index.