====== HTML ======
**__H__yper__t__ext __M__arkup __L__anguage**

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.
  ; ''<ruby>''
  : For rendering annotations above other text. Fun, but requires [[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby|some tedious markup]].

===== 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.
  : [[https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets]]
  : [[web_browser#alternate_stylesheet|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

==== 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.

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

checkers:
  * https://report-uri.com/
  * https://csp-evaluator.withgoogle.com/

==== Alternate Images ====

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 ''img'' element, with the ''srcset'' attribute.
  - 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

===== Not-Cool Things =====

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

==== The HTML Crimes ====

  * [[wp>Minification_(programming)|Minifying]] markup.

===== Accessibility =====

==== WAI-ARIA ====

  * 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 ''role''s:

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

==== Media ====

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

=== 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 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>''

==== prefers-reduced-motion ====

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

===== 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:

<code html>
<ul>
	<li></li>
	<li></li>
	<li>
		<ul>
			<li></li>
			<li></li>
		</ul>
	</li>
</ul>
</code>

I'm always forgetting that ''<ins>'' is the element that pairs with ''<del>''. Keep thinking it'll be something like replace (rel, rep??)

===== See Also =====

  * [[html_editor]]
  * [[css]]

{{tag>accessibility guide HTML hypermedia language markup-language}}