1. Media Player
The <video> element embeds the video player into the document. It allows you to show the video on the web page. It may contain one or more video files using <source> element from which a browser may choose if one format is not recognized.
To automatically start playing the video, use the autoplay attribute. And to add the controls like play, pause and volume, use the control attribute.
<video width="320" height="240" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> Your browser does not support the requested video. </video>
The text enclosed between the <video> tags will only be displayed when the browser does not support the video content.
|File Format||Media Type|
Pro Tip: It’s best to use the width and height attribute in the video as while loading, a video may flicker.
2. Call Someone
It may sound crazy, but yes, you can easily create a callable link by just using a single line of HTML code. HTML provides the browser with the tel: scheme, which is used to add clickable phone numbers. However, every browser responds differently to this launch phone app with a number on it, while some directly make the call without waiting.
Syntax: <a href=”tel:(countrycode)(NUMBER)p(extension)”> Text </a>
<a href="tel:1234567890"> Call to support </a>
Make a call-able link using HTMLCall to support
3. Podcast Player
The <audio> element embeds the audio player into the document. It allows you to add the audio or music file on the web page. It may contain one or more audio files using <source> element from which a browser may choose if one format is not recognized.
To automatically start playing the audio, use the autoplay attribute. And to add the controls like play, pause and volume, use the control attribute.
<audio controls> <source src="hello.ogg" type="audio/ogg"> <source src="name.mp3" type="audio/mpeg"> Your browser does not support the requested audio. </audio>
The text enclosed between the <audio> tags will only be displayed when the browser does not support the audio content.
Click on the play button to play a sound:
|File Format||Media Type|
4. Color Picker
The HTML5 introduced many <input> type elements. The <input> elements of type color allow the user to specify the color either by using the color picker or entering the color in the text field in hexadecimal format.
The default color value is black (#000000), but if you want to change the default color, you can change it by setting the value. The value must be in the seven-character hexadecimal notation.
Pro Tip: Use <label> tag:
- For efficient HTML rendering, which boosts SEO.
- It increases code readability.
<label for="favcolor"> Select a color: </label> <input type="color" id="favcolor" name="favcolor" value="#7AD03A">
5. Data List
For the <input> element the <datalist> tag specifies the list of pre-defined items. It allows you to provide the autocomplete feature for the <input> element, so you will see a drop-down list of pre-defined elements while entering the data.
Note: The element’s id must be equal to the <input> element list attribute, which holds them together.
I hope you found the above write-up helpful. Also, if you think I missed any cool HTML stuff, write it in the comment section below.