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

HTML5 Semantic Elements
  • 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

Agenda wireframe layout

For more about Containers, Rows and Bootstrap Layout, see Grids

Text layout structure


HTML s Column Layout

Agenda wireframe layout

For more about Containers, Rows and Bootstrap Layout, see Grids

Text layout structure


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

Layout types

Upcoming Events

Agenda wireframe layout
Agenda wireframe

Events

Agenda wireframe layout
Agenda wireframe

Agenda

Agenda wireframe layout
Agenda wireframe