HTML5 Modern Features

<!-- Video with fallback message -->
<video controls width="800">
  <source src="intro.mp4" type="video/mp4" />
  <source src="intro.webm" type="video/webm" />
  <p>Your browser doesn't support video. <a href="intro.mp4">Download it</a>.</p>
</video>

<!-- Audio player -->
<audio controls>
  <source src="podcast.mp3" type="audio/mpeg" />
</audio>

<!-- Common video attributes -->
<video
  src="demo.mp4"
  controls     <!-- show play/pause, volume controls -->
  autoplay     <!-- start playing immediately (muted required for autoplay) -->
  muted        <!-- required for autoplay in most browsers -->
  loop         <!-- replay when finished -->
  poster="thumbnail.jpg"  <!-- image shown before playback starts -->
></video>

<input type="color" />       <!-- colour picker -->
<input type="date" />        <!-- calendar date picker -->
<input type="time" />        <!-- time input -->
<input type="range" min="0" max="100" step="5" />  <!-- slider -->
<input type="search" />      <!-- search field with clear button -->
<input type="number" min="1" max="10" />
<input type="tel" />         <!-- phone number keyboard on mobile -->
<input type="url" />         <!-- validates URL format -->

<details>
  <summary>What is NelsonLabs?</summary>
  <p>
    NelsonLabs is a free developer education platform built
    on real-world examples and practical projects.
  </p>
</details>

<details open>
  <summary>This one starts expanded</summary>
  <p>The open attribute makes it expanded by default.</p>
</details>

<!-- Store custom data on elements for JavaScript to read -->
<button
  data-course-id="js-basics"
  data-chapter="3"
  data-user-id="1042"
>
  Continue Learning
</button>

<!-- JavaScript can read these easily -->
<script>
  const btn = document.querySelector('button');
  console.log(btn.dataset.courseId);  // "js-basics"
  console.log(btn.dataset.chapter);   // "3"
</script>