-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathHTML-elements-examples-(normalisation).html
More file actions
474 lines (472 loc) · 36.4 KB
/
HTML-elements-examples-(normalisation).html
File metadata and controls
474 lines (472 loc) · 36.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
<!doctype html>
<html dir="ltr" lang="en-GB">
<head>
<base target="_blank">
<link href="../Normalisation.css" media="all" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<meta content="height = device-height, initial-scale = 1, user-scalable = yes, width = device-width" name="viewport">
<style>
.loremIpsum
{
color: #777777;
}
.sectionHead
{
background-color: #F0F0F0;
border: 0.1rem solid #000000;
margin-block: 1rem;
padding: 1rem;
text-align: center;
}
.sectionHead p
{
text-align: center;
}
</style>
<title>HTML elements examples (normalisation)</title>
</head>
<body>
<nav><b>HTML elements examples</b> (<a href="HTML-elements-examples-(user-agent-default-styles).html" target="_self">agent default styles</a> • <b><a href="HTML-elements-examples-(normalisation).html" target="_self">normalisation</a></b>)</nav>
<main>
<p>Paragraphs (<code><p></code>) are used throughout this page to demonstrate normal content flow.</p>
<div class="sectionHead">
<h1><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements#content_sectioning">Content sectioning</a></h1>
</div>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/address"><code><address></code></a></h2>
</div>
<address>This is text inside an address (<code><address></code>). By user agent default, the element has no margin. Addresses are rarely displayed in italics.</address>
<address>
<p>This is a paragraph (<code><p></code>) inside an address (<code><address></code>). By user agent default, the element has no margin. Addresses are rarely displayed in italics.</p>
</address>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements"><code><h1></code>–<code><h6></code></a></h2>
</div>
<h1>This is a level 1 heading <code><h1></code></h1>
<p>This is a paragraph <code><p></code>.</p>
<h2>This is a level 2 heading <code><h2></code></h2>
<p>This is a paragraph <code><p></code>.</p>
<h3>This is a level 3 heading <code><h3></code></h3>
<p>This is a paragraph <code><p></code>.</p>
<h4>This is a level 4 heading <code><h4></code></h4>
<p>This is a paragraph <code><p></code>.</p>
<h5>This is a level 5 heading <code><h5></code></h5>
<p>This is a paragraph <code><p></code>.</p>
<h6>This is a level 6 heading <code><h6></code></h6>
<p>This is a paragraph <code><p></code>.</p>
<hr>
<hgroup>
<h1>This is a level 1 heading <code><h1></code></h1>
<p>This is a paragraph <code><p></code>. It is inside a heading group (<code><hgroup></code>) along with the previous heading. The heading group is visually indistingishable from the previous example.</p>
</hgroup>
<hgroup>
<h2>This is a level 2 heading <code><h2></code></h2>
<p>This is a paragraph <code><p></code>. It is inside a heading group (<code><hgroup></code>) along with the previous heading. The heading group is visually indistingishable from the previous example.</p>
</hgroup>
<hgroup>
<h3>This is a level 3 heading <code><h3></code></h3>
<p>This is a paragraph <code><p></code>. It is inside a heading group (<code><hgroup></code>) along with the previous heading. The heading group is visually indistingishable from the previous example.</p>
</hgroup>
<hgroup>
<h4>This is a level 4 heading <code><h4></code></h4>
<p>This is a paragraph <code><p></code>. It is inside a heading group (<code><hgroup></code>) along with the previous heading. The heading group is visually indistingishable from the previous example.</p>
</hgroup>
<hgroup>
<h5>This is a level 5 heading <code><h5></code></h5>
<p>This is a paragraph <code><p></code>. It is inside a heading group (<code><hgroup></code>) along with the previous heading. The heading group is visually indistingishable from the previous example.</p>
</hgroup>
<hgroup>
<h6>This is a level 6 heading <code><h6></code></h6>
<p>This is a paragraph <code><p></code>. It is inside a heading group (<code><hgroup></code>) along with the previous heading. The heading group is visually indistingishable from the previous example.</p>
</hgroup>
<hr>
<h1>This is a level 1 heading <code><h1></code>. Text wrapping will happen if it does not fit into a single line. | <span class="loremIpsum" lang="zxx">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius felis at felis mattis tempus. Proin vitae lectus vel felis aliquet tristique in eu lectus. Nulla nulla dolor, rhoncus eu semper ac, dignissim auctor quam. Suspendisse dictum lorem libero, a auctor odio placerat ac. Nulla nec velit ac nisl ornare elementum vel id ligula. Donec venenatis vel sapien a posuere. Ut ac sollicitudin dolor.</span></h1>
<p>This is a paragraph <code><p></code>. Text wrapping will happen if it does not fit into a single line. Text alignment is justified. | <span class="loremIpsum" lang="zxx">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius felis at felis mattis tempus. Proin vitae lectus vel felis aliquet tristique in eu lectus. Nulla nulla dolor, rhoncus eu semper ac, dignissim auctor quam. Suspendisse dictum lorem libero, a auctor odio placerat ac. Nulla nec velit ac nisl ornare elementum vel id ligula. Donec venenatis vel sapien a posuere. Ut ac sollicitudin dolor.</span></p>
<h2>This is a level 2 heading <code><h2></code>. Text wrapping will happen if it does not fit into a single line. | <span class="loremIpsum" lang="zxx">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius felis at felis mattis tempus. Proin vitae lectus vel felis aliquet tristique in eu lectus. Nulla nulla dolor, rhoncus eu semper ac, dignissim auctor quam. Suspendisse dictum lorem libero, a auctor odio placerat ac. Nulla nec velit ac nisl ornare elementum vel id ligula. Donec venenatis vel sapien a posuere. Ut ac sollicitudin dolor.</span></h2>
<p>This is a paragraph <code><p></code>. Text wrapping will happen if it does not fit into a single line. Text alignment is justified. | <span class="loremIpsum" lang="zxx">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius felis at felis mattis tempus. Proin vitae lectus vel felis aliquet tristique in eu lectus. Nulla nulla dolor, rhoncus eu semper ac, dignissim auctor quam. Suspendisse dictum lorem libero, a auctor odio placerat ac. Nulla nec velit ac nisl ornare elementum vel id ligula. Donec venenatis vel sapien a posuere. Ut ac sollicitudin dolor.</span></p>
<h3>This is a level 3 heading <code><h3></code>. Text wrapping will happen if it does not fit into a single line. | <span class="loremIpsum" lang="zxx">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius felis at felis mattis tempus. Proin vitae lectus vel felis aliquet tristique in eu lectus. Nulla nulla dolor, rhoncus eu semper ac, dignissim auctor quam. Suspendisse dictum lorem libero, a auctor odio placerat ac. Nulla nec velit ac nisl ornare elementum vel id ligula. Donec venenatis vel sapien a posuere. Ut ac sollicitudin dolor.</span></h3>
<p>This is a paragraph <code><p></code>. Text wrapping will happen if it does not fit into a single line. Text alignment is justified. | <span class="loremIpsum" lang="zxx">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius felis at felis mattis tempus. Proin vitae lectus vel felis aliquet tristique in eu lectus. Nulla nulla dolor, rhoncus eu semper ac, dignissim auctor quam. Suspendisse dictum lorem libero, a auctor odio placerat ac. Nulla nec velit ac nisl ornare elementum vel id ligula. Donec venenatis vel sapien a posuere. Ut ac sollicitudin dolor.</span></p>
<h4>This is a level 4 heading <code><h4></code>. Text wrapping will happen if it does not fit into a single line. | <span class="loremIpsum" lang="zxx">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius felis at felis mattis tempus. Proin vitae lectus vel felis aliquet tristique in eu lectus. Nulla nulla dolor, rhoncus eu semper ac, dignissim auctor quam. Suspendisse dictum lorem libero, a auctor odio placerat ac. Nulla nec velit ac nisl ornare elementum vel id ligula. Donec venenatis vel sapien a posuere. Ut ac sollicitudin dolor.</span></h4>
<p>This is a paragraph <code><p></code>. Text wrapping will happen if it does not fit into a single line. Text alignment is justified. | <span class="loremIpsum" lang="zxx">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius felis at felis mattis tempus. Proin vitae lectus vel felis aliquet tristique in eu lectus. Nulla nulla dolor, rhoncus eu semper ac, dignissim auctor quam. Suspendisse dictum lorem libero, a auctor odio placerat ac. Nulla nec velit ac nisl ornare elementum vel id ligula. Donec venenatis vel sapien a posuere. Ut ac sollicitudin dolor.</span></p>
<h5>This is a level 5 heading <code><h5></code>. Text wrapping will happen if it does not fit into a single line. | <span class="loremIpsum" lang="zxx">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius felis at felis mattis tempus. Proin vitae lectus vel felis aliquet tristique in eu lectus. Nulla nulla dolor, rhoncus eu semper ac, dignissim auctor quam. Suspendisse dictum lorem libero, a auctor odio placerat ac. Nulla nec velit ac nisl ornare elementum vel id ligula. Donec venenatis vel sapien a posuere. Ut ac sollicitudin dolor.</span></h5>
<p>This is a paragraph <code><p></code>. Text wrapping will happen if it does not fit into a single line. Text alignment is justified. | <span class="loremIpsum" lang="zxx">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius felis at felis mattis tempus. Proin vitae lectus vel felis aliquet tristique in eu lectus. Nulla nulla dolor, rhoncus eu semper ac, dignissim auctor quam. Suspendisse dictum lorem libero, a auctor odio placerat ac. Nulla nec velit ac nisl ornare elementum vel id ligula. Donec venenatis vel sapien a posuere. Ut ac sollicitudin dolor.</span></p>
<h6>This is a level 6 heading <code><h6></code>. Text wrapping will happen if it does not fit into a single line. | <span class="loremIpsum" lang="zxx">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius felis at felis mattis tempus. Proin vitae lectus vel felis aliquet tristique in eu lectus. Nulla nulla dolor, rhoncus eu semper ac, dignissim auctor quam. Suspendisse dictum lorem libero, a auctor odio placerat ac. Nulla nec velit ac nisl ornare elementum vel id ligula. Donec venenatis vel sapien a posuere. Ut ac sollicitudin dolor.</span></h6>
<p>This is a paragraph <code><p></code>. Text wrapping will happen if it does not fit into a single line. Text alignment is justified. | <span class="loremIpsum" lang="zxx">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius felis at felis mattis tempus. Proin vitae lectus vel felis aliquet tristique in eu lectus. Nulla nulla dolor, rhoncus eu semper ac, dignissim auctor quam. Suspendisse dictum lorem libero, a auctor odio placerat ac. Nulla nec velit ac nisl ornare elementum vel id ligula. Donec venenatis vel sapien a posuere. Ut ac sollicitudin dolor.</span></p>
<div class="sectionHead">
<h1><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements#text_content">Text content</a></h1>
</div>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/blockquote"><code><blockquote></code></a></h2>
</div>
<blockquote>This is a blockquote (<code><blockquote></code>).</blockquote>
<p>This is a paragraph <code><p></code>.</p>
<blockquote>
<p>This is a paragraph (<code><p></code>) inside a blockquote (<code><blockquote></code>). Its <code>margin</code> property has been set to 0 as the blockquote has its own padding.</p>
</blockquote>
<p>This is a paragraph (<code><p></code>).</p>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dl"><code><dl></code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dt"><code><dt></code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dd"><code><dd></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). The following is a definition list (<code><dl></code>).</p>
<dl>
<dt>This is text. (dl-1 > dt-1)</dt>
<dd>This is text. (dl-1 > dd-1)</dd>
<dd>This is text. (dl-1 > dd-2)</dd>
<dd>This is text. (dl-1 > dd-3)</dd>
<dt>This is text. (dl-1 > dt-2)</dt>
<dd>This is text. (dl-1 > dd-4)</dd>
<dd>This is text. (dl-1 > dd-5)</dd>
<dt>This is text. (dl-1 > dt-3)</dt>
<dd>This is text. (dl-1 > dd-6)</dd>
</dl>
<p>This is a paragraph <code><p></code>. The following definition list (<code><dl></code>) has paragraphs as child elements of definition terms (<code><dt></code>) and definition descriptions (<code><dd></code>). The paragraphs's <code>block</code> property has been set to 0 as the definition list child elements have their own margin.</p>
<dl>
<dt>
<p>This is text. (dl-2 > dt-1 > p-1)</p>
</dt>
<dd>
<p>This is text. (dl-2 > dd-1 > p-2)</p>
<p>This is text. (dl-2 > dd-1 > p-3)</p>
<p>This is text. (dl-2 > dd-1 > p-4)</p>
</dd>
<dt>
<p>This is text. (dl-2 > dt-2 > p-5)</p>
</dt>
<dd>
<p>This is text. (dl-2 > dd-2 > p-6)</p>
<p>This is text. (dl-2 > dd-2 > p-7)</p>
</dd>
<dt>
<p>This is text. (dl-2 > dt-3 > p-8)</p>
</dt>
<dd>
<p>This is text. (dl-2 > dd-3 > p-9)</p>
</dd>
</dl>
<p>This is a paragraph (<code><p></code>). The following definition list (<code><dl></code>) has multiple definition descriptions (<code><dd></code>) per definition term (<code><dt></code>). Each definition description contains multiple paragraphs. Although this is valid HTML, placing multiple paragraphs into definition descriptions is visually confusing when there are multiple definition descriptions for each definition term.</p>
<dl>
<dt>This is text. (dl-3 > dt-1)</dt>
<dd>
<p>This is text. (dl-3 > dd-1 > p-1)</p>
<p>This is text. (dl-3 > dd-1 > p-2)</p>
<p>This is text. (dl-3 > dd-1 > p-3)</p>
</dd>
<dd>
<p>This is text. (dl-3 > dd-2 > p-4)</p>
<p>This is text. (dl-3 > dd-2 > p-5)</p>
<p>This is text. (dl-3 > dd-2 > p-6)</p>
</dd>
<dd>
<p>This is text. (dl-3 > dd-3 > p-7)</p>
<p>This is text. (dl-3 > dd-3 > p-8)</p>
<p>This is text. (dl-3 > dd-3 > p-9)</p>
</dd>
<dt>This is text. (dl-3 > dt-2)</dt>
<dd>
<p>This is text. (dl-3 > dd-4 > p-10)</p>
<p>This is text. (dl-3 > dd-4 > p-11)</p>
<p>This is text. (dl-3 > dd-4 > p-12)</p>
</dd>
<dd>
<p>This is text. (dl-3 > dd-5 > p-13)</p>
<p>This is text. (dl-3 > dd-5 > p-14)</p>
<p>This is text. (dl-3 > dd-5 > p-15)</p>
</dd>
<dt>This is text. (dl-3 > dt-3)</dt>
<dd>
<p>This is text. (dl-3 > dd-6 > p-16)</p>
<p>This is text. (dl-3 > dd-6 > p-17)</p>
<p>This is text. (dl-3 > dd-6 > p-18)</p>
</dd>
</dl>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/hr"><code><hr></code></a></h2>
</div>
<hr>
<p>This is a paragraph (<code><p></code>) proceeded and succeeded by horizontal rules (<code><hr></code>).</p>
<hr>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/menu"><code><menu></code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/li"><code><li></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). The following is a menu (<code><menu></code>).</p>
<menu>
<li>This is text. (menu-1 > li-1)</li>
<li>This is text. (menu-1 > li-2)</li>
<li>This is text. (menu-1 > li-3)
<menu>
<li>This is text. (menu-1 > li-3 > menu-2 > li-4)</li>
<li>This is text. (menu-1 > li-3 > menu-2 > li-5)</li>
<li>This is text. (menu-1 > li-3 > menu-2 > li-6)
<menu>
<li>This is text. (menu-1 > li-3 > menu-2 > li-6 > menu-3 > li-7)</li>
<li>This is text. (menu-1 > li-3 > menu-2 > li-6 > menu-3 > li-8)</li>
<li>This is text. (menu-1 > li-3 > menu-2 > li-6 > menu-3 > li-9)</li>
</menu>
</li>
</menu>
</li>
</menu>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ol"><code><ol></code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/li"><code><li></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). The following is an ordered list (<code><ol></code>).</p>
<ol>
<li>This is text. (ol-1 > li-1)</li>
<li>This is text. (ol-1 > li-2)</li>
<li>This is text. (ol-1 > li-3)
<ol>
<li>This is text. (ol-1 > li-3 > ol-2 > li-4)</li>
<li>This is text. (ol-1 > li-3 > ol-2 > li-5)</li>
<li>This is text. (ol-1 > li-3 > ol-2 > li-6)
<ol>
<li>This is text. (ol-1 > li-3 > ol-2 > li-6 > ol-3 > li-7)</li>
<li>This is text. (ol-1 > li-3 > ol-2 > li-6 > ol-3 > li-8)</li>
<li>This is text. (ol-1 > li-3 > ol-2 > li-6 > ol-3 > li-9)</li>
</ol>
</li>
</ol>
</li>
</ol>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ul"><code><ul></code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/li"><code><li></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). The following is an unordered list (<code><ul></code>).</p>
<ul>
<li>This is text. (ul-1 > li-1)</li>
<li>This is text. (ul-1 > li-2)</li>
<li>This is text. (ul-1 > li-3)
<ul>
<li>This is text. (ul-1 > li-3 > ul-2 > li-4)</li>
<li>This is text. (ul-1 > li-3 > ul-2 > li-5)</li>
<li>This is text. (ul-1 > li-3 > ul-2 > li-6)
<ul>
<li>This is text. (ul-1 > li-3 > ul-2 > li-6 > ul-3 > li-7)</li>
<li>This is text. (ul-1 > li-3 > ul-2 > li-6 > ul-3 > li-8)</li>
<li>This is text. (ul-1 > li-3 > ul-2 > li-6 > ul-3 > li-9)</li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/p"><code><p></code></a></h2>
</div>
<p>This is a paragraph <code><p></code>. | <span class="loremIpsum" lang="zxx">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra laoreet mattis. Etiam aliquet purus sit amet lacus placerat posuere. Praesent maximus tincidunt porta. Aenean efficitur sollicitudin dui vel gravida. Donec vitae sem vel quam porta eleifend ut ac dui. Sed ipsum lectus, egestas ac ullamcorper eget, pharetra sit amet massa. Nam libero felis, maximus vel lacus ut, auctor vehicula dolor. Donec libero odio, interdum non enim et, ultricies blandit lacus. Morbi molestie dolor nisi, vel facilisis metus tristique a.</span></p>
<p>This is a paragraph <code><p></code>. | <span class="loremIpsum" lang="zxx">Ut et justo tempus, feugiat ligula at, pretium sapien. Etiam ac imperdiet ipsum. Donec eget ligula nisl. Cras tempor enim viverra libero accumsan aliquam. Nunc non nulla eu mi faucibus convallis eget ut enim. Sed elit est, euismod eu viverra quis, vestibulum eget nisi. Sed sollicitudin odio sem, vitae ultrices sem elementum sit amet. Nulla rhoncus quis odio vitae porta. Sed sit amet scelerisque ipsum, a mattis nunc. Proin sed volutpat nulla. Etiam sed faucibus mauris. Nulla ullamcorper nibh non orci bibendum ultrices ut eget tellus.</span></p>
<p>This is a paragraph <code><p></code>. | <span class="loremIpsum" lang="zxx">Curabitur nec congue velit. Nunc et velit ac lectus pretium pulvinar non at tortor. Suspendisse mauris lacus, hendrerit vel nisi id, malesuada volutpat metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras consequat, tortor sit amet dignissim sollicitudin, mi augue malesuada leo, sit amet dictum neque sem et neque. Donec mattis elementum tortor, eget hendrerit turpis pretium sed. Vivamus nisl urna, dictum non commodo eu, faucibus id libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis dictum dictum dapibus. Duis at magna vulputate, ornare neque nec, dignissim mi. Sed at mattis erat.</span></p>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/pre"><code><pre></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). The following is preformatted text <code><pre></code>.</p>
<pre>This is preformatted text <code><pre></code>.</pre>
<p>This is a paragraph (<code><p></code>). The following is code <code><code></code> inside preformatted text <code><pre></code>:</p>
<pre><code><!doctype html>
<html>
<head>/head>
<body></body>
</html></code></pre>
<div class="sectionHead">
<h1><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements#inline_text_semantics">Inline text semantics</a></h1>
</div>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a"><code><a href="…"></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). This is an anchor (<code><a></code>): <a href="">anchor</a>. The <code>href</code> attribute is empty in this case so it is not a hyperlink. An anchor is not visually distinct from other text if the attribute is not present.</p>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/abbr"><code><abbr title="…"></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). This is an abbreviation (<code><abbr></code>): <abbr title="abbreviation">abbr</abbr>. The <code>title</code> attribute is used to explain the abbreviation.</p>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/b"><code><b></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). This is bold text (<code><b></code>): <b>bold text</b></p>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/cite"><code><cite></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). This is a citation (<code><cite></code>): <cite>citation</cite>. By user agent default, it is italicised. Citation styling should be up to the relevant style guide (e.g. APA, CMOS, MLA).</p>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/code"><code><code></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). This is a code section (<code>): <code>code section</code></p>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/data"><code><data value="…"></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). This is data (<code><data></code>): <data value="value">data</data></p>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dfn"><code><dfn></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). This is a term to be defined (<code><dfn></code>): <dfn>term to be defined</dfn></p>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/em"><code><em></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). This is emphasised text (<code><em></code>): <em>emphasised text</em></p>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/i"><code><i></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). This is italicised text (<code><i></code>): <i>italicised text</i></p>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/kbd"><code><kbd></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). This is keyboard input (<code><kbd></code>): <kbd>rm --force --recursive /</kbd></p>
<p>This is a paragraph (<code><p></code>). These are keystrokes (<code><kbd kbd></code>): <kbd><kbd>Ctrl</kbd></kbd> + <kbd><kbd>Alt</kbd></kbd> + <kbd><kbd>Delete</kbd></kbd></p>
<p>This is a paragraph (<code><p></code>). These are onscreen input options (<code><kbd samp></code>): <kbd><samp>File</samp></kbd> → <kbd><samp>Save</samp></kbd></p>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/mark"><code><mark></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). This is marked text (<code><marked></code>): <mark>marked text</mark></p>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/q"><code><q></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). This is a quotation (<code><q></code>): <q>quotation</q>. By user agent default, quotation marks are added around quotations. Behaviour is inconsistent across user agents; Chromium defaults to English quotation marks while Firefox relies on the lang attribute to choose quotation marks. Quotation marks should be present in HTML documents.</p>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/s"><code><s></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). This is strikethrough text (<code><s></code>): <s>strikethrough text</s></p>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/samp"><code><samp></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). This is sample (or quoted) output (<code><samp></code>): <samp>100 files found</samp></p>
<p>This is a paragraph (<code><p></code>). This is sample (or quoted) output including user input (echoed input) (<code><samp kbd></code>): <samp>root@host:~# <kbd>rm --force --recursive /</kbd></samp>. User, host and path are inside <code><samp></code> as well as the command which is additionally inside <code><kbd></code>.</p>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/small"><code><small></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). This is small text (<code><small></code>): <small>small text</small></p>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span"><code><span></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). This is a span (<code><span></code>): <span>span</span></p>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/strong"><code><strong></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). This is text of strong importance (<code><strong></code>): <strong>text of strong importance</strong></p>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/sub"><code><sub></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). This is subscript text (<code><sub></code>): <sub>subscript text</sub></p>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/sup"><code><sup></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). This is superscript text (<code><sup></code>): <sup>superscript text</sup></p>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time"><code><time datetime="…"></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). This is a date (<code><date></code>): <time datetime="2000-01-01">1 January 2000</time></p>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/u"><code><u></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). This is underlined text (<code><u></code>): <u>underlined text</u></p>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/var"><code><var></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). This is a variable (<code><var></code>): <var>variable</var></p>
<div class="sectionHead">
<h1><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements#image_and_multimedia">Image and multimedia</a></h1>
</div>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/var"><code><audio controls></code></a></h2>
</div>
<audio controls></audio>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/var"><code><img alt="…" src="…"></code></a></h2>
</div>
<img alt="This is an image, 100 x 200 pixels, with a black border." src="image-100x200-pixels-with-black-border.png">
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/var"><code><video controls></code></a></h2>
</div>
<video controls></video>
<div class="sectionHead">
<h1><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements#embedded_content">Embedded content</a></h1>
</div>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/var"><code><embed src="…"></code></a></h2>
</div>
<embed src="https://example.com">
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/var"><code><iframe src="…"></code></a></h2>
</div>
<iframe src="https://example.com"></iframe>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/var"><code><object data="…"></code></a></h2>
</div>
<object data="https://example.com"></object>
<div class="sectionHead">
<h1><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements#svg_and_mathml">SVG and MathML</a></h1>
</div>
<p>No styling examples.</p>
<div class="sectionHead">
<h1><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements#scripting">Scripting</a></h1>
</div>
<p>No styling examples.</p>
<div class="sectionHead">
<h1><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements#demarcating_edits">Demarcading edits</a></h1>
</div>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/del"><code><del></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). This is deleted text (<code><del></code>): <del>deleted text</del></p>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ins"><code><ins></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). This is inserted text (<code><ins></code>): <ins>inserted text</ins></p>
<div class="sectionHead">
<h1><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements#table_content">Table content</a></h1>
</div>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table"><code><table></code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/caption"><code><caption></code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/thead"><code><thead></code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tbody"><code><tbody></code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tfoot"><code><tfoot></code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tr"><code><tr></code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/th"><code><th></code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/td"><code><td></code></a></h2>
</div>
<table>
<caption>This is a caption (<code><caption></code>).</caption>
<thead>
<tr>
<th>This is a table header (<code><th></code>), inside a table row (<code><tr></code>), inside a table head (<code><thead></code>).</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is table data (<code><td></code>), inside a table row (<code><tr></code>), inside a table body (<code><tbody></code>).</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>This is table data (<code><td></code>), inside a table row (<code><tr></code>), inside a table footer (<code><tfoot></code>).</td>
</tr>
</tfoot>
</table>
<div class="sectionHead">
<h1><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements#forms">Forms</a></h1>
</div>
<nav>HTML forms (<a href="HTML-forms-(user-agent-default-styles).html" target="_self">user-agent default styles</a> • <a href="HTML-forms-(normalisation).html" target="_self">normalisation</a>)</nav>
<div class="sectionHead">
<h1><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements#interactive_elements">Interactive elements</a></h1>
</div>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog"><code><dialog></code></a></h2>
</div>
<dialog id="dialog">
<form method="dialog">
<div>Dialog</div>
<br>
<button>Close</button>
</form>
</dialog>
<button onclick="document.getElementById('dialog').show();">show()</button> <button onclick="document.getElementById('dialog').showModal();">showModal()</button>
<div class="sectionHead">
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/summary"><code><summary></code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details"><code><details></code></a></h2>
</div>
<p>This is a paragraph (<code><p></code>). The following details element (<code><details></code>) contains text inside itself.</p>
<details>
<summary>This is a summary (<code><summary></code>).</summary>
This is text.
</details>
<p>This is a paragraph (<code><p></code>). The following details element (<code><details></code>) contains a paragraph (<code><p></code>) inside itself.</p>
<details>
<summary>This is a summary (<code><summary></code>).</summary>
<p>This is a paragraph (<code><p></code>).</p>
</details>
<div class="sectionHead">
<h1><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements#web_components">Web Components</a></h1>
</div>
<p>No styling examples.</p>
</main>
</body>
</html>