HTML

From David's Wiki
\( \newcommand{\P}[]{\unicode{xB6}} \newcommand{\AA}[]{\unicode{x212B}} \newcommand{\empty}[]{\emptyset} \newcommand{\O}[]{\emptyset} \newcommand{\Alpha}[]{Α} \newcommand{\Beta}[]{Β} \newcommand{\Epsilon}[]{Ε} \newcommand{\Iota}[]{Ι} \newcommand{\Kappa}[]{Κ} \newcommand{\Rho}[]{Ρ} \newcommand{\Tau}[]{Τ} \newcommand{\Zeta}[]{Ζ} \newcommand{\Mu}[]{\unicode{x039C}} \newcommand{\Chi}[]{Χ} \newcommand{\Eta}[]{\unicode{x0397}} \newcommand{\Nu}[]{\unicode{x039D}} \newcommand{\Omicron}[]{\unicode{x039F}} \DeclareMathOperator{\sgn}{sgn} \def\oiint{\mathop{\vcenter{\mathchoice{\huge\unicode{x222F}\,}{\unicode{x222F}}{\unicode{x222F}}{\unicode{x222F}}}\,}\nolimits} \def\oiiint{\mathop{\vcenter{\mathchoice{\huge\unicode{x2230}\,}{\unicode{x2230}}{\unicode{x2230}}{\unicode{x2230}}}\,}\nolimits} \)

A reference for HTML5 elements

Inputs

See Bootstrap forms

Range

Documentation

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

See also MDN: Responsive images

Video

See JavaScript

Canvas

See JavaScript