DEV Community

Cover image for Some unknown HTML tags
Rohith ND
Rohith ND

Posted on

2 1

Some unknown HTML tags

1. Fieldset tag

The <fieldset> tag in HTML is used to group logically similar fields within an HTML form.



<fieldset>
<legend>User details:</legend>
<label>Name</label><br />
<input type="text" name="name" /><br />
<label>Email</label><br />
<input type="email" name="email" /><br />
</fieldset>

Enter fullscreen mode Exit fullscreen mode




Output

fieldset

2. kbd tag

It's a phrase tag that specifies the keyboard input. The text within the <kbd> tag is usually displayed in the browser's default monospace typeface.



<p>keyboard shortcut :
<kbd>Ctrl</kbd> + <kbd>N</kbd>
</p>

Enter fullscreen mode Exit fullscreen mode




Output

kbd

3. Datalist tag

In HTML files, the <datalist> tag is used to give autocomplete functionality. It can be combined with an input tag to allow users to quickly fill out forms by selecting data.



<form>
<label>Your Options: </label>
<input list="options" />
<datalist id="options">
<option value="Option 1" />
<option value="Option 2" />
<option value="Option 3" />
</datalist>
</form>

Enter fullscreen mode Exit fullscreen mode




Output

datalist

4. Meter tag

A scalar measurement within a predefined range, or a fractional value, is defined with the <metre> tag.



Progress : <meter value="0.7">7 out of 10</meter>

Enter fullscreen mode Exit fullscreen mode




Output

meter tag

5. Time tag

The <time> tag specifies a specified day and time (or datetime).



<p>Open from <time>10:00</time> to <time>21:00</time> every weekday.</p>

Enter fullscreen mode Exit fullscreen mode




Output

time tag

6. Progress tag

The <progress> tag is used to show how far a work has progressed. It makes it simple for web developers to add a progress bar to their website. It's usually used to illustrate how far a file is uploading on a web page.



Downloading progress:

<progress value="80" max="100"></progress>

Enter fullscreen mode Exit fullscreen mode




Output

progress

7. Abbr tag

The <abbr> tag represents an acronym or abbreviation of a longer term or phrase, such as www, HTML, HTTP, and so on. In some browsers, content written between <abbr> tags is rendered with a dotted underline.


<span class="nt">&lt;p&gt;</span>Abbreviation : <span class="nt">&lt;abbr</span> <span class="na">title=</span><span class="s">"HyperText Markup language"</span><span class="nt">&gt;</span>HTML<span class="nt">&lt;/abbr&gt;</span> <span class="nt">&lt;/p&gt;</span>
Enter fullscreen mode Exit fullscreen mode
Enter fullscreen mode Exit fullscreen mode




Output

abbr tag

8. Details tag

The <details> tag is used to express additional information on a web page that the user can view or hide at any time.



<details>

<summary>Click here to expand.</summary>

<p>Summary goes here</p>

</details>

Enter fullscreen mode Exit fullscreen mode




Output

image.png

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay