Hypertext Markup Language

I like to get tipsy and do HTML when it's sunny.

<cite>

For titles of works.

<details>

For sections of stuff you can show/hide. Added a <summary> to set the title. Use <details open> to make it start unfolded.

<dfn>

For specifying first instance of a term. Use with <abbr> or <acronym>.

<figure>

For images associated stuffs. Put a regular 'ol <img> in there and use <figcaption> for a caption. Not only for images, or single images!

<kbd>

For keyboard / button instructions.

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.

https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets

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.

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel

CSP is a way of verifying externally hosted assets on websites.

Pretty cool thing to get into the habit of use/doing.

• https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

checkers:

• https://report-uri.com/
• https://csp-evaluator.withgoogle.com/

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.
  • https://www.w3.org/TR/aria-in-html/
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

Some useful roles:

search

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”> …

• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Img_role

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>

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:

<ul>
	<li></li>
	<li></li>
	<li>
		<ul>
			<li></li>
			<li></li>
		</ul>
	</li>
</ul>

I'm always forgetting that <ins> is the element that pairs with <del>.

• HTML Editor