Page layout is the page structure in which content and components live to handle the user’s attention on a page to convey meaning, sequence, and points of interaction.
Wireframe
header - Defines a header for a document or a section
nav - Defines a set of navigation links
section - Defines a section in a document
article - Defines an independent, self-contained
content
aside - Defines content aside from the content (like a sidebar)
footer - Defines a footer for a document or a section
details - Defines additional details
that the user can open and close on demand
summary - Defines a heading for the
details element
HTML Layout
For more about Containers, Rows and Bootstrap Layout, see Grids
HTML s Column Layout
For more about Containers, Rows and Bootstrap Layout, see Grids
Layouts
Clean, responsive, and accessible.
A layout is a structural template that supports consistency across applications by defining visual grids, spacing, and sections. We encourage clean layouts to ensure that our readers can read and navigate through our content easily.
Page Structure
This is a sample of a layout that has been used:
The header, content, feedback container, and footer extend the entire viewport.
Content that is well structured allows efficient navigation and processing.
Header
The header is a region at the top of each page that contains site-wide information. The Ontario logo, search function, and navigation options can be found at the header. In HTML, the header tag is used which defines the region.
Navigation
The navigation panel is used to allow the viewer move to different web pages and web content. In HTML, the nav element can be used to identify the navigation menu.
Headings
Headings help to organize the content of a page. Web browsers, plugins, and assistive technologies use them for in-page navigation.
The most important headings have the rank of 1 (h1 tag is used to declare this). The least important headings have the rank of 6 (h6 tag is used to declare this). Headings that have an equal or higher rank start a new section, and headings that have a lower rank usually indicate subsections underneath the larger ranked headings. Skipping heading ranks should be avoided when possible as it can get confusing for the reader. For the Ontario websites, heading tags 1-3 are generally the only tags that are used.
Accessibility: Why is this important?
Pages with content that is well-structured is essential for web users, more specifically:
Those who have cognitive and learning disabilities -> can easily find and prioritize content on web page
Those who use screen readers -> skip main content directly and navigate to sections important to them
Keyboard users -> browse pages and sections more efficiently; less tabbing involved
Those who have visual impairments -> cues that provide orientation on the page allow easy page navigation
Mobile web users -> “reading” mode will only show main content of page if correctly marked up
