Language selection

Government of Canada / Gouvernement du Canada

Search

Grouping Content - Scaffolding

The purpose of this page is to test all native content grouping related elements, if they are aligned with our design and are compliant to our accessibility guideline when used as is without any special customization. The following include all content grouping elements in the HTML5 specification and a few examples was inspired by the WHATWG section 4.4 as of April 2025. This page may not contain all the possible grouping content element combination.

The p element

This is some text in a paragraph.

<p> ... </p>

The hr element

<hr>

The pre element

Here is some pre formatted text
<pre> ... </pre>

The blockquote element

This is a blockquote example

<blockquote>
	<p> ... </p>
</blockquote>

Example with author

"No man ever steps in the same river twice, for it's not the same river and he's not the same man."

Heraclitus, Fragments
<figure>
	<blockquote>
		<p>"No man ever steps in the same river twice, for it's not the same river and he's not the same man."</p>
	</blockquote>
	<figcaption>Heraclitus, <cite>Fragments</cite></figcaption>
</figure>

Invalid example

2025-04 - The following design pattern was visible in the generic content page, but contained invalid HTML. Please use the above code instead.

<blockquote>
	<p>"<code>blockquote</code>"</p>
	<footer><code>footer</code> <cite><code>cite</code></cite></footer>
</blockquote>

The ol and li elements

  1. Switzerland
  2. United Kingdom
  3. United States
  4. Norway
<ol>
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ol>

The ul and li element.

<ul>
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ul>

The menu and li elements

  • List item
  • Anchor
    •  
    <menu>
	<li>...</li>
	<li>...</li>
	<li>...</li>
</menu>

    The dl, dd, and dt elements

    Term 1
    Description 1
    Term 2
    Description 2
    <dl>
	<dt>Term 1</dt>
	<dd>Description 1</dd>
	<dt>Term 2</dt>
	<dd>Description 2</dd>
</dl>

    With two consecutive description

    Authors
    John
    Luke
    Editor
    Frank
    <dl>
	<dt>Authors</dt>
	<dd>John</dd>
	<dd>Luke</dd>
	<dt>Editor</dt>
	<dd>Frank</dd>
</dl>

    With two consecutive terms

    color
    colour
    A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three differently filtered analyses of a view.
    <dl>
	<dt lang="en-US">color</dt>
	<dt lang="en-GB">colour</dt>
	<dd>A sensation which (in humans) derives from the ability of
	the fine structure of the eye to distinguish three differently
	filtered analyses of a view.</dd>
</dl>

    With grouping division <div>

    Last modified time
    2004-12-23T23:33Z
    Recommended update interval
    60s
    Authors
    Editors
    Robert Rothman
    Daniel Jackson
    <dl>
	<div>
		<dt>Last modified time</dt>
		<dd>2004-12-23T23:33Z</dd>
	</div>
	<div>
		<dt>Recommended update interval</dt>
		<dd>60s</dd>
	</div>
	<div>
		<dt>Authors</dt>
		<dt>Editors</dt>
		<dd>Robert Rothman</dd>
		<dd>Daniel Jackson</dd>
	</div>
</dl>

    As glossary with term definition <dfn>

    Apartment, n.
    An execution context grouping one or more threads with one or more COM objects.
    Flat, n.
    A deflated tire.
    Home, n.
    The user's login directory.
    <dl>
	<dt><dfn>Apartment</dfn>, n.</dt>
	<dd>An execution context grouping one or more threads with one or
	more COM objects.</dd>
	<dt><dfn>Flat</dfn>, n.</dt>
	<dd>A deflated tire.</dd>
	<dt><dfn>Home</dfn>, n.</dt>
	<dd>The user's login directory.</dd>
</dl>

    The figure and figcaption element

    Example with caption after the figurative grouped content

    'Twas brillig, and the slithy toves
    Did gyre and gimble in the wabe;
    All mimsy were the borogoves,
    And the mome raths outgrabe.

    Jabberwocky (first verse). Lewis Carroll, 1832-98

    Example with caption before the figurative grouped content

    Jabberwocky (first verse). Lewis Carroll, 1832-98

    'Twas brillig, and the slithy toves
    Did gyre and gimble in the wabe;
    All mimsy were the borogoves,
    And the mome raths outgrabe.

    <figure>
	<p>...<p>
	<figcaption>...</figcaption>
</figure>

    The search element

     
    <search>
	<form>
		...
	</form>
</search>

    The div element

    Multiple div's

    This is a heading in a div element

    This is some text in a div element.

    <div>
	<div>
		<div>
			<h4>This is a heading in a div element</h4>
		</div>
		<div>
			<p>This is some text in a div element.</p>
		</div>
	</div>
</div>

    Empty div

    <div></div>

    The main element

    The current page leverages the <main> element.

    <body>
	<main>
		...
	</main>
</body>

    Page details

    Date modified: