Differences

This shows you the differences between two versions of the page.

--- html [2020/10/25 13:37] – ↷ Links adapted because of a move operation rjt
+++ html [2024/07/19 00:15] (current) – [Cool HTML Elements] ruby rjt
@@ Line 12: / Line 12: @@
   : 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.
+  : 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 =====
@@ Line 23: / Line 25: @@
   : 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:
@@ Line 44: / Line 47: @@
   * https://csp-evaluator.withgoogle.com/
-{{tag>hypermedia markup-language}}
+==== 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}}