4 Less used HTML tags and their uses.

As part of this blog we are going to see 4 less used HTML tags during web development

1) Refresh the browser or redirect the page

Did you know that you can refresh the browser automatically every few seconds with just a single line of code?.

Yes, this can be done using the http-equiv="refresh" attribute on the meta tag.

<meta http-equiv="refresh" content="30">

content value for 30 here means , the page will refresh every 30 seconds. Enter the value you want and see the page refresh every few seconds.
if you add a url value followed by the integer, the page will redirect to the given url after the specified time. eg:

<meta http-equiv="refresh" content="3;url=https://hashnode.com">

Note: Refresh might have accessibility concerns so use with caution.*

2) Calculating with output tag

Output tag is used to represent the result of a calculation. In the below example we can calculate sum of two input fields and display it in the output field directly.

for attribute eg: for="a b" is used to tell the output tag, which fields are used for the manipulation. In the below code pen for attribute value is the id of the two input fields.
using the name attribute value, the results from the oninput javascript is populated into the output tag. eg: output tag name value is result hence in javascript you can pass the result after calculation using result.value

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" id="a" value="50"> +
    <input type="number" id="b" value="100"> =
    <output name="result" for="a b"></output>
</form>

https://codepen.io/kpattalam/pen/QWpRKez

3) base tag

This tag is very useful when your entire webpage points to the same base URL

The base HTML element specifies the base URL to use for all relative URLs in a document. There can be only one element in a document.

<head>
     <base href="https://kritika-pattalam.hashnode.dev/" target="_blank">
</head>
<body>
      <a href="2-simple-ways-you-can-truncate-text-using-css">Click on this url</a>
</body>

How to use it ?.

In the below codepen, I have specified the base href attribute to my hashnode main blog page. eg: https://kritika-pattalam.hashnode.dev/
In the anchor tag instead of specifying the absolute URL, I have used the relative URL of my blog post eg : 2-simple-ways-you-can-truncate-text-using-css And the entire blog URL is : https://kritika-pattalam.hashnode.dev/2-simple-ways-you-can-truncate-text-using-css

https://codepen.io/kpattalam/pen/dyvEOVZ

4) Template tag in HTML - The Content Template element

The HTML template tag permits you to declare pieces of HTML sections that can be cloned and embedded into the DOM using script.
The contents of the template tag are not added to the DOM on page load, they are only inserted based on some user interaction. Eg: Lets say there is an image inside the template tag, the image does not get downloaded until the template is cloned and inserted into the DOM structure.

https://codepen.io/kpattalam/pen/vYxwgGb

Leave me a comment below if you know about other rarely used HTML tags.

References - mdn docs

Lets connect on Twitter | LinkedIn for more web development related chats.

4 Less used HTML tags and their uses

Comments (3)

HTML

HTML Roadmap

More from this blog

HTML Roadmap

Do you use git? Then this is for you...

Create a DOWNLOAD link in a single line of HTML

First Step to Learning Vue JS - 3

Display random quotes from Chuck Norris API

1) Refresh the browser or redirect the page

2) Calculating with output tag

3) base tag

How to use it ?.

4) Template tag in HTML - The Content Template element

References - mdn docs

Command Palette

Comments (3)

HTML

HTML Roadmap

More from this blog

1) Refresh the browser or redirect the page

2) Calculating with output tag

3) base tag

How to use it ?.

4) Template tag in HTML - The Content Template element

References - mdn docs