Modern HTML5 Features

HTML5 introduced many new elements for better structure and functionality.

These elements provide semantic meaning and new capabilities for modern web applications.

<!-- Audio -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>

<!-- Video -->
<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support video.
</video>

<!-- Progress bar -->
<progress value="70" max="100">70%</progress>

<!-- Meter -->
<meter value="0.6">60%</meter>

• <audio> - Embed audio content
• <video> - Embed video content
• <canvas> - Draw graphics with JavaScript
• <svg> - Scalable vector graphics
• <progress> - Progress indicator
• <meter> - Scalar measurement
• <details> - Collapsible content
• <summary> - Summary for details

<h2>HTML5 Features</h2>

<h3>Progress Bar</h3>
<progress value="75" max="100">75%</progress>
<p>75% Complete</p>

<h3>Collapsible Content</h3>
<details>
  <summary>Click to expand</summary>
  <p>This content is hidden until you click the summary.</p>
</details>