HTML5 introduced many new tags. The HTML5 tags list is below:

Structural Tags

Structural tags are for defining the structure of the page. They’re all semantic and provides no formatting.

• article – defines an article
• aside – holds some content that’s loosely related to the page content
• details – a widget from which user can get addition information or controls on demand
• header – header of a document or section
• hgroup – a group of headings
• footer – a footer of a document or section
• section – a section of a document
• summary – summary for the details element

Form Tags

These tags are for form structure or controls.

• datalist – a set of predefined options for an input element
• keygen – a control for generating a public-private key pair
• meter – a scalar measurement within a known range

Formatting Tags

These tags are for formatting page content,

• bdi – text that’s isolated from the surrounding for the purpose of bidirectional text formatting
• mark – text highlighted for reference purposes
• output – represent the result of a calculation
• progress – displays a completion progress of a task
• rp – provides fallback parentheses for browsers that don’t support ruby annotations
• rt – defines the pronunciation of characters presented in ruby annotations
• ruby – defines ruby annotation for pronunciation
• wbr – a line breaks opportunity

Embedded Content Tags

• audio – lets us embed sound or audio stream in an HTML document
• canvas – a region in a document which can be used to draw graphics on the fly
• embed – embed external application like multimedia content into an HTML documentation
• figcaption– defines caption or legend for a figure
• figure – represents a figure as part of a document
• source – alternative media sources for audio and video
• time – represents a time or date
• video – embeds video content in HTML documents

Inserting MP4 videos in our HTML code is easy.

All we have to do is to use the video tag as follows:

<video src='https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_640_3MG.mp4' controls></video>

We have the controls attribute to show the video play controls in our video element.

src has the path to the video. It can be either a URL or a relative path.

Once we have that, we’ll see the video displayed with the play button on the bottom left.

We can create our own HTML video player where can control the playback speed.

First, we create the video tag as follows:

<video src='https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_640_3MG.mp4' controls></video>

We have the controls attribute so that we can see the playback controls.

Then we can add buttons to let us adjust the speed of the playback:

<video src='https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_640_3MG.mp4' controls></video>

<button id='1x'>
  1x
</button>
<button id='15x'>
  1.5x
</button>
<button id='2x'>
  2x
</button>

Now we can move onto the JavaScript portion of our code.

We can use event delegation to get the ID of the button that’s clicked and then set the playbackRate property of the video element accordingly:

const video = document.querySelector('video');
document.onclick = (e) => {
  if (e.target.id === '1x') {
    video.playbackRate = 1;
  }
  if (e.target.id === '15x') {
    video.playbackRate = 1.5;
  }
  if (e.target.id === '2x') {
    video.playbackRate = 2;
  }
}

We get the video element with document.querySelector and then we set the playbackRate property of the video according to the ID of the button that’s clicked according to the value of e.target.id.

Now we can create our own video player where we can adjust the playback speed of the video.

In HTML5, the datalist tag lets us create a quick drop down with options that we can pick from as we type them with a few lines of code.

To use it, we can write the following HTML:

<form>
  <input list="fruits" name="fruit">
  <datalist id="fruits">
    <option value="apple"></option>
    <option value="orange"></option>
    <option value="grape"></option>
    <option value="banana"></option>
    <option value="pear"></option>
  </datalist>
  <input type="submit">
</form>

All we have to do is add the datalist tag with the id which matches the value of the list attribute in the input we want our datalist element to show.

So both the list attribute of input and the id attribute of datalist have to have fruits as the value.

Then inside it, we just add the option tags with value attributes value which will show in when we type or click on the input.

That’s all we need to do to add a datalist element in HTML5.