HTML: Difference between revisions

Latest revision as of 13:26, 10 February 2021

A reference for HTML5 elements

Inputs

Range

<input type="range" class="" id="myRange" min="1" max="100" value="50" step="1">

Events

See SO Answer
input triggered when the value of the slider is changed
change triggered on mouse up

Image

<picture>
  <source srcset="bird.webp" type="image/webp">
  <source srcset="bird.jpg" type="image/jpeg"> 
  <img src="bird.jpg" alt="Great blue bird.">
</picture>

img alone is sufficient to show an image.
Wrapping around a picture allows you to specify multiple image types.

Video

See JavaScript

Canvas

See JavaScript

@@ Line 9: / Line 9: @@
 <input type="range" class="" id="myRange" min="1" max="100" value="50" step="1">
 </syntaxhighlight>
+;Events
+* See [https://stackoverflow.com/questions/18544890/onchange-event-on-input-type-range-is-not-triggering-in-firefox-while-dragging SO Answer]
+* <code>input</code> triggered when the value of the slider is changed
+* <code>change</code> triggered on mouse up
+==Image==
+<syntaxhighlight lang="html">
+<picture>
+  <source srcset="bird.webp" type="image/webp">
+  <source srcset="bird.jpg" type="image/jpeg">
+  <img src="bird.jpg" alt="Great blue bird.">
+</picture>
+</syntaxhighlight>
+* <code>img</code> alone is sufficient to show an image.
+* Wrapping around a <code>picture</code> allows you to specify multiple image types.
+See also [https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images MDN: Responsive images]
 ==Video==