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.
Kinda cool, but I haven't had much luck with it, and the syntax is yuck, but you can provide multiple images in different sizes and fits and the browser can grab the best one for the readers situation. So small images for mobile, different dimensions for portrait or landscape modes…
There are two ways to do this:
- A regular
imgelement, with the
pictureelement, which is like an equibilant of the
- srcset in img best support
- srcset leaves choice to browser, picture is for control
- srcset happens on page load, picture can change on the fly
- srcset attribute in img element
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
You can change that way things like animations play for people that have set certain preferences i ntheir browser or OS.
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
<del>. Keep thinking it'll be something like replace (rel, rep??)