html
Table of Contents
HTML
Hypertext Markup Language
I like to get tipsy and do HTML when it's sunny.
Cool HTML Elements
-
<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.
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 thedownload
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
(orAlt 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
andprev
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
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.
checkers:
Not-Cool Things
IDs have to start with a letter, or they will be a pain to target in the CSS file.
Accessibility
WAI-ARIA
- https://www.w3.org/TR/wai-aria/ - Spec.
Some useful role
s:
-
search
- Eg:
<form role=“search”>
-
tablist
,tab
,tabpanel
-
tablist
is the container, which containstab
s, which when clicked displaytabpanel
s. -
tree
,treeitem
- For lists that can be collapsed and expanded.
- Eg:
<ul role=“tree”><li role=“treeitem”>
…
Media
ASCII Art
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 thearia-labelledby=“[id]”
oraria-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:
<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>
.
See Also
html.txt · Last modified: 2022/07/07 03:12 by rjt