5 less known HTML tags

Here are the list of 5 less known HTML tags.

base tag

The <base> tag in HTML is used to provide a base URL. You can specify the base URL at the top of the page and other links of the page will use the this URL as their base. The base tag must be placed in documents <head> tag and each document can have only one base tag.

<html>
<head>
	<title> Base tag example </title>
    <base href="http://abc.com/" >
</head>
</body>
	</p><a   href="alphabets/"> The URL will be http://abc.com/alphabets/ </a>/p>
</body>

template Tag

<template> tags are very useful if you need to render the same content multiple times. You can write a JavaScript code to do it for you. Even if you need to change a little bit of content you can do it before inserting it to the page.

Template tags in HTML contains content users cant see, then later JavaScript can be used to render it as many times as we want in the page.

<button onclick="showContent()">Show Me Some Stuff!</button>

<template>
    <p>Hey look! It's stuff!</p>
    <img src="stuff.jpg">
</template>

<script>
function showContent() {
    var temp = document.getElementsByTagName("template")[0]; // gets the first template in the page
    var clon = temp.content.cloneNode(true); // a clone of the template
    document.body.appendChild(clon); // adds the template to the bottom of the page
}
</script>

details Tag

<details> tag in HTML can be used to show a summary of a object like in the below example:

Click me to learn about HTML Details Tag

By default the content in this tag are hidden but can be seen when clicked on it.

<details>
	<summary>Click me to learn about HTML Details Tag!</summary>
	By default the content in this tag are hidden but can be seen when clicked on it.
</details>

wbr Tag

<wbr> tag in HTML gives the browser a specific place to break up the word if it is needed. This is the tag you should look for creating the layouts that you want to avoid horizontal scroll bars.

abbr Tags

<abbr> tags is for defining a abbreviation. The abbr tags can help the visually impaired, who need text to speech software. It is similar to <acronym> tag, expect the abbr tag is only used to define abbreviated words. The abbr tag can help screen readers, spellcheckers and search engine.

WebWithMI

Search This Blog