4 Less used HTML tags and their uses

4 Less used HTML tags and their uses

List of four rarely used HTML tags and how they can be used for web development

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>

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 ?.

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.

Did you find this article valuable?

Support Kritika Pattalam Bharathkumar by becoming a sponsor. Any amount is appreciated!