Basic Page Structure
1. Break down page information and rank it in terms of importance and overall site goals.
2. Create a sample document outline with the main points used as sections.
3. Nest elements to identify sections of content and determine the page structure.
4. Define section types.
5. Structure interior content within each section type.
6. In HTML5, the importance of content and its relationship to other page regions is a very important factor in deciding which elements to use when structuring a page.
Checking The Document Outline for Intended Display Results
Online Resources
- HTML5 Outliner
- Parses the document using the HTML5 algorithm.
- Works best on pages loaded to a server.
- Google Chrome Extension HTML5 Outliner (h5o).
Project Goals
- A bookmarklet, to produce outlines in decent browsers.
- A Firebug extension, to help HTML5 development.
- A repository of HTML5 outlining test cases.
- Minified Javascript that you can use.
Top
Ensuring Cross Browser Structure
Create CSS rules to ensure block display of the new HTML5 tags.
This will ensure forward compatibility as some new tags are fully supported in modern browsers. Creating CSS rules will also tell all browsers to recognize and display sectioning content, as well as some of the flow content, representing them as block model objects.
IE and older browsers don't know what these objects are and therefore will not know how to go about rendering them and the HTML5 specification doesn't say how these elements should be displayed, or whether they are block versus inline elements.
Consider the Example:
/*html5 display rule grouping, lists the HTML5 section and some flow contents*/
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display:block;
}
This CSS rule tells all browsers to recognize and display the listed HTML elements as blocks.
IE Compatibility Issues
Most browsers handle the new HTML5 semantics just fine with the exception of IE. When IE9 is launched it is reported to offer excellent HTML5 support.
Google hosts an HTML5 Enabling Script for IE. The script creates the HTML5 elements, enabling any version of IE less than 9 to recognize the elements and style them properly.
To use the link, add it to the head of your document right before the </head> closing tag and above your CSS.
It looks like this.
<head>
<title>My Page</title>
<!--[if lt IE 9]>
<script> src="http://html5shiv.googlecode.com/svn/trunk/html5.js></script>
<![endif]-->
<link href="main.css" rel="stylesheet" type="text/css">
Top
