Table of Contents
Hypertext Markup Language
I like to get tipsy and do HTML when it's sunny.
Cool HTML Elements
- For titles of works.
- For sections of stuff you can show/hide. Added a
<summary>to set the title. Use
<details open>to make it start unfolded.
- For specifying first instance of a term. Use with
- For images associated stuffs. Put a regular 'ol
<img>in there and use
<figcaption>for a caption. Not only for images, or single images!
- For keyboard / button instructions.
Other Cool Things
<a href=“[link to file]” download>you can specify that a link is for downloading, rather than loading, by adding the
- This can also be followed by a
=“[filename]”if you want it to be downloaded with a different filename that the one it has on your server.
- You can specify alternative appearances for you page, which in Firefox are accessed via
View > Page Style(or
Alt v y). You can also have a base sheet that is applied to all.
- Web Browser§Alternate Stylesheet for notes on browser support.
- I always forget about this one. Some cool values are:
alternate: see above for it's use with stylesheets.
externalfor external links.
prevfor pages in a sequence, like blog posts.
noopener, though I think this is default in browsers now?
Content Security Policy
CSP is a way of verifying externally hosted assets on websites.
Pretty cool thing to get into the habit of use/doing.
IDs have to start with a letter, or they will be a pain to target in the CSS file.
- https://www.w3.org/TR/wai-aria/ - Spec.
tablistis the container, which contains
tabs, which when clicked display
- For lists that can be collapsed and expanded.
<ul role=“tree”><li role=“treeitem”>…
- If it's just decorative, you could add
<pre>element, which will hide it.
- If you're using ASCII Art to represent text you could add
aria-label=“[text]”to tell the screenreader what the text says.
- If it's an image you can use
role=“img”to tell the screenreader.
- If your drawing's inside a
<figure>you might want to use the
aria-describedby=“[id]”attributes to point to the id on an element that has a description, for example a
Things I Forget
Number one thing I forget is to check this page!
To nest a list, the sublist needs to be inside an
<li> element, not the
<dl>. Seems ugly to me, but makes a kind of sense. So:
I'm always forgetting that
<ins> is the element that pairs with