HTML structure

The HTML layout is based on that proposed by www.HTML5PageStructure.com. The BODY element contains the top-level MAIN, FOOTER, NAV, HEADER, and DIALOG elements - the order of these elements within the BODY element corresponds to the intended order of their z-index, which determins which elements are rendered above other elements. 

...
<body>
    <main />
    <footer />
    <nav />
    <header />
    <dialog />
</body>
...

HTML5 Page Structure

The main objective of the proposed HTML5 Page Structure is to provide a way to reliabily keep a footer at either the bottom of the browser window, or the bottom of the web page regardless of the amount of main content.

This is achieved by using the 'min-height' css attribute. Both the BODY and MAIN elements have their minimum heights set to '100vh' (100% of the vertical height of the window). The MAIN element then has its bottom padding set to a size the same as the height of the footer, and its 'box-sizing' is set to 'border-box' to ensure that this is counted within the minimum height. Similarly, the top padding should be enough to clear any header.

The FOOTER element is then given an absolute position at the bottom of the BODY element, which will correspond to the bottom padding area of the MAIN element.

Note that a consequence of this is that any border of the MAIN element would be obscured by both the footer and any header. Therefore, the representation of any content borders needs to be achieved by using child elements of the MAIN element. 

BODY
{
    position:relative;
    min-height:100vh;
}

BODY > MAIN
{
    box-sizing:border-box;
    min-height:100vh;
    padding-bottom:80px;
}

BODY > FOOTER
{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:80px;
}

Note, some CSS has been removed from what would be the normal 'h5ps.css' file that will be specified later.

The BODY element CSS

The body element contains very little styling - all that needs to be set is the background colour, which is a very light grey, and the default margin is reduced to zero. Setting the y axis overflow to scroll ensures that the content area of the screen remains consistent regardless of the amount of content, as a scroll bar is always present. 

BODY
{
    font-family:opensans,helvetica,arial;
    background:#f9f9f9;
    margin:0;
    overflow-y:scroll;
    line-height:1.6;
}

Next