User Tools

Site Tools



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 <abbr> or <acronym>.
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

download attribute
With <a href=“[link to file]” download> you can specify that a link is for downloading, rather than loading, by adding the download attribute.
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.
alternate stylesheet
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.
rel attribute
I always forget about this one. Some cool values are:
  • alternate: see above for it's use with stylesheets.
  • external for external links.
  • help.
  • next and prev for pages in a sequence, like blog posts.
  • noopener, though I think this is default in browsers now?
  • tag.

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.


Not-Cool Things

IDs have to start with a letter, or they will be a pain to target in the CSS file.



Some useful roles:

Eg: <form role=“search”>
tablist,tab, tabpanel
tablist is the container, which contains tabs, which when clicked display tabpanels.
tree, treeitem
For lists that can be collapsed and expanded.
Eg: <ul role=“tree”><li role=“treeitem”>



ASCII Art is obviously a pain for screenreader users.

  • If it's just decorative, you could add aria-hidden=“true” to the <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-labelledby=“[id]” or aria-describedby=“[id]” attributes to point to the id on an element that has a description, for example a <figcaption>

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 <ul>, <ol>, or <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>.

See Also

html.txt · Last modified: 2022/07/07 03:12 by rjt