DEV Community

loading...
Cover image for 3 HTML tags you’ve never heard of or used before

3 HTML tags you’ve never heard of or used before

urielbitton profile image Uriel Bitton ・1 min read

HTML does have some strange code sometimes. Let's look at the 3 most uncommon tags that are rarely used and what their purpose is.

1. var tag

As far as its usage goes, its meant to simply denote to a browser that a mathematics variable will go inside the tag, so its not so useful but here's how we can use it.

<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>
Enter fullscreen mode Exit fullscreen mode

2. samp tag

The samp tag is used to define sample output from a computer program. So its usage is similar to the var tag. Here's an example of how we can use samp.

<p>Message from my computer:</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>
Enter fullscreen mode Exit fullscreen mode

3. kbd tag

The kbd tag is used to define keyboard input. The content inside is displayed in the browser's default monospace font. Here's an example:

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>
<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>
Enter fullscreen mode Exit fullscreen mode

So there you have it, 3 obscure html tags that are not the most useful but will probably make you look more professional when used in the proper context (at work, for demo purposes).

Discussion (19)

Collapse
igoradamenko profile image
Igor Adamenko

I always use var in my projects for inlining programming variables. E.g. PostCSS API options in awsm.css are coded as dl with var entities as terms: igoradamenko.github.io/awsm.css/do.... It sounds like a proper semantic to me. It is not code, it's a tiny bit of it — a variable.

Also I use kbd in projects when I need to emphasize the fact that user should press some keys / buttons. E.g. buttons like Ctrl or USSD commands like *100#. First version of awsm.css had nice looking styles for it: igoradamenko.com/awsm.css/v1/eleme..., similar to those dev.to using. kbd is too specific to use it for somewhat else, so you can always style it without classes and rely on it.

But samp is too specific to use it everywhere, yep. Usually it's easier to use pre > code, just because people always show program output in terminal-style in their articles.

Collapse
urielbitton profile image
Uriel Bitton Author

very interesting thanks 😊

Collapse
leob profile image
leob • Edited

I came across another one, VERY obscure, I think way more obscure than these 3 ... the "ins" tag!

developer.mozilla.org/en-US/docs/W...

Came across it just now in a page. Never saw it before, never heard of it ... "ins" ... how bizarre is that!

Collapse
urielbitton profile image
Uriel Bitton Author

Haha yeah definitely weird

Collapse
spiritbro1 profile image
spiritbro1 • Edited

the dialog tag the one caught me by surprise i use it in my project too for creating a modal using native dialog tag but i dont know how many browser support that but i think most modern browser use that recently

Collapse
isherwood profile image
Clint Buhs • Edited

Really good stuff. However, It's probably better to refer to these as elements. Tags are text in your markup (of which most elements have two, or at least an opening and implied closing). Elements are components of a web page.

Collapse
volomike profile image
Mike Ross 🇺🇸

Also look at DETAILS and SUMMARY tags. stackoverflow.com/a/38215801/105539

Collapse
csqrl profile image
Cam

I actually have used <kbd>. It works great in Markdown for displaying keyboard shortcuts: CTRL+Z. Don't personally see any use case for the other two, however.

Collapse
mzaini30 profile image
Zen

I use <code> for these tags. Hehehehe...

Collapse
leob profile image
leob

Yeah one cannot help but wonder why these tags were ever invented.

Collapse
urielbitton profile image
Thread Thread
rhymes profile image
rhymes

For semantics I guess

<code> is generic as it can contain anything
<kbd> tells the browser and screenreaders something

Some like <samp> might be redundant?

Thread Thread
mzaini30 profile image
Zen

Oh. I forgot about screenreaders.

Collapse
nombrekeff profile image
Keff

I use kbd quite often actually, really nice for showing keyboard keys or key combinations.

Collapse
urielbitton profile image
Collapse
alhiane profile image
Alhiane Lahcen

nice first time I hear about that

Collapse
anevins12 profile image
Andrew Nevins

Bet you haven't heard of <ruby> tags: developer.mozilla.org/en-US/docs/W...

Collapse
merichard123 profile image
Richard • Edited

That's awesome! Another interesting one is the xmp or example tag it lets you display raw html code on the site as is.

Collapse
urielbitton profile image
Uriel Bitton Author

yeah but I've used that tag a few times actually, its useful when showing code for others to copy!

Forem Open with the Forem app