trwnh.com/unified.test.hugo/content/meta/elements-sample.md

+++
title = "Sample of HTML elements"
summary = "Use this page to test out CSS styling."
toc = true
+++

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

## Inline elements

![](https://plus.unsplash.com/premium_photo-1729704233180-96d843bba002?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

This is *emphasized*, and this is **strong**. This is both ***emphasized and strong***.

Goldmark extras: ~~del~~ ++ins++ ==mark== Some~sub~ Some^super^ ==x~i~^n^==

And again with HTML: <del>Deleted</del><ins>Inserted</ins> text. This is <mark>highlighted</mark> text. x<sub>i</sub><sup>n</sup> is the ith element of x, raised to the nth power. Or I suppose <var>x</var> should be a variable, like <var>x</var><sub>i</sub><sup>n</sup> -- or is that <var>x<sub>i</sub></var><sup>n</sup>, because <var>x<sub>i</sub></var> is a variable? Or is the whole thing a variable, like <var>x<sub>i</sub><sup>n</sup></var>? Or is each individual element a variable, like <var>x</var><sub><var>i</var></sub><sup><var>n</var></sup> perhaps? Perhaps there are no wrong answers here...

The volume of a box is <var>l</var> × <var>w</var> × <var>h</var>, where <var>l</var> represents the length, <var>w</var> the width and <var>h</var> the height of the box.

<abbr title="HyperText Markup Language">HTML</abbr> (HyperText Markup Language) and <abbr>CSS</abbr> (Cascading Style Sheets)

<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> is a markup language used to create the semantics and structure of a web page.

A <dfn>specification</dfn> (<abbr>spec</abbr>) is a document that outlines in detail how a technology is intended to function.

Press <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd> to open the menu.

Press <kbd><kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd></kbd> to open the menu.

You may see sample output from a computer program telling you <samp>Please do not restart your computer...</samp>

<p>
  When the process is complete, the utility will output the text
  <samp>Scan complete. Found <em>N</em> results.</samp> You can then proceed to
  the next step.
</p>

I am going to <b>bring attention to</b> this bit of <i>idiomatic text</i> using some archaic yet repurposed tags. This is an <u>unarticulated annotation</u>, to be used to markup anything that is annotated without further explanation, like a <u title="spelling">speling</u> mistake.

<i>Homo sapiens</i> is the scientific name for human beings. <s>This text is no longer relevant, but it is not being semantically deleted.</s>

According to <cite>A Hitchhiker's Guide to the Galaxy</cite>, I have some data. <q>The ultimate answer to life, the universe, and everything is <data value=42>fourty-two</data>.</q> This work was published on <time datetime="1979-10-12">October 12, 1979</time>.

Are you ready for some ruby elements? <ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby> is one word. <ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby> is another word.

A few more esoteric ones, like "small print", which is basically either legalese or an inline equivalent to `<aside>` sectioning. <small>WARNING: The following is a fan-based parody of a fan-based parody. All properties are properties of their owner. Please support my official release from prison.</small> So yeah, buy now, buy early, buy today! <small>I am not responsible for anything that happens after this point, and I am not your mother.</small>

You may<br />
create a bunch of<br />
line breaks,<br />
but<br />
the real magic is in creating word breaks. For example, the unbroken word <dfn>pneumonoultramicroscopicsilicovolcanoconiosis</dfn> can be broken up like pneumono<wbr />ultra<wbr />microscopic<wbr />silico<wbr />volcano<wbr />coniosis. Depending on where pneumono<wbr />ultra<wbr />microscopic<wbr />silico<wbr />volcano<wbr />coniosis occurs, you can break up the word pneumono<wbr />ultra<wbr />microscopic<wbr />silico<wbr />volcano<wbr />coniosis in multiple different spots. You can break up the word pneumono<wbr />ultra<wbr />microscopic<wbr />silico<wbr />volcano<wbr />coniosis after the "pneumono", or you can break up the word pneumono<wbr />ultra<wbr />microscopic<wbr />silico<wbr />volcano<wbr />coniosis after the "ultra", or you can break up the word pneumono<wbr />ultra<wbr />microscopic<wbr />silico<wbr />volcano<wbr />coniosis after the "microscopic", or you can break up the word pneumono<wbr />ultra<wbr />microscopic<wbr />silico<wbr />volcano<wbr />coniosis after the "silico", or you can break up the word pneumono<wbr />ultra<wbr />microscopic<wbr />silico<wbr />volcano<wbr />coniosis after the "volcano". How's <span id="test">ses&shy;qui&shy;pe&shy;dal&shy;ian&shy;ism</span>? Compare to <span id="test2">ses<wbr />qui<wbr />pe<wbr />dal<wbr />ian<wbr />ism</span>

### are we math yet?

<p>
The infinite sum
<math style="math-style: normal">
<mrow>
<munderover>
<mo>∑</mo>
<mrow>
<mi>n</mi>
<mo>=</mo>
<mn>1</mn>
</mrow>
<mrow>
<mo>+</mo>
<mn>∞</mn>
</mrow>
</munderover>
<mfrac>
<mn>1</mn>
<msup>
<mi>n</mi>
<mn>2</mn>
</msup>
</mfrac>
</mrow>
</math>
is equal to the real number
<math style="math-style: normal">
<mfrac>
<msup>
<mi>π</mi>
<mn>2</mn>
</msup>
<mn>6</mn>
</mfrac>
</math>.
</p>

## Block elements

### holy shit it's block-level math

<math display="block">
<mrow>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mrow>
<mo>−</mo>
<mi>b</mi>
</mrow>
<mo>±</mo>
<msqrt>
<mrow>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>−</mo>
<mrow>
<mn>4</mn>
<mo>⁢</mo>
<mi>a</mi>
<mo>⁢</mo>
<mi>c</mi>
</mrow>
</mrow>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mo>⁢</mo>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>


### Preformatted text block

Sample code function:

<pre>
<code>
function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
  txt+= "Browser Name: " + navigator.appName + "; ";
  txt+= "Browser Version: " + navigator.appVersion  + "; ";
  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
  txt+= "Platform: " + navigator.platform  + "; ";
  txt+= "User-agent header: " + navigator.userAgent  + "; ";
  console.log("NavigatorExample", txt);
}
</code>
</pre>


Sample terminal output:

<pre>
<samp><span class="prompt">a@trwnh.com:~$</span> <kbd>md5 -s "Hello world"</kbd>
MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62

<span class="prompt">a@trwnh.com:~$</span> <span class="cursor">█</span></samp></pre>


### hr separator

---

<hr />

### Blockquotes

<blockquote>
This is a blockquote without any block elements inside it.
</blockquote>

<blockquote>
<p>This is an uncited block quote.</p>
</blockquote>

<blockquote cite="https://www.lipsum.com/">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
</blockquote>

### Figures

<figure>
<img src="https://plus.unsplash.com/premium_photo-1729704233180-96d843bba002?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</figure>

<figure>
<img src="https://plus.unsplash.com/premium_photo-1729704233180-96d843bba002?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<figcaption>A figure that is captioned</figcaption>
</figure>

<figure>
  <figcaption>Get browser details using <code>navigator</code>.</figcaption>
  <pre>
function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
  txt+= "Browser Name: " + navigator.appName + "; ";
  txt+= "Browser Version: " + navigator.appVersion  + "; ";
  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
  txt+= "Platform: " + navigator.platform  + "; ";
  txt+= "User-agent header: " + navigator.userAgent  + "; ";
  console.log("NavigatorExample", txt);
}
  </pre>
</figure>

<figure>
  <figcaption><b>Edsger Dijkstra:</b></figcaption>
  <blockquote>
    If debugging is the process of removing software bugs, then programming must
    be the process of putting them in.
  </blockquote>
</figure>

<figure>
  <p>
    Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the
    green, Or, like a nymph, with long dishevelled hair, Dance on the sands, and
    yet no footing seen: Love is a spirit all compact of fire, Not gross to
    sink, but light, and will aspire.
  </p>
  <figcaption><cite>Venus and Adonis</cite>, by William Shakespeare</figcaption>
</figure>

<figure>
  <figcaption>Listen to the T-Rex:</figcaption>
  <audio controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
  <p>This is fallback for browsers that don't support the audio tag. <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">Download</a></p>
  </audio>
</figure>

### Tables

TODO: probably more variety here...
- html tables.
- a table shortcode?
- tables with captions.
- colgroup and col to highlight column groups
- table styling? especially styling per-table

| Subject | Predicate | Object |
| - | - | - |
| `<alice>` | `<name>` | "Alice" |
| `<bob>` | `<name>` | "Bob" |
| `<alice>` | `<knows>` | `<bob>` |

| This | is | a | super | wide | table | that | will | certainly | stretch | outside | the | boundaries | of | the | content |
| - | - | - | - | - | - | - | - | - | - | - | - | - | - | - | - |
| - | - | - | - | - | - | - | - | - | - | - | - | - | - | - | - |

<table>
  <caption>
    Superheros and sidekicks
  </caption>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="2" class="flash" />
  </colgroup>
  <tr>
    <td></td>
    <th scope="col">Batman</th>
    <th scope="col">Robin</th>
    <th scope="col">The Flash</th>
    <th scope="col">Kid Flash</th>
  </tr>
  <tr>
    <th scope="row">Skill</th>
    <td>Smarts, strong</td>
    <td>Dex, acrobat</td>
    <td>Super speed</td>
    <td>Super speed</td>
  </tr>
<style>
.batman {
background-color: #272902;
}
.flash {
background-color: #331824;
}
</style>
</table>

<table>
  <caption>
    Personal weekly activities
  </caption>
  <colgroup span="5" class="weekdays"></colgroup>
  <colgroup span="2" class="weekend"></colgroup>
  <tr>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
    <th>Sat</th>
    <th>Sun</th>
  </tr>
  <tr>
    <td>Clean room</td>
    <td>Football training</td>
    <td>Dance Course</td>
    <td>History Class</td>
    <td>Buy drinks</td>
    <td>Study hour</td>
    <td>Free time</td>
  </tr>
  <tr>
    <td>Yoga</td>
    <td>Chess Club</td>
    <td>Meet friends</td>
    <td>Gymnastics</td>
    <td>Birthday party</td>
    <td>Fishing trip</td>
    <td>Free time</td>
  </tr>
<style>
.weekdays {
background-color: #2729f2;
}
.weekend {
background-color: #333384;
}
</style>
</table>

### Ordered list

1. First item
2. Second item
3. Third item
<!---->
1. First item
	1. Sub-item 1.1
	2. Sub-item 1.2
	3. Sub-item 1.3
2. Second item
3. Third item

### Unordered list

- List item
- Another item
- Yet another item
<!---->
- List item
	- Sub-item
		- Sub-sub-item
	- Another sub-item
		- Another sub-sub-item
			- Sub-sub-sub-item?
				- 4 levels deep
					- 5 deep
						- 6 deep
							- 7 deep
				- 4 deep again
					- 5 deep
- Another item
- Yet another item

<ul>
<li>
<p>A list item with a paragraph inside it.</p>
</li>
<li>
<img src="https://plus.unsplash.com/premium_photo-1729704233180-96d843bba002?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</li>
<li>
<figure>
<img src="https://plus.unsplash.com/premium_photo-1729704233180-96d843bba002?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<figcaption>A figure that is captioned</figcaption>
</figure>
</li>
</ul>

menu is ul but semantically for buttons? interactive items?

<menu>
<li><button>Do something</button></li>
<li><button>Do something else</button></li>
</menu>

### Definition list

Term
: Definition

Term 2
: Definition 2
<!---->
New term
: Definition 1

New term 2
: Definition 2

### Image area maps

<map name="infographic">
  <area
    shape="poly"
    coords="129,0,260,95,129,138"
    href="https://developer.mozilla.org/docs/Web/HTTP"
    target="_blank"
    alt="HTTP" />
  <area
    shape="poly"
    coords="260,96,209,249,130,138"
    href="https://developer.mozilla.org/docs/Web/HTML"
    target="_blank"
    alt="HTML" />
  <area
    shape="poly"
    coords="209,249,49,249,130,139"
    href="https://developer.mozilla.org/docs/Web/JavaScript"
    target="_blank"
    alt="JavaScript" />
  <area
    shape="poly"
    coords="48,249,0,96,129,138"
    href="https://developer.mozilla.org/docs/Web/API"
    target="_blank"
    alt="Web APIs" />
  <area
    shape="poly"
    coords="0,95,128,0,128,137"
    href="https://developer.mozilla.org/docs/Web/CSS"
    target="_blank"
    alt="CSS" />
</map>
<img usemap="#infographic" src="https://interactive-examples.mdn.mozilla.net/media/examples/mdn-info.png" alt="MDN infographic" width=260 height=249 />

### Audio and video and picture

<audio controls loop>
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mp3" />
<p>This is fallback for browsers that don't support the audio tag. <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">Download</a></p>
</audio>

<video crossorigin controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4">
  <track default kind="captions" label="Closed Captions" srclang="en" src="https://interactive-examples.mdn.mozilla.net/media/examples/friday.vtt" />
  Download the
  <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4">MP4</a>
  video, and
  <a href="https://interactive-examples.mdn.mozilla.net/media/examples/friday.vtt">subtitles</a>.
</video>

<picture>
  <source srcset="https://interactive-examples.mdn.mozilla.net/media/cc0-images/surfer-240-200.jpg" media="(orientation: portrait)" />
  <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/painted-hand-298-332.jpg" alt="" />
</picture>

<object type="application/pdf" data="https://interactive-examples.mdn.mozilla.net/media/examples/In-CC0.pdf" width="100%" height="800"></object>

<object type="image/avif" data="https://media.wafrn.net/1730151075339_e8cefd934f27a072176300c8391669d81fb9e171.avif">
this is a fallback
</object>

## Components

### Admonitions

>[!tip]
> This is a basic `tip`, `hint`, `note`, `info`.

>[!suggestion]
> This is a basic `recommended`, `recommendation`, `good`, `suggestion`, `suggested`, `success`.

>[!warning]
> This is a basic `warning`, `caution`, `alert`, `notice`.

>[!danger]
> This is a basic `danger`, `important`, `fail`, `failure`.

### Quote blocks

> Default quote with no extra attributes

> Quote with no author/card, but with a cite
{cite="https://example.com"}

> Quote with author as plain text
{author="Someone"}

> Quote with author as plain text, plus a cite
{author="Someone" cite="https://example.com"}

> Quote with author who is linked
{author="[Someone with a link](https://example.com)"}

> Quote with author who is linked, as well as a cite
{author="[Someone with a link](https://example.com)" cite="https://example.com"}

> Quote with h-card
{card="trwnh.com/a"}

> Quote with h-card and a cite
{card="trwnh.com/a" cite="https://example.com"}

>> This is a nested quote.
>
> This is some other text.

>> This is a nested quote.
> {card="trwnh.com/a"}
>
> This is some other text.
{card="trwnh.com/a"}

>> This is a nested quote.
> {cite="https://example.com"}
>
> This is some other text.
{cite="https://example.com"}

>> This is a nested quote.
> {card="trwnh.com/a" cite="https://example.com"}
>
> This is some other text.
{card="trwnh.com/a" cite="https://example.com"}

>> Something that was said...
> {card="trwnh.com/a" cite="https://example.com"}
>
> My first response.
>
>> Something else that was said...
> {card="trwnh.com/a" cite="https://example.com"}
>
> My second response.
{card="trwnh.com/a" cite="https://example.com"}

### Code blocks

```
# basic code block, no attributes

for thing in group:
	do_something()
```

```diff
# code block with lang=diff

for thing in group:
-	do_something()
+	do_something_else()
```

```py
# code block with lang=py

for thing in group:
	do_something()
```

```py{hl_lines=3}
# code block with lang=py and hl_lines=3

for thing in group:
	do_something()
```

```py{hl_lines=3,lineNos=false}
# code block with lang=py and hl_lines=3 and lineNos=false

for thing in group:
	do_something()
```

```py{hl_lines=3,anchorLineNos=true}
# code block with lang=py and hl_lines=3 and lineNos=false

for thing in group:
	do_something()
```

```py{hl_lines=3,anchorLineNos=true}
# code block with lang=py and hl_lines=3 and lineNos=false

for thing in group:
	do_something()
```

```py{hl_lines=3,anchorLineNos=true,lineNoStart=9998}
# code block starting at line 9998

for thing in group:
	do_something()
```

```py{hl_lines=3,lineNoStart=9998}
# code block starting at line 9998

for thing in group:
	do_something()
```

```py{hl_lines=3,lineNoStart=9998}
# code block starting at line 9998

for thing in group:
	do_something()
```

```py{hl_lines=3,lineNoStart=9998,title="A code block with a title"}
# code block with a title

for thing in group:
	do_something()
```

```py{hl_lines=3,lineNoStart=9998,caption="A code block with a caption"}
# code block with a caption

for thing in group:
	do_something()
```

```py{hl_lines=3,lineNoStart=9998,title="codeblock.py",caption="A code block with a caption"}
# code block with a title and a caption

for thing in group:
	do_something()
```

## Footnotes

I am going to add a footnote here[^1] where I will go off on a long tangent later.

[^1]: Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.