...instead of linking to the single-page version of the HTML standard (it loads really slowly).

Probably using a CSS class "rounded". Using the same radius as the rounded corners on preformatted text boxes and notes.

Might also apply to some other elements: videos? iframes?

These are broken currently.

I tried https://highlightjs.org/ but it messed up the vertical rhythm. Maybe https://prismjs.com/?

Perhaps these three different types of boxes should all have the same background color, padding, border.

Trying to show the nesting of <kbd>'s visually doesn't work very well: there isn't enough space so it ends up looking bad. I think it's going to work better if nested <kbd>'s just look the same as a sequence of non-nested <kbd>'s, allow the nesting to be for semantic purposes only (plus it also disallows line-wrapping within the <kbd>). Should give more space for <kbd>'s to have a bit more padding and border and/or a larger font.

Not black

This is broken currently.

Use italics (the same as <i> and <em>), since headings are already bold.

Just show an example of it embedding an example HTML page, not YouTube etc since they make sizing difficult.

Yellow against yellow is too low-constrast

Each theme should support both light and dark mode (#8).

This makes using Oatcake as a base style easier.

...and add a link to https://modernfontstacks.com/ where I got it from.

I'm not sure there's much value in visually differentiating these.

Add basic styling to <input>, <textarea>, <select>, and other basic form elements. See also #18

So that the highlight doesn't overlap with the lines above and below in multi-line headings. The same as is done for <code> and <samp> in headings.

Need to make sure that the background colours of two <mark>'s on adjacent lines in a multi-line heading or lead paragraph don't overlap.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object

https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-object-element

According to an example in the HTML standard this can also be used to embed one HTML page in another.

Like Bootstrap's: https://getbootstrap.com/docs/5.3/components/tooltips/

It's hard to see where the contents of an expanded <details> element begin and end. These are easily improved with a background color and maybe some border and border radius. Or alternatively just a border, no background color. Background color is tough because <pre>'s and notes need to work inside <details> and <details> needs to work inside notes so all three need to have different but compatible background colors. So just a border might be easier.

It's also possible to put some vertical space between the <summary> (if present) and the rest of <details> content only when the <details> is open with a rule like details[open] summary { margin-bottom: var(--body-line-height); }.

There may already exist a drop-in JavaScript library for this, rather than it being a CSS thing.

Bootstrap adds a dotted underline to these (in all browsers?) and changes the cursor style.

If this is done then <abbr> should be added to the examples of inline styles in headings, figcaptions, lead paragraphs, and secondary text.