HTML controls Attribute

The HTML controls attribute is a boolean attribute used in the <video> and <audio> elements. When present, it specifies that the default set of playback controls should be displayed on the media element. These controls typically include elements such as play/pause buttons, volume control, and a progress bar, although the exact controls can vary depending on the browser and its version.

The controls attribute does not require a value to be effective. Simply including "controls" within the opening tag of a <video> or <audio> element is enough to enable the display of the browser's default media controls for that element. This allows users to interact with the media, controlling playback without the need for any additional JavaScript or CSS.

Example usage in a <video> element:

<video controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

And in an <audio> element:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

In both examples, the media elements will be rendered with a set of controls that allow the user to play, pause, and seek through the media, adjust the volume, and possibly access other features such as downloading the media or entering fullscreen mode, depending on the browser's implementation.