4 Less used HTML tags and their uses
Tags: html, webdev, programming
Published: 2021-07-30 00:42:29


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://dev.to">
``` 


**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>
``` 
{% codepen 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 <base> 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 


{% codepen 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.

{% codepen https://codepen.io/kpattalam/pen/vYxwgGb %}


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

### References - mdn docs

-  [Base Tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) 
- [http-equiv="refresh"]( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)
- [output tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output)
- [template tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)


Lets connect on  [Twitter](https://twitter.com/KritikaPattalam)  | [LinkedIn](https://www.linkedin.com/in/kritika-p-296739155/) for more web development related chats.