Differences

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

--- html [2022/06/01 12:58] – html_editor page link rjt
+++ html [2024/07/19 00:15] (current) – [Cool HTML Elements] ruby rjt
@@ Line 15: / Line 15: @@
   ; ''<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 43: / Line 46: @@
   * 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 ====
@@ Line 65: / Line 103: @@
   * 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 oen thing I forget is to check this page!**
+**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:
@@ Line 85: / Line 129: @@
 </code>
-I'm always forgetting that ''<ins>'' is the element that pairs with ''<del>''.
+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}}