Skip to content

Commit d81cddc

Browse files
shiva-scGarneauma
shiva-sc
and
Garneauma
authored
Content - Scaffolding: Adding examples for grouping elements (#2182)
--------- Co-authored-by: Marc-André Garneau <marcandre.garneau@servicecanada.gc.ca>
1 parent 475f046 commit d81cddc

File tree

6 files changed

+560
-12
lines changed

6 files changed

+560
-12
lines changed

‎_data/common.json‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -353,9 +353,9 @@
353353
},
354354
"description": {
355355
"en": "HTML elements used as is.",
356-
"fr": "Les éléments HTML utilisé tel quel."
356+
"fr": "Les éléments HTML utilisés tel quel."
357357
},
358-
"modified": "2024-03-28",
358+
"modified": "2025-04-15",
359359
"componentName": "scaffolding",
360360
"processing": "baseline",
361361
"status": "stable",
@@ -380,6 +380,16 @@
380380
"title": "Sémantique au niveau du texte",
381381
"language": "fr",
382382
"path": "texte-niveau-semantique.html"
383+
},
384+
{
385+
"title": "Grouping Content",
386+
"language": "en",
387+
"path": "grouping-en.html"
388+
},
389+
{
390+
"title": "Contenu de groupement",
391+
"language": "fr",
392+
"path": "grouping-fr.html"
383393
}
384394
],
385395
"reports": [

‎_includes/web-contents/placeholdercontent-en.html‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,3 @@ <h6>Heading&#32;6&#32;(<code>h6</code>)</h6>
101101
</div>
102102
</div>
103103
</form>
104-
<blockquote>
105-
<p>"<code>blockquote</code>"</p>
106-
<footer><code>footer</code> <cite><code>cite</code></cite></footer>
107-
</blockquote>

‎_includes/web-contents/placeholdercontent-fr.html‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,3 @@ <h6>En-tête&#32;6&#32;(<code>h6</code>)</h6>
101101
</div>
102102
</div>
103103
</form>
104-
<blockquote>
105-
<p>"<code>blockquote</code>"</p>
106-
<footer><code>footer</code> <cite><code>cite</code></cite></footer>
107-
</blockquote>

‎common/scaffolding/grouping-en.html‎

Lines changed: 268 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,268 @@
1+
---
2+
{
3+
"title": "Grouping Content - Scaffolding",
4+
"language": "en",
5+
"altLangPage": "grouping-fr.html",
6+
"dateModified": "2025-04-15"
7+
}
8+
---
9+
10+
<div class="wb-prettify all-pre"></div>
11+
12+
<div class="alert alert-info">
13+
<p>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 <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#grouping-content">WHATWG section 4.4</a> as of April 2025. This page may not contain all the possible grouping content element combination.</p>
14+
</div>
15+
16+
<h2>The <code>p</code> element</h2>
17+
<p>This is some text in a paragraph.</p>
18+
<pre><code>&lt;p> ... &lt;/p></code></pre>
19+
20+
<h2>The <code>hr</code> element</h2>
21+
<hr>
22+
<pre><code>&lt;hr></code></pre>
23+
24+
<h2>The <code>pre</code> element</h2>
25+
<pre>Here is some pre formatted text</pre>
26+
<pre><code>&lt;pre> ... &lt;/pre></code></pre>
27+
28+
<h2>The <code>blockquote</code> element</h2>
29+
<blockquote>
30+
<p>This is a blockquote example</p>
31+
</blockquote>
32+
<pre><code>&lt;blockquote&gt;
33+
&lt;p&gt; ... &lt;/p&gt;
34+
&lt;/blockquote&gt;</code></pre>
35+
36+
<h3 id="bqWithAuthor">Example with author</h3>
37+
<figure>
38+
<blockquote>
39+
<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>
40+
</blockquote>
41+
<figcaption>Heraclitus, <cite>Fragments</cite></figcaption>
42+
</figure>
43+
<pre><code>&lt;figure>
44+
&lt;blockquote>
45+
&lt;p>"No man ever steps in the same river twice, for it's not the same river and he's not the same man."&lt;/p>
46+
&lt;/blockquote>
47+
&lt;figcaption>Heraclitus, &lt;cite>Fragments&lt;/cite>&lt;/figcaption>
48+
&lt;/figure></code></pre>
49+
50+
<h3>Invalid example</h3>
51+
<p>2025-04 - The following design pattern was visible in the generic content page, but contained invalid HTML. Please use the <a href="#bqWithAuthor">above code</a> instead.</p>
52+
<pre><code><del>&lt;blockquote>
53+
&lt;p>"&lt;code>blockquote&lt;/code>"&lt;/p>
54+
&lt;footer>&lt;code>footer&lt;/code> &lt;cite>&lt;code>cite&lt;/code>&lt;/cite>&lt;/footer>
55+
&lt;/blockquote>
56+
</del></code></pre>
57+
58+
<h2>The <code>ol</code> and <code>li</code> elements</h2>
59+
<ol>
60+
<li>Switzerland</li>
61+
<li>United Kingdom</li>
62+
<li>United States</li>
63+
<li>Norway</li>
64+
</ol>
65+
<pre><code>&lt;ol&gt;
66+
&lt;li&gt;...&lt;/li&gt;
67+
&lt;li&gt;...&lt;/li&gt;
68+
&lt;li&gt;...&lt;/li&gt;
69+
&lt;/ol&gt;</code></pre>
70+
71+
<h2>The <code>ul</code> and <code>li</code> element.</h2>
72+
<ul>
73+
<li>Norway</li>
74+
<li>Switzerland</li>
75+
<li>United Kingdom</li>
76+
<li>United States</li>
77+
</ul>
78+
<pre><code>&lt;ul&gt;
79+
&lt;li&gt;...&lt;/li&gt;
80+
&lt;li&gt;...&lt;/li&gt;
81+
&lt;li&gt;...&lt;/li&gt;
82+
&lt;/ul&gt;</code></pre>
83+
84+
<h2>The <code>menu</code> and <code>li</code> elements</h2>
85+
<menu>
86+
<li><button>Copy</button></li>
87+
<li><button>Cut</button></li>
88+
<li><button>Paste</button></li>
89+
<li>List item</li>
90+
<li><a href="#">Anchor</a></li>
91+
</menu>
92+
<pre><code>&lt;menu&gt;
93+
&lt;li&gt;...&lt;/li&gt;
94+
&lt;li&gt;...&lt;/li&gt;
95+
&lt;li&gt;...&lt;/li&gt;
96+
&lt;/menu&gt;</code></pre>
97+
98+
<h2>The <code>dl</code>, <code>dd</code>, and <code>dt</code> elements</h2>
99+
<dl>
100+
<dt>Term 1</dt>
101+
<dd>Description 1</dd>
102+
<dt>Term 2</dt>
103+
<dd>Description 2</dd>
104+
</dl>
105+
<pre><code>&lt;dl>
106+
&lt;dt>Term 1&lt;/dt>
107+
&lt;dd>Description 1&lt;/dd>
108+
&lt;dt>Term 2&lt;/dt>
109+
&lt;dd>Description 2&lt;/dd>
110+
&lt;/dl></code></pre>
111+
112+
<h3>With two consecutive description </h3>
113+
<dl>
114+
<dt>Authors</dt>
115+
<dd>John</dd>
116+
<dd>Luke</dd>
117+
<dt>Editor</dt>
118+
<dd>Frank</dd>
119+
</dl>
120+
<pre><code>&lt;dl>
121+
&lt;dt>Authors&lt;/dt>
122+
&lt;dd>John&lt;/dd>
123+
&lt;dd>Luke&lt;/dd>
124+
&lt;dt>Editor&lt;/dt>
125+
&lt;dd>Frank&lt;/dd>
126+
&lt;/dl></code></pre>
127+
128+
<h3>With two consecutive terms</h3>
129+
<dl>
130+
<dt lang="en-US">color</dt>
131+
<dt lang="en-GB">colour</dt>
132+
<dd>A sensation which (in humans) derives from the ability of
133+
the fine structure of the eye to distinguish three differently
134+
filtered analyses of a view.</dd>
135+
</dl>
136+
<pre><code>&lt;dl>
137+
&lt;dt lang="en-US">color&lt;/dt>
138+
&lt;dt lang="en-GB">colour&lt;/dt>
139+
&lt;dd>A sensation which (in humans) derives from the ability of
140+
the fine structure of the eye to distinguish three differently
141+
filtered analyses of a view.&lt;/dd>
142+
&lt;/dl></code></pre>
143+
144+
<h3>With grouping division <code>&lt;div></code></h3>
145+
<dl>
146+
<div>
147+
<dt>Last modified time</dt>
148+
<dd>2004-12-23T23:33Z</dd>
149+
</div>
150+
<div>
151+
<dt>Recommended update interval</dt>
152+
<dd>60s</dd>
153+
</div>
154+
<div>
155+
<dt>Authors</dt>
156+
<dt>Editors</dt>
157+
<dd>Robert Rothman</dd>
158+
<dd>Daniel Jackson</dd>
159+
</div>
160+
</dl>
161+
<pre><code>&lt;dl>
162+
&lt;div>
163+
&lt;dt>Last modified time&lt;/dt>
164+
&lt;dd>2004-12-23T23:33Z&lt;/dd>
165+
&lt;/div>
166+
&lt;div>
167+
&lt;dt>Recommended update interval&lt;/dt>
168+
&lt;dd>60s&lt;/dd>
169+
&lt;/div>
170+
&lt;div>
171+
&lt;dt>Authors&lt;/dt>
172+
&lt;dt>Editors&lt;/dt>
173+
&lt;dd>Robert Rothman&lt;/dd>
174+
&lt;dd>Daniel Jackson&lt;/dd>
175+
&lt;/div>
176+
&lt;/dl></code></pre>
177+
178+
<h3>As glossary with term definition <code>&lt;dfn></code></h3>
179+
<dl>
180+
<dt><dfn>Apartment</dfn>, n.</dt>
181+
<dd>An execution context grouping one or more threads with one or
182+
more COM objects.</dd>
183+
<dt><dfn>Flat</dfn>, n.</dt>
184+
<dd>A deflated tire.</dd>
185+
<dt><dfn>Home</dfn>, n.</dt>
186+
<dd>The user's login directory.</dd>
187+
</dl>
188+
<pre><code>&lt;dl>
189+
&lt;dt>&lt;dfn>Apartment&lt;/dfn>, n.&lt;/dt>
190+
&lt;dd>An execution context grouping one or more threads with one or
191+
more COM objects.&lt;/dd>
192+
&lt;dt>&lt;dfn>Flat&lt;/dfn>, n.&lt;/dt>
193+
&lt;dd>A deflated tire.&lt;/dd>
194+
&lt;dt>&lt;dfn>Home&lt;/dfn>, n.&lt;/dt>
195+
&lt;dd>The user's login directory.&lt;/dd>
196+
&lt;/dl></code></pre>
197+
198+
<h2>The <code>figure</code> and <code>figcaption</code> element</h2>
199+
<h3>Example with caption after the figurative grouped content</h3>
200+
<figure>
201+
<p>'Twas brillig, and the slithy toves<br>
202+
Did gyre and gimble in the wabe;<br>
203+
All mimsy were the borogoves,<br>
204+
And the mome raths outgrabe.</p>
205+
<figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>
206+
</figure>
207+
208+
<h3>Example with caption before the figurative grouped content</h3>
209+
<figure>
210+
<figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>
211+
<p>'Twas brillig, and the slithy toves<br>
212+
Did gyre and gimble in the wabe;<br>
213+
All mimsy were the borogoves,<br>
214+
And the mome raths outgrabe.</p>
215+
</figure>
216+
<pre><code>&lt;figure&gt;
217+
&lt;p&gt;...&lt;p&gt;
218+
&lt;figcaption&gt;...&lt;/figcaption&gt;
219+
&lt;/figure&gt;</code></pre>
220+
221+
<h2>The <code>search</code> element</h2>
222+
<search>
223+
<form action="#">
224+
<label for="query">Find an article</label>
225+
<input id="query" name="q" type="search">
226+
<button type="submit">Go!</button>
227+
</form>
228+
</search>
229+
<pre><code>&lt;search&gt;
230+
&lt;form&gt;
231+
...
232+
&lt;/form&gt;
233+
&lt;/search&gt;</code></pre>
234+
235+
<h2>The <code>div</code> element</h2>
236+
<h3>Multiple div's</h3>
237+
<div>
238+
<div>
239+
<div>
240+
<h4>This is a heading in a div element</h4>
241+
</div>
242+
<div>
243+
<p>This is some text in a div element.</p>
244+
</div>
245+
</div>
246+
</div>
247+
<pre><code>&lt;div>
248+
&lt;div>
249+
&lt;div>
250+
&lt;h4>This is a heading in a div element&lt;/h4>
251+
&lt;/div>
252+
&lt;div>
253+
&lt;p>This is some text in a div element.&lt;/p>
254+
&lt;/div>
255+
&lt;/div>
256+
&lt;/div></code></pre>
257+
258+
<h3>Empty div</h3>
259+
<div></div>
260+
<pre><code>&lt;div>&lt;/div></code></pre>
261+
262+
<h2>The <code>main</code> element</h2>
263+
<p>The current page leverages the <code>&lt;main></code> element.</p>
264+
<pre><code>&lt;body>
265+
&lt;main>
266+
...
267+
&lt;/main>
268+
&lt;/body></code></pre>

0 commit comments

Comments
 (0)