Interesting HTML Tags
In this lesson, we will explore some interesting HTML tags that you might not be familiar with. These tags can add unique features and functionality to your web pages. They include:
<kbd>,<canvas>,<code>,<details>,<dialog and summary>,<fieldset and legend>,<marquee>,<meter>,<progress>,<time>,<strike>,<svg>,<wbr>, and <template>.
<kbd>
The <kbd> tag is used to represent user input, typically keyboard input. It is often used to indicate text that should be entered by the user, such as in a command line or form input.
<p>To save the document, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p> <canvas>
The <canvas> tag is used to draw graphics on the fly using JavaScript. It provides a space where you can create dynamic graphics, animations, and even games.
<canvas
id="myCanvas"
width="200"
height="100"
style="border:1px solid #000000;"
></canvas>
<script>
var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')
ctx.fillStyle = '#FF0000'
ctx.fillRect(20, 20, 150, 50)
</script> <code>
The <code> tag is used to represent a fragment of computer code. It is typically used to display code snippets or programming examples in a web page.
<!-- The very thing you are reading now is a codeblock, BTW -->
<p>
Use the <code>console.log()</code> function to print messages to the console.
</p> <details> and <summary>
The <details> tag is used to create a disclosure widget from which the user can obtain additional information or controls. The <summary> tag is used as a summary or heading for the details.
<details>
<summary>More Information</summary>
<p>This is additional information that can be toggled on and off.</p>
</details>More Information
This is additional information that can be toggled on and off.
It is called an “accordion” these days. Oh, what’s that! A suspicious link !
<dialog> and <summary>
The <dialog> tag is used to create a dialog box or popup window. It can be used to display additional information or to prompt the user for input. The <summary> tag is used as a summary or heading for the dialog.
<dialog id="myDialog">
<p>This is a dialog box.</p>
<button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">
Open Dialog
</button>Sadly, the <dialog> tag is not supported in all browsers yet, and it needs JavaScript to work properly. But it is a great way to create modal dialogs without using third-party libraries.
<fieldset> and <legend>
The <fieldset> tag is used to group related elements in a form, and the <legend> tag is used to provide a caption for the fieldset.
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
</fieldset>But it is not only used in forms, but also in other contexts where you want to group related elements together. For example, you can use it to group related sections of a web page.
<marquee>
The <marquee> tag is used to create scrolling text or images across the screen. It is a deprecated tag and is not recommended for use in modern web development, but it can still be fun to experiment with.
<marquee behavior="scroll" direction="left">
This is a scrolling text using the marquee tag.
</marquee>Since the <marquee> tag is deprecated, this example might now work in the future. That is why the tagname is red.
<meter>
The <meter> tag is used to represent a scalar measurement within a known range, such as disk usage or battery level. It is often used to display progress or status.
<meter value="0.6" min="0" max="1">60%</meter>60%
<progress>
The <progress> tag is similar to the meter and is used to represent the progress of a task, such as file upload or download. It is often used to display the progress of a long-running operation.
<progress value="70" max="100">70%</progress>From a user point of view, they are the same, just have different styles, but is is semantically correct to use <meter> for measurements and <progress> for progress.
<time>
The <time> tag is used to represent a specific time or date. It can be used to mark up dates, times, or durations in a machine-readable format.
<time datetime="2025-07-15T10:00:00">July 15, 2025, 10:00 AM</time>Do you know how frustrating it is to parse dates and times in JavaScript? Well, this tag helps you with that. It is a great way to mark up dates and times in a machine-readable format, which can be useful for search engines and other applications. So sad that not many people use it…
<strike>
The <strike> tag is used to indicate that text has been deleted or is no longer relevant. It is often used to show changes in a document or to indicate that something is no longer valid.
<p>This is a <strike>deleted</strike> text.</p>This is a deleted text.
Strike is a deprecated tag, and it is recommended to use the <del> tag instead. The <del> tag is used to indicate that text has been deleted or removed from a document.
<svg>
Did you know that the vector graphics can be created using HTML? The <svg> tag is used to create scalable vector graphics (SVG) directly in the HTML document. All those programs like Corel Draw, Adobe Illustrator, Figma and Inkscape can export SVG files or use SVG files direclty, which can be used in HTML.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg> <wbr>
The <wbr> tag is used to suggest a line break opportunity within a long word or URL. It is useful for preventing overflow in narrow containers.
<p>
This is a long word that might need a line break. Rindfleisc<wbr />hetikettierungs<wbr />überwachungs<wbr />aufgaben<wbr />übertragungs<wbr />gesetz
</p>This is a long word that might need a line break. Rindfleisc
How can you not love Deutsch* 1 🇩🇪♥️
HTML does not automatically break long words or URLs, so using <wbr> can help improve readability and prevent layout issues. Or we can set the word-break: break-all; CSS property on the element, which will break long words at any point to fit them within the container. It often tends to break words not where it is supposed to, however.
<template>
The <template> tag is used to define a reusable template that can be used to create dynamic content. It is often used in conjunction with JavaScript to create dynamic web applications.
<template id="myTemplate">
<p>This is a template that can be reused.</p>
</template>
<script>
const template = document.getElementById('myTemplate')
const clone = document.importNode(template.content, true)
document.body.appendChild(clone)
</script>But again, it requires JavaScript to work properly. The <template> tag is not rendered in the document, but it can be used to create dynamic content that can be inserted into the document later.
Summary
In this lesson, we explored some interesting HTML tags that can enhance your web pages. These tags include <kbd>, <canvas>, <code>, <details>, <dialog>, <fieldset>, <marquee>, <meter>, <progress>, <time>, <strike>, <svg>, <wbr>, and <template>. Each of these tags has its own unique purpose and can be used to create dynamic and interactive web content.
Questions
Footnotes
-
“Deutsch is the german word for german.” ↩
About the author
Vasil Kostadinov
Software developer, specializing in React, Next.js and Astro for the frontend, as well as in Supabase and Strapi for the backend. Creates content in all shapes & sizes in his free time.