+++ 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: ~~Deleted~~Inserted text. This is highlighted text. x_iⁿ is the ith element of x, raised to the nth power. Or I suppose x should be a variable, like x_iⁿ -- or is that x_iⁿ, because x_i is a variable? Or is the whole thing a variable, like x_iⁿ? Or is each individual element a variable, like x_iⁿ perhaps? Perhaps there are no wrong answers here... The volume of a box is l × w × h, where l represents the length, w the width and h the height of the box. HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) HTML is a markup language used to create the semantics and structure of a web page. A specification (spec) is a document that outlines in detail how a technology is intended to function. Press CTRL + ALT + Delete to open the menu. Press CTRL + ALT + Delete to open the menu. You may see sample output from a computer program telling you Please do not restart your computer...

When the process is complete, the utility will output the text Scan complete. Found N results. You can then proceed to the next step.

I am going to bring attention to this bit of idiomatic text using some archaic yet repurposed tags. This is an unarticulated annotation, to be used to markup anything that is annotated without further explanation, like a speling mistake. Homo sapiens is the scientific name for human beings. ~~This text is no longer relevant, but it is not being semantically deleted.~~ According to A Hitchhiker's Guide to the Galaxy, I have some data. The ultimate answer to life, the universe, and everything is fourty-two. This work was published on October 12, 1979. Are you ready for some ruby elements? 明日 (Ashita) is one word. 漢 (Kan) 字 (ji) is another word. A few more esoteric ones, like "small print", which is basically either legalese or an inline equivalent to `

` sectioning. 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. So yeah, buy now, buy early, buy today! I am not responsible for anything that happens after this point, and I am not your mother. You may
create a bunch of
line breaks,
but
the real magic is in creating word breaks. For example, the unbroken word pneumonoultramicroscopicsilicovolcanoconiosis can be broken up like pneumonoultramicroscopicsilicovolcanoconiosis. Depending on where pneumonoultramicroscopicsilicovolcanoconiosis occurs, you can break up the word pneumonoultramicroscopicsilicovolcanoconiosis in multiple different spots. You can break up the word pneumonoultramicroscopicsilicovolcanoconiosis after the "pneumono", or you can break up the word pneumonoultramicroscopicsilicovolcanoconiosis after the "ultra", or you can break up the word pneumonoultramicroscopicsilicovolcanoconiosis after the "microscopic", or you can break up the word pneumonoultramicroscopicsilicovolcanoconiosis after the "silico", or you can break up the word pneumonoultramicroscopicsilicovolcanoconiosis after the "volcano". How's sesquipedalianism? Compare to sesquipedalianism ### are we math yet?

The infinite sum $\sum_{n = 1}^{+ ∞} \frac{1}{n^{2}}$ is equal to the real number $\frac{π^{2}}{6}$ .

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

x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}

### Preformatted text block Sample code function:


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);
}

Sample terminal output:

a@trwnh.com:~$ md5 -s "Hello world"
MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62

a@trwnh.com:~$ █

### hr separator ---

### Blockquotes

This is a blockquote without any block elements inside it.

This is an uncited block quote.

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.

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.

### Figures

A figure that is captioned

Get browser details using navigator.

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);
}

Edsger Dijkstra:

If debugging is the process of removing software bugs, then programming must be the process of putting them in.

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.

Venus and Adonis, by William Shakespeare

Listen to the T-Rex:

### 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" | | `` | `` | "Bob" | | `` | `` | `` | | This | is | a | super | wide | table | that | will | certainly | stretch | outside | the | boundaries | of | the | content | | - | - | - | - | - | - | - | - | - | - | - | - | - | - | - | - | | - | - | - | - | - | - | - | - | - | - | - | - | - | - | - | - |

Superheros and sidekicks
	Batman	Robin	The Flash	Kid Flash
Skill	Smarts, strong	Dex, acrobat	Super speed	Super speed

Personal weekly activities
Mon	Tue	Wed	Thu	Fri	Sat	Sun
Clean room	Football training	Dance Course	History Class	Buy drinks	Study hour	Free time
Yoga	Chess Club	Meet friends	Gymnastics	Birthday party	Fishing trip	Free time

### 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

A list item with a paragraph inside it.
A figure that is captioned

menu is ul but semantically for buttons? interactive items?

### Definition list Term : Definition Term 2 : Definition 2 New term : Definition 1 New term 2 : Definition 2 ### Image area maps MDN infographic

### Audio and video and picture

## 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.