Introduction

Html is a standard markup language intended to be viewed in a web browser. As we know that  HTML isn’t a modern thing which  We’ve used it more for a long time.  In this blog, I’m listing 10 useful features that I haven’t used a lot but now found useful. I’ve also added a working example in this blog.

1. details – <details></details>
2. contenteditable – <element contenteditable =”true|false”>
3. map – <map></map>
4. mark Content – <mark></mark>
5. param – <param>
6. output – <output></output>
7. datalist – <datalist></datalist>
8. range – <input type=”range”>
9. meter – <meter></meter>
10. wbr – <wbr>
11. figure – <figure></figure>
12.  time – <time></time>
13.  var – <var></var>
14.  samp – <samp></samp>
15.  em – <em></em>

details:

The detail tags specifies additional details that the user can open and close on demand.  It is used to create a toggle widget that the user can open and close. Any type of content can be put inside the  detail tag.

Syntax – <details></details>

Example – 

<details>
<summary>Detail tag example</summary>
<p>Hello!</p>
</details>

Note: the <summary></summary> tag is used in between <details></details> tag to specify a visible heading for it.

contenteditable:

The contenteditable attribute specifies whether the content of an element is editable or not.

Syntax – <element contenteditable=”true|false”>

Example – 

<div contenteditable=”true”>Example for content editable.  This is editable</div>
<div contenteditable=”false”>Example for content editable.  This is not editable</div>

map:

The map tag is used to define an image map. An image map is an image with clickable areas. The attribute of the map tag is associated with the <img> tag usemap attribute and creates a relationship between the image and the map.

Syntax – <map></map>

Example –

<img src="https://www.w3schools.com/tags/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="https://www.agiratech.co.uk/web-development">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="https://www.agiratech.co.uk/mobile-development">
</map>

mark Content :

The mark tag defines the text that should be marked or highlighted for reference or notation purposes, due to the marked passage’s relevance or importance in the enclosing context.

Syntax – <mark></mark>

Example – 

<p>A mark element is displayed like this: <mark>Highlighted text!!</mark></p>

param:

The param tag defines parameters to be passed to an embedded object at run-time defined by object tag. Any number of <param> elements may appear inside an <object> element, in any order but must be placed at the start of the content.

Syntax – <param>

Example –

<object data=“”>
<param name=”autoplay” value=”true”>
</object>

output :

Using this tag in HTML, you can represent the result of any calculation that is performed by the client side script such as JavaScript.

Syntax – <output></output>

Example-

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type=”range” id=”a” value=”50”>
+
<input type=”range” id=”b” value=”25”>
=
<output name=”c” for=”a b”></output>
</form>

datalist:

The datalist tag specifies a list of pre-defined options for an <input> element.

It is used to provide an autocomplete feature for <input> elements. 

The datalist comprises a set of <option> elements which represents the permissible or recommended options that are available to choose from within other controls.

Syntax – <datalist></datalist>

Example-

<label for=”languages”>Choose language</label>
<datalist>
<option value=”HTML”>
<option value=”Javascript”>
<option value=”CSS”>
</datalist>

range:

The input type “range” defines a control for entering a number whose exact value is not important. <input> elements of type ‘range’ let the users to specify a numeric value which must be no less than or more than the given value range. 

Syntax – <input type=”range”>

Example –

<h2>Range Slider</h2>
<input type=”range” id =”range_id” name=”range_id” min=”0” max=”11”>
<label for=”range_id”>Value</label>

meter:

The meter tag defines a scalar measurement with a known range, or a fractional value. 

Syntax – <meter></meter>

Example –

<h2>Meter Range</h2> 
<label for=”boxa”>Box A</label>
<meter id=”boxa” value=”2” min=”0” max=”10”>out of 10</meter>
<br>
<label for=”boxb”>Box B</label>
<meter id=”boxb” value=”2”>60%</meter>

wbr:

The wbr stands Word Break Opportunity. A text place where the browser can optionally break a line, although its line-breaking rules will otherwise not trigger a break at the spot.

Syntax- <wbr><wbr>

Example-

<p>
The wbr stands Word Break Opportunity. <wbr>A position with text where the browser may optionally break a line,<wbr>
<wbr>though its line-breaking rules would not otherwise create a break at the location.<wbr>
</p>

figure:

The figure tag represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element. 

The figure, caption, and content are considered as one unit.

Syntax – <figure></figure>

Example –

<figure>
<img src=”https://www.agiratech.co.uk/assets/images/optimized/tec_4cd01bc77e782a7f95e71618ab98404e.jpg” alt=”mobile development” style=”width:100%”>
<figcaption>Mobile Development</figcaption>
</figure>

time :

The time tag defines a specific time. The date time attribute of this element is used to translate the time into machine readable format so that browsers can offer to add date reminders through the user’s calendar.

Syntax – <time></time>

Example –

<p>the meeting will be held at <time datetime="21-10-2020">July 7</time> in London's Hyde Park.</p>

var :

The var tag is used to define a variable in programming or in mathematical expressions. The content material within is normally shown in italics.

Syntax – <var></var>

Example –

<p>
<var>a</var>+<var>b</var>+<var>c</var>-<var>d</var>=<var>z></var>
</p>

samp :

The samp tag is used to describe the output sample from a computer program. The text inside is shown in the default monospace font of the browser.

Syntax- <samp></samp>

Example –

<samp>Not Supported in HTML.</samp>

em :

The em tag is used to define the highlighted text. The material within is normally shown in italics.

Syntax – <em></em>

Example –

<p><em>example</em> for the em tag.</p>

Conclusion:

There are more tags in HTML. But the above lists are 10 useful features you may not be using much.  Thanks for reading! Here I have covered only a few features in HTML. I hope this will help you.

Also Read: How to make your HTML responsive with CSS

Find the approximate cost to build your Application

Check Out