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>
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
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.
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.
Top comments (0)