Roots

The document root (html) and sectioning root (body) have their margins and paddings reset to 0 on all sides by the Meyer reset. Beyond that, the sectioning root is configured with useful background and foreground colors, font family and size, and a word wrap setting.

Content sectioning

There are a handful of content sectioning elements. Most of these aren't very interesting to look at; they're more meaningful under the hood.

address

The address element marks up contact information, such as for an article's author.

<address>
	Kate of the Southern Isles<br/>
	<a href="mailto:kate@contoso.com">kate@contoso.com</a><br>
	<a href="tel:+19118675309">(911) 867-5309</a>
</address>

article

An article is a chunk of information that can stand alone and be moved from one document to another without loss of context. It is possible to have several articles in the same page. Each of these pages contains a single article; for examples of article styling, look no further than anywhere on this site.

aside

An aside is a portion of content that is related to its parent, but does not fit into the flow of its surrounding content.

<aside>
	<p>
	The <code>hgroup</code> element was removed from the W3C HTML5 spec, but remains in the WHATWG HTML spec.
	Moreover, no browsers implement its semantics, so it's pretty much useless.
	(Source: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup#Usage_notes">MDN</a>)
	</p>
</aside>

section, header, and footer

There's not much to look at here. Notice that the section is indented slightly from the surrounding content. The header and footer tags are more for semantics than for display, so they don't really show up. Styling a footer is also very context-dependent, and footers can show up in all sorts of places, so it makes more sense to write styles for them as their use cases are discovered.

<section>
	<header><h4>A sample section</h4></header>
	<p>According to all known laws of aviation, there is no way a bee should be able to fly. Its wings
	are too small to get its fat little body off the ground. The bee, of course, flies anyway because
	bees don't care what humans think is impossible.</p>
	<footer>&copy; 2020 Seinfeld probably. What a guy.</footer>
</section>

Headings

These headings are grouped by an hgroup; they are slightly closer together but retain the same padding at the top and bottom of the group as if they were separate. Perhaps hgroup shouldn't affect styling at all, since it's kinda worthless. Fake element.

<hgroup>
	<h1 id="h1"><code>&lt;h1&gt;</code> &ndash; Heading level 1</h1>
	<h2 id="h2"><code>&lt;h2&gt;</code> &ndash; Heading level 2</h2>
	<h3 id="h3"><code>&lt;h3&gt;</code> &ndash; Heading level 3</h3>
	<h4 id="h4"><code>&lt;h4&gt;</code> &ndash; Heading level 4</h4>
	<h5 id="h5"><code>&lt;h5&gt;</code> &ndash; Heading level 5</h5>
	<h6 id="h6"><code>&lt;h6&gt;</code> &ndash; Heading level 6</h6>
</hgroup>

main and nav

This large area is a main tag. The bars at the top and right, or the menu on mobile, are nav tags. The navigational area at the top of the page contains site-wide links. The navigational area to the right (sidebar or menu) contains intra-page links for navigating within the current document (specifically, within the current article). Please appreciate them.

Text content

Text content elements are particularly important for accessibility and SEO.

Paragraph: p

All the "regular text" you see on this page is wrapped in p tags. It is what it is.

blockquote

A block quote is used to quote a longer passage, where an inline quote would be inappropriate.

<blockquote cite="https://www.imdb.com/title/tt1245907/characters/nm0825998">
	<p>You've got a 33.3% chance of winning. But I, I've got a 66 and two third chance of winning, cause Kurt Angle KNOWS he can't beat me, and he's not even gonna try. So Samoa Joe, you take your 33 and a third chance, minus my 25% chance, and you've got an eight and a third chance of winning, at Sacrifice. But then you take my 75 per chance chance of winning, if we was to go one on one, and then add 66 and two thirds... per cents, I got a 141 and two thirds chance of winning, at Sacrifice. The numbers don't lie, and they spell disaster for you!</p>
</blockquote>

You've got a 33.3% chance of winning. But I, I've got a 66 and two third chance of winning, cause Kurt Angle KNOWS he can't beat me, and he's not even gonna try. So Samoa Joe, you take your 33 and a third chance, minus my 25% chance, and you've got an eight and a third chance of winning, at Sacrifice. But then you take my 75 per chance chance of winning, if we was to go one on one, and then add 66 and two thirds... per cents, I got a 141 and two thirds chance of winning, at Sacrifice. The numbers don't lie, and they spell disaster for you!

div

The div element is a generic container without any semantic value. As such, it probably should not have any default styling. I'm tempted, though, to add some weird little buggy behavior to discourage divitis.

<div><p>🦀 divs are cancelled 🦀</p></div>

Figures: figure and figcaption

A figure consists of some sort of illustration, diagram, or other chomk of information that doesn't make sense as inline text, along with an optional caption. The caption may come before or after the other contents of the figure, but not between (if a figure has multiple items).

<figure>
	<figcaption>The Linux project almost had a fox as its mascot.</figcaption>
	<img src="images/almost-linux.png" alt="Linux fox" class="max-width-20rem"/>
</figure>

Horizontal rule: hr

A horizontal rule indicates a shift in topic.

<hr/>

Preformatted text: pre

A block of preformatted text is used in situations where it it important to reproduce text exactly as it appears somewhere else, complete with indentation and spacing. It is commonly used to mark up blocks of code, although semantically the code tag should be used as well.

                   -`                    jtreed@jtreed-tpad-manjaro 
                  .o+`                   -------------------------- 
                 `ooo/                   OS: Manjaro Linux x86_64 
                `+oooo:                  Host: 20QUS0PW00 ThinkPad P1 Gen 2 
               `+oooooo:                 Kernel: 5.9.11-2-MANJARO 
               -+oooooo+:                Uptime: 12 hours, 38 mins 
             `/:-:++oooo+:               Packages: 1321 (pacman) 
            `/++++/+++++++:              Shell: fish 3.1.2 
           `/++++++++++++++:             Resolution: 1920x1080 
          `/+++ooooooooooooo/`           WM: i3 
         ./ooosssso++osssssso+`          Theme: Adwaita [GTK2/3] 
        .oossssso-````/ossssss+`         Icons: Windows10 [GTK2/3] 
       -osssssso.      :ssssssso.        Terminal: kitty 
      :osssssss/        osssso+++.       Terminal Font: Comic Shanns 16.0 
     /ossssssss/        +ssssooo/-       CPU: Intel i9-9880H (16) @ 4.800GHz 
   `/ossssso+/:-        -:/+osssso+-     GPU: Intel UHD Graphics 630 
  `+sso+:-`                 `.-/+oso:    GPU: NVIDIA Quadro T2000 Mobile / Max-Q 
 `++:.                           `-/+/   Memory: 3143MiB / 31724MiB 
 .`                                 `/

Ordered and unordered lists: ol, ul, and li

Ordered and unordered lists are just that—lists. An unordered list may be reordered without affecting its meaning; an ordered list may not. Lists may be nested.

<ol>
	<li>First</li>
	<li>Second</li>
	<li>Third
		<ol>
			<li>Third-first</li>
			<li>Third-second</li>
		</ol>
	</li>
</ol>
<ul>
	<li>An item</li>
	<li>An item</li>
	<li>An item
		<ul>
			<li>A sub-item
				<ol>
					<li>This</li>
					<li>item</li>
					<li>has</li>
					<li>steps</li>
				</ol>
			</li>
			<li>A sub-item</li>
		</ul>
	</li>
</ul>

1. First
2. Second
3. Third
   1. Third-first
   2. Third-second

• An item
• An item
• An item
  • A sub-item
    1. This
    2. item
    3. has
    4. steps
  • A sub-item

Description list: dl, dt, and dd

A description list is a collection of key-value pairs, where the keys are terms and the values are descriptions or definitions. I dunno how I've never heard of these tags before this project. They make so much sense!

<dl>
	<dt>Amiga</dt>
	<dd>A series of personal computer models originally sold by Commodore,
		based on 680x0 processors, custom support chips and an operating system
		that combined some of the best features of Macintosh and Unix with
		compatibility with neither. (from the
		<cite><a href="http://catb.org/jargon/html/A/Amiga.html">Jargon File</a></cite>)
	</dd>
	<dt>toaster</dt>
	<dd>The archetypal really stupid application for an embedded microprocessor
		controller; often used in comments that imply that a scheme is
		inappropriate technology. (from the
		<cite><a href="http://catb.org/jargon/html/T/toaster.html">Jargon File</a></cite>)
	</dd>
	<dt>TOPS-10</dt>
	<dd>DEC's proprietary OS for the fabled PDP-10 machines, long a favorite of
		hackers but now long extinct. (from the
		<cite><a href="http://catb.org/jargon/html/T/TOPS-10.html">Jargon File</a></cite>)
	</dd>
</dl>

Amiga

A series of personal computer models originally sold by Commodore, based on 680x0 processors, custom support chips and an operating system that combined some of the best features of Macintosh and Unix with compatibility with neither. (from the Jargon File)

toaster

The archetypal really stupid application for an embedded microprocessor controller; often used in comments that imply that a scheme is inappropriate technology. (from the Jargon File)

TOPS-10

DEC's proprietary OS for the fabled PDP-10 machines, long a favorite of hackers but now long extinct. (from the Jargon File)

Inline text

These tags are used to clarify or define the meaning, structure, or style of a portion of inline text content.

Anchor: a

Anchor tags, more commonly known as "hyperlinks" or simply "links", are widely used. Bonkstrap styles them using a semi-bold font weight and the accent color. External links are identified by CSS as having an href attribute beginning with http or some other URI protocol schemes, which isn't the most technically correct assumption, but it works enough™. Anyways, these anchors that are identified as "external" are marked with an icon.

<ul>
	<li><a href="index.html">Bonkstrap home page</a></li>
	<li><a href="https://teaandkittens.co.uk/">An external link</a></li>
</ul>

• Bonkstrap home page
• An external link

Abbreviation: abbr

The abbreviation tag is used to mark up an abbreviation. The definition corresponding to the abbreviated term can either be present in surrounding in-line text, or may be added to the element's title attribute, or both. This tag may also be used together with the definition tag.

<ul>
	<li>
		<abbr>XML</abbr> is short for Extensible Markup Language.
	</li>
	<li>
		<abbr title="Hypertext Transfer Protocol">HTTP</abbr> is a
		common protocol for information exchange on the World Wide Web.
	</li>
	<li>XMLHttpRequest, or <abbr title="XMLHttpRequest">XHR</abbr>, is
		a type of object found in JavaScript web programming.
	</li>
</ul>

• XML is short for Extensible Markup Language.
• HTTP is a common protocol for information exchange on the World Wide Web.
• XMLHttpRequest, or XHR, is a type of object found in JavaScript web programming.

Bring attention to: b

The "bring attention to" element is the attention-getter of last resort:

• If the text bears special importance, use strong.
• If the text would be read with emphasized stress, use em.
• If the text should be noted as having particular relevance, use mark.

See also MDN's usage notes on strong for a more detailed explanation of the uses of these tags.

<p>This document demonstrates <b>styles</b> defined by the Bonkstrap framework.<p>

This document demonstrates styles defined by the Bonkstrap framework.

Citation: cite

A citation element is used to mark up a reference to another work. The element must contain the title of the work. The W3C spec says that it may also contain the author, but the WHATWG spec says it must never do this. I'd avoid it just to be safe, I guess. Citations may appear in a variety of places. To cite content in a blockquote or q tag using a URL, use the cite attribute on those elements. MDN's example doesn't do this, so, uh, I dunno what to say about that.

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite">
	<p>
	The HTML Citation element (<code>&lt;cite&gt;</code>) is used to describe a
	reference to a cited creative work, and must include the title of that work.
	The reference may be in an abbreviated form according to context-appropriate
	conventions related to citation metadata.
	</p>
	<footer>
		Description of
		<cite>
			<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite">
				The Citation element
			</a>
		</cite> from MDN.
	</footer>
</blockquote>

The HTML Citation element (<cite>) is used to describe a reference to a cited creative work, and must include the title of that work. The reference may be in an abbreviated form according to context-appropriate conventions related to citation metadata.

Code: code

The code tag is used to mark up, you guessed it, computer code. By itself, this element is used for short snippets of inline code. It may be nested inside a pre tag to mark up a block of code. "code" and "pre" in this paragraph are marked up with the code tag. Below is an example of a code block, from Joe Reed's express-template repository. Code blocks are styled with a tab width of 2, meaning that tab characters in the source code will translate to the same width as two spaces.

const apply = (app, component) => {
	component.routes.forEach((route) => {
		if(route.method.constructor.name == 'String') route.method = [route.method];
		route.method.forEach((method) => {
			if(route.handler.constructor.name == 'Function') route.handler = [route.handler];
			if(route.method == 'use') {
				route.handler.forEach((func) => {
					app.use(func);
					if(component.logger) component.logger.info(`Adding middleware: ${func.name}`);
				});
			} else {
				app[method](route.uri, ...route.handler);
				if(component.logger) component.logger.info(`Adding route: ${method.toLocaleUpperCase()} ${route.uri}`);
			}
		});
	});
};


module.exports = { apply };

Definition: dfn

The dfn tag is used to indicate a term being defined. The nearest ancestor that is one of p, dt/dd, or section is considered to be the definition of the term.

The <code><dfn>dfn</dfn></code> tag is used to indicate a term being defined.
The nearest ancestor that is one of <code>p</code>,
<code>dt</code>/<code>dd</code>, or <code>section</code> is considered to be
the definition of the term.

Emphasis: em

The em tag should be used for text that would be pronounced aloud with emphasized stress. For a comparison of similar tags, see the Bring attention to element.

<p>Ugh, fine. I guess you <em>are</em> my little pogchamp. Come here.</p>

Ugh, fine. I guess you are my little pogchamp. Come here.

Idiomatic text: i

The i tag should be used to offset text that is different somehow. That's really vague, so have some examples to clarify the specific meaning:

<ul>
	<li>
		<i>It's a little late for my family to abandon me in a restaurant</i>,
		she thought.</li>
	<li>The <i>Axiom</i> had been at sea for seven hundred years around the time
		WALL-E arrived.</li>
	<li>"<i>Alohamora</i>," Hermione muttered as Mr. Weasely fumbled with his
		Muggle keyring.</li>
</ul>

• It's a little late for my family to abandon me in a restaurant, she thought.
• The Axiom had been at sea for seven hundred years around the time WALL-E arrived.
• "Alohamora," Hermione muttered as Mr. Weasely fumbled with his Muggle keyring.

For a comparison of similar tags, see the Bring attention to element. i should not be used simply to italicize or apply other styling to its contents; doing so makes you a horrible person and you deserve to rot in some forgotten three-pixel cell of an HTML4 layout table. It is true that i was originally a stylistic tag, intended for italicization. However, this is no longer the case. Get with the times.

Keyboard input: kbd

Okay, so, uh, this one is weird. Definitely check out MDN for examples if you think this might be appropriate in your content. I've done some very basic styling, because even I can't be bothered to read and grok all that. Not in the mood tonight.

<p>To exit vim, use <kbd><Esc>:wq</kbd>.</p>

To exit vim, use <Esc>:wq.

Mark: mark

Think of mark as a highlighter (but not in a stylish way!). Use it to mark up text that has particular relevance to the surrounding content, as you would if you were highlighting notes while styding for an exam. For a comparison of similar tags, see the Bring attention to element.

Think of <code>mark</code> as a highlighter (but not in a stylish way!). Use it
to mark up text that has <mark>particular relevance</mark> to the surrounding
content, as you would if you were highlighting notes while styding for an exam.

Quote: q

The inline quote element indicates that the enclosed text is a short inline quotation, according to MDN's Inline Quotation element reference. Bonkstrap adds quotation marks around the content, which is a common practice.

<p>
The inline quote element
<q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"
>indicates that the enclosed text is a short inline quotation</q>,
according to MDN's <cite>
	<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
		Inline Quotation element
	</a>
</cite> reference. Bonkstrap adds quotation marks around the content,
which is a common practice.
</p>

Ruby: ruby, rt, rp, and rtc

Ruby is a system for annotating East Asian characters to aid in pronunciation and sometimes interpretation. The reset seems not to have screwed with the defaults for these, which is fortunate because it looks like a small nightmare. Thank goodness.

<p>
<ruby>
	漢 <rp>(</rp><rt>kan</rt><rp>)</rp>
	字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
</p>
<p>
<ruby xml:lang="zh-Hant" style="ruby-position: under;">
	<rbc>
	<rb>馬</rb><rp>(</rp><rt>mǎ</rt><rp>)</rp>
	<rb>來</rb><rp>(</rp><rt>lái</rt><rp>)</rp>
	<rb>西</rb><rp>(</rp><rt>xī</rt><rp>)</rp>
	<rb>亞</rb><rp>(</rp><rt>yà</rt><rp>)</rp>
	</rbc>
	<rtc xml:lang="en" style="ruby-position: over;">
	<rp>(</rp><rt>Malaysia</rt><rp>)</rp>
	</rtc>
</ruby>
</p>

漢 (kan) 字 (ji)

馬(mǎ) 來(lái) 西(xī) 亞(yà) (Malaysia)

Strikethrough: s

The strikethrough element is used to indicate text that is no longer relevant or correct. This is not to be confused with the role of the deletion tag, which is used to mark up edits to a document.

<q><s>we're setting pumpkins on fire in the courtyard tonight</s>
	just kidding um we're not going to do that</q>

we're setting pumpkins on fire in the courtyard tonight just kidding um we're not going to do that

Insertion and deletion: ins and del

It may be useful to mark up changes to a document, in the form of insertions and deletions. A common example of this is a diff between two versions of a file.

<pre><code><del>foo</del>
<ins>bar</ins></code></pre>

foo
bar

Sample output: samp

The samp tag is used to mark up output from a computer program. It may be combined in various ways with kbd.

<p>A typical sudo prompt looks something like
<samp>[sudo] password for jtreed:</samp>.</p>

A typical sudo prompt looks something like [sudo] password for jtreed:.

Side comment: small

Think of small as a "fine print" tag. It's not to be used just to change font size; it's meant for things like copyright notices or legal text. This message was paid for by Eazy-E for President.

Think of <code>small</code> as a "fine print" tag. It's not to be used just to
change font size; it's meant for things like copyright notices or legal text.
<small>
	This message was paid for by Eazy-E for President.
</small>

Span: span

Span ain't nothin' but a thing.

<p>
<span>Span ain't nothin' but a thing.</span>
</p>

Strong importance: strong

The strong tag should be used for text that bears particular importance, such as a warning. For a comparison of similar tags, see the Bring attention to element. Do not use this tag simply for styling.

<p>
The <code>strong</code> tag should be used for text that bears particular
importance, such as a warning. For a comparison of similar tags, see the
<a href="#Bring_attention_to">Bring attention to</a> element.
<strong>Do not use this tag simply for styling.</strong>
</p>

Subscript and superscript: sub and sup

The subscript and superscript tags mark up text that should be subscripted or superscripted solely for reasons of compliance with typographical conventions. For example, it is appropriate to use sub when writing H₂O, and sup for writing a² + b² = c², but neither when writing LATEX.

<p>
The subscript and superscript tags mark up text that should be subscripted or
superscripted solely for reasons of compliance with typographical conventions.
For example, it is appropriate to use <code>sub</code> when writing
H<sub>2</sub>O, and <code>sup</code> for writing
<var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup>,
but neither when writing
L<span style="vertical-align: text-bottom;">A</span>T<span style="vertical-align: text-top;">E</span>X.
</p>

Unarticulated annotation: u

u used to stand for "underline", and as such was deprecated in HTML4. However, for some reason, it's back in HTML5 with a shiny new semantic meaning: unarticulated annotation. For the life of me, I can't figure out what that really means. MDN's best example seems to be marking up spelling errors. I guess we'll just give it a regular kind of style and call it a day?

<p>
<code>u</code> used to stand for "underline", and as such was deprecated in
HTML4. However, for some reason, it's back in HTML5 with a shiny new semantic
meaning: unarticulated annotation. For the life of me, I can't figure out what
that really means.
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u">
	MDN's best example
</a> seems to be marking up spelling errors. I guess <u>we'l</u>l
ju<u>st give </u>it a re<u>gul</u>ar kind of <u>style and</u> call it a
<u>day?</u>
</p>

Variable: var

The variable tag marks up variables in math or computer code. Bonkstrap italicizes variables by default, but a few additional built-in classes may be used to alter their behavior:

<ul>
	<li><code>var</code>: <var>x</var>, <var>y</var></li>
	<li><code>var.const</code>:
		<var class="const">a</var>, <var class="const">π</var></li>
	<li><code>var.vector</code>:
		<var class="vector">u</var>, <var class="vector">v</var></li>
	<li><code>var.matrix</code>:
		<var class="matrix">A</var>, <var class="matrix">B</var></li>
	<li><code>var.tensor</code>:
		<var class="tensor">p</var>, <var class="tensor">q</var>
		(tensors will be sans-serif everywhere)</li>
</ul>

• var: x, y
• var.const: a, π
• var.vector: u, v
• var.matrix: A, B
• var.tensor: p, q (tensors will be sans-serif everywhere)

These styles are derived largely from a 2004 post to comp.text.tex.

Tables

These tables are yoinked straight from MDN's reference on HTML tables, including the bizarre green, which was a demo for colgroups. (I added some extra rows to demo the alternating colors.) Bonkstrap doesn't style tables very heavily, and there's a reason for that. If you want a quick and simple table, you can slap your markup into the page and off you go. If you want a complex table, you're going to need to style it yourself anyways, so it's more helpful to have fewer style rules preset that you'll have to track down and override. You're welcome.

Simple table with header

Table with thead, tfoot, and tbody

Table with colgroup

Table with colgroup and col

Simple table with caption

Forms

Bonkstrap recognizes that every form is different. Form elements are styled so that they aren't horribly ugly if you just need a quick one-and-done, but you can also disable these styles (remove the easy class from the form element) if you wish to craft a tidier form yourself. The default styles look better in a narrower context than most full screens; try wrapping the form in a smaller column. Code samples for forms have not been provided; please just inspect the page like a normal web designer.

Interactive elements

Twisty bois! details and summary

The details element contains a summary element (the latter holding the content "Details" in the example below), and some other flow content thereafter. Clicking on the summary toggles the expansion of the rest of the content. It's pretty cool! Had no idea this was built into HTML.

Conclusion

I hope you have enjoyed this catalogue of my decline into madness. We'll see you next time in "Custom Web Part II: This Feels Scripted"!