HTML (Hyper Text Markup Language) is used to design web pages using a combination of Hypertext and Markup language.
In this post, we're going to take a look at some cool stuff that can be done using HTML. Let's look at some of the html tags, you might not be knowing even existed. ould be making use of today.
Let's get started 💪
1. The <figure> tag
This can be used to mark up a photo. The <figure> element can also contain a <figcaption>.
<figure>
<img src="https://images.unsplash.com/photo-1593642634315-48f5414c3ad9" alt="Person using lack laptop computer on brown wooden table" style="width:100%">
<figcaption>Person using lack laptop computer on brown wooden table</figcaption>
</figure>
2. The <audio> tag
<audio> element provides a way to add audio resources to a web page without the need to use any other plugin. It's used to play a sound much as music or an audio stream. It supports mp3, wav and ogg.
A fallback text is enclosed within the tag to be shown to browsers that don't support the element.
By default, the browser does not show any controls.
To add the ability for users to play, pause, adjust volume, etc. the 'controls' attribute can be used.
<audio controls>
<source src="music.mp4" type="audio/mp4">
<source src="mucis.ogg" type="audio/ogg">
</audio>
3. The <video> tag
This allows you to embed a media player for video playback. It's used to play a video clop or a video stream without embedding youtube or vimeo videos. It supports mp4, webm and ogg.
For example, you can upload your video on AWS S3 and use the <video> tag to embed it on your website.
You can also specify certain attributes, such as width, height, autoplay, loop, controls, etc.
<video width="960" height="540" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
</video>
4. The <progress> tag
The <progress> tag represents the progress of a task.
The <progress> tag should not be confused with the <meter> tag (which represents a gauge). It has two attributes value and max.
<progress value="57" max="100">
</progress>
5. The <meter> tag
You can use the meter element to measure data within a given range (a gauge).
This can be achieved with min and max values or with a percentage.
<meter value="7" min="0" max="10">7 out of 10</meter>
<meter value="0.4">40%</meter>
6. The <data> tag
It specifies the machine-readable translation of the content of the element. It also provides a human-readable text.
<ul>
<li>
<data value="010">Dogs</data>
</li>
<li>
<data value="011">Cats</data>
</li>
</ul>
7. The <datalist> tag
The <datalist> tag is used to provide autocomplete feature in the input field of the form.
It specifies the set of predefined suggestions for the user to input.
<input type="text" list="days" placeholder="Choose a Day">
<datalist id="days">
<option value="Monday"></option>
<option value="Tuesday"></option>
<option value="Wednesday"></option>
<option value="Thursday"></option>
<option value="Friday"></option>
<option value="Saturday"></option>
<option value="Sunday"></option>
</datalist>
8. The <noscript> tag
The content inside the <noscript> element is rendered by the browser only when JavaScript is disabled. It provides a fallback mechanism for the components that will stop working without JavaScript.
<noscript><h2>JavaScript is disabled in your browser.</h2></noscript>
9. The <detail> tag
The <detail> tag is used to make collapsible sections when it is required to provide extra information about a subject that users can hide or view by their choice.
It uses the <summary> tag which specifies the title that can be clicked to expand or collapse the details.
<details>
<summary>Click To Open</summary>
Hey, I am natively collapsable section. My content remains hidden till you click on summary.
</details>
10. The <wbr> tag
The <wbr> tag stands for word break 🍞 opportunity which is used when a word is too long, and you don't want the browser to break it at the random place, helps to break the word where you want.
<p>This is a lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnngggggggggggggggggggggggggggggggggggggggggg<wbr>word.</p>
11. The <mark> tag
<mark> is a very simple and useful native tag used to add some nice highligting in your webpage without any CSS.
<p>HTML can do <mark> MAGIC </mark>.</p>
12. The <ins> and <del> tag
<ins> element indicates text that has been added to the document.
<del> is used for the text that has been deleted from the document.
<p>Jatin is a
<del>spider man</del>
<ins>web developer</ins>
from India.
</p>
References
HTML Reference for overview of various HTML tags.