HTML

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.

<ruby>

For rendering annotations above other text. Fun, but requires some tedious markup.

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/

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:

1. A regular img element, with the srcset attribute.
2. A picture element, which is like an equibilant of the video and aaudio elements.

Rough notes:

• 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

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

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

• Minifying markup.

• 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>

You can change that way things like animations play for people that have set certain preferences i ntheir browser or OS.

• https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

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>. Keep thinking it'll be something like replace (rel, rep??)

• HTML Editor
• CSS