5 Cool Things You Can Do Using HTML Only

HTML is usually the first and easy to learn language most web developers learn. Because of which people often ignore that HTML is full of cool stuff. So in this article, we will share five cool things you can do without using JavaScript, CSS, or any 3^rd party library.

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.

Code

<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.

Output

Media Types

File Format	Media Type
MP4	video/mp4
WebM	video/WebM
OGG	video/Ogg

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>

Code

<a href="tel:1234567890">
   Call to support
</a>

Output

Make a call-able link using HTML

Call 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.

Code

<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.

Output

Click on the play button to play a sound:

Media Types

File Format	Media Type
MP3	video/mpeg
WAV	video/wav
OGG	video/ogg

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:

1. For efficient HTML rendering, which boosts SEO.
2. It increases code readability.

Code

<label for="favcolor"> Select a color: </label>
<input type="color" id="favcolor" name="favcolor" value="#7AD03A">

Output

Select a color:

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.

Code

<label for="language"> Choose your favorite language from the list: </label>
<input list="languages" name="language" id="language">

<datalist id="languages">
  <option value="HTML">
  <option value="CSS">
  <option value="JavaScript">
  <option value="Python">
  <option value="Java">
</datalist>

Output

Choose your favorite language from the list:

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.

Happy Coding!