Last updated: 26 December 2016

This website is an evolution of its sister-site (www.htmlpagestructure.com), which proposes a structure for a website using pre-HTML5 tags. The purpose of this site is to:

  • Provide a general reference for how HTML tags should be structured.
  • Provide general instruction on how to simply style such tags using CSS in a way usable by most websites.

This website proposes a standardised structure for a website that has:

  • A main area that covers at least the entire height of the page except for space for a footer element
  • A footer area that is intuitively pushed down as the page size increases
  • A fixed or moving header

Below is presented a standard HTML page structure that corresponds to the structure of this web page. The inlined CSS represents that CSS that never changes (except for those measurements related to the height of the footer), while the CSS represented below is the same as the CSS that has been inlined within this page's head section, which determines site-specific details such as colours, font styles, widths, etc.

Note this page layout has also been designed so that you don't need to manually change the z-index of sections of page. Therefore, the page header is placed after the MAIN and FOOTER elements. Similarly, dialogs and progress indicators, which are represented on top of other content are placed at the bottom of the BODY element. 

{html}
	{head}
	{/head}
	{body style='position:relative;min-height:100vh;overflow-y:scroll;margin:0;'}
		{main style='padding-bottom:60px;display:flex;min-height:100vh;box-sizing:border-box;'}
			{article style='margin-left:auto; margin-right:auto;position:relative;'}
				{section}
					{h1}Page Title{/h1}
					{section}
						{h2}Section Title{/h2}
					{/section}
				{/section}
				{aside}
				{/aside}
			{/article}
			{aside}
			{/aside}
		{/main}
		{footer style='height:60px;position:absolute;bottom:0;left:0;right:0;'}
		{/footer}
		{header style='position:fixed;'}
		{/header}
		{nav}
		{/nav}
		{dialog}
		{/dialog}
		{progress}
		{/progress}
	{/body}
{/html}

Note:
The padding-bottom style attribute of the 'main' element should be the same as the height style attribute of the footer element; also the position attribute of the 'header' element may be either 'fixed', or 'absolute', depending on whether it should scroll off screen or not.

Structure overview

It is important that the minimum height of the BODY element is set to the full size of the window by setting the min-height as "100vh" -- vh is a new unit that corresponds to the vertical height of the window. I like to also set the 'overflow-y' value to scroll so that there is a consistent page width (improving rendering).

The MAIN element represents the entire background area of the page. Its min-height is also set to "100vh" and its background colour should be set to something appropriate.

MAIN will usually contain one or both of the following elements:

  • The ARTICLE element contains the content SECTION elements of the webpage, as well as any ASIDE elements logically associated with the article; and
  • an ASIDE element may contain top-level navigation or other content.

The FOOTER element needs to be positioned within the MAIN element so that it can be pushed down the page as the main element increases in size. However, it should not be contained within the MAIN element as conceptually it is not part of the main content, and it may be desirable for its width to extend beyond that of the MAIN element. This is achieved by giving the MAIN elemnt a padding-bottom of the same height as the footer, and then placing the FOOTER element within that vertical space by giving it an absolute position.

Alternatively, if desired, CSS may be used to make the FOOTER element fixed in place. Generally, site specific CSS will be used to specify the width of the ARTICLE and FOOTER elements.

Article

The ARTICLE element contains all of the main content of the web page, and is responsible for setting the width and height of the content area. Typically, the background of this element will be white or some other light colour.

If a "long form" type website with wide sections is desired, this element's max-width should be either left as the default 100%, or another wide value; in contrast for a standard (responsive) page the max-width can be set to a more reasonable value. This element's position is set to relative so that its content area is respected by child elements. Also, the left and right margins of the element are set to auto so that it is centered in the page.

A key aspect of this method of page layout is that the white "page" has a min-height that is 100% of the height of the content area of the MAIN element. For some unknown reason, setting the position attribute of the parent MAIN element as "relative" and the height attribute of the ARTICLE element as "100%" does not produce the desired result.

In previous versions of this document, the desired result has been achieved by setting the min-height of the ARTICLE element to "100vh" minus whatever the height of the footer is using the CSS 'calc' function. However, a problem with this technique is that some mobile browsers do not support the CSS 'calc' command, and so therefore cannot calculate a minum height of "100vh" - "60px".

This problem can be solved by using the new Flex layout system. By setting the display attribute of the MAIN element to "flex", and ensuring that the flex-direction attribute has a value of "row", the height of the contained ARTICLE element is automatically stretched to fit its parent.

Footer

Using absolute positioning, the footer is placed at the bottom of the page content, which overlaps the prepared area within the MAIN element. Obviously, it is important that the height of the footer in pixels matches the number of pixels of the padding-bottom of the MAIN element.

Customised CSS

The following sections describe how the CSS in the HEAD section affects the page. As previously stated, this CSS is expected to be different depending upon the needs of each website, while the inlined CSS discussed above should be the same for every website.

BODY

The CSS for the BODY element simply specifies the default font styling for the website, as well as the default background colour and font colour. 

BODY
{
	font-family:helvetica;
	line-height:1.4;
	background:#555;
	color:#333;
}

ARTICLE

The CSS for the ARTICLE element:

  1. Sets the sizing model to border box (so that the specified height includes the padding).
  2. Give the page a box shadow.
  3. Specifies the padding for the internal page content.
  4. Sets the background of the page to white.
  5. Sets the max-width of the page to 1000px (for responsive sites this width would be specified using media queries). 
ARTICLE
{
	box-sizing:border-box;
	box-shadow: 0px 2px 15px #333;
	padding:90px 50px;
	background:white;
	min-width: 100px;
	max-width:1000px;
}

FOOTER

Due to the footer being fairly simple text centered vertically, the CSS sets the margins to zero, makes the background transparent, the colour gray, and sets the width to 1000px to match the page. The line-height of the text is set to 60px so that the text is vertically centered within the footer. 

FOOTER
{
	box-sizing:border-box;
	margin:0 auto;
	background:transparent;
	color:gray;
	line-height:60px;
	padding:0 50px;
	width:1000px;
}

HEADER

Be default, the header spans the entire width of the page. The CSS fixes it in place and provides the header with a height of 60px and makes the background red. A box shadow adorns the header to make it appear to hover over the page. The colour of the font is set to white and the font weight is made bold.

The size of the H1 element is set to be appropriate for the size of the header, and the line-height is set to 60px to vertically center the text. 

HEADER
{
	position:fixed; /* fixed or absolute */
	box-sizing:border-box;
	height:60px;
	box-shadow: 1px 1px 15px #000;
	padding:0 50px;

	color:white;
	font-weight:bold;
	background:red;
}

HEADER H1
{
	margin:0;
	font-size:16px;
	line-height:60px;
}

PRE

The CSS for the PRE element simply provides the styling required for this site's preformatted text boxes. 

PRE
{
	margin:0;
	border:solid 20px #eee;
	padding:20px;
	text-align:left;
	overflow-x:auto;
}

CODE

The font size of the CODE elements is increased. 

CODE
{
	font-size:large;
}

HTML5 Page Structure