Table of Contents

`<fieldset>`

It is used to group related form controls together and provide a caption.

<fieldset>  
    <legend>Personal Information</legend>  
    <label for="name">Name:</label>  
    <input type="text" id="name" name="name">  
    <label for="email">Email:</label>  
    <input type="email" id="email" name="email">  
</fieldset>

`<legend>`

It is used to provide a caption for a <fieldset>.

`<optgroup>`

It is used to group related options in a <select> element.

<select>
  <optgroup label="Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="Bikes">
    <option value="harley">Harley Davidson</option>
    <option value="ducati">Ducati</option>
  </optgroup>
</select>

`<output>`

It is used to represent the result of a calculation or user action.

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" name="a" /> + <input type="number" id="b" name="b" /> =
  <output name="result" for="a b"></output>
</form>

`<progress>`

It is used to represent the result of a calculation or user action.

<progress value="75" max="100">75%</progress>

`<time>`

It is used to indicate a specific time.

<time datetime="2022-11-01">November 1, 2022</time>

`<audio>`

It is used to embed an audio player.

<audio src="song.mp3" controls></audio>

`<video>`

It is used to embed a video player.

<video src="movie.mp4" controls></video>

`<template>`

It is used to define a template that can be cloned and later inserted into the DOM.

<template id="item-template">
  <li>{{item}}</li>
</template>

`<canvas>`

It is used to create a drawing surface for graphics, charts, images and animations.

<canvas id="myCanvas"></canvas>

`<datalist>`

It is used to provide a list of predefined options for input control.

<label for="colors">Select a color:</label>
<input list="colors" name="colors" id="colors" />
<datalist id="colors">
  <option value="red"></option>
  <option value="green"></option>
  <option value="blue"></option>
</datalist>

`<keygen>`

This is used to create a key-pair generator field for forms.

<form>
  <keygen name="security">
  <input type="submit" value="Submit">
</form>

`<picture>`

It is used to provide multiple sources for an image and the browser will choose the best one based on the current screen

<picture>
  <source srcset="img-small.jpg" media="(max-width: 600px)" />
  <source srcset="img-medium.jpg" media="(max-width: 1200px)" />
  <img src="img-large.jpg" alt="image" />
</picture>

`<source>`

It is used in conjunction with the <picture>, <audio>, and <video> elements to specify multiple sources for media elements.

<video controls>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

`<track>`

It is used to add subtitles, captions and chapters to <audio> and <video> elements.

<video controls>
  <source src="movie.mp4" type="video/mp4" />
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English" />
</video>

`<svg>`

এটি স্কেলযোগ্য ভেক্টর গ্রাফিক্স তৈরি করতে ব্যবহৃত হয়।

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red"></circle>
</svg>

`<math>`

It is used to generate mathematical equations using MathML.

index.html

 <math>
  <mfrac>
    <mi>x</mi>
    <mi>y</mi>
  </mfrac>
</math>

`<dialog>`

It is used to create a dialog box or modal window.

<dialog id="myDialog">
  <p>This is a dialog box.</p>
  <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>

`<details>`

It is used to create a reveal widget, which allows the user to view or hide additional content.

<details>
  <summary>Click to expand</summary>
  <p>Additional content goes here.</p>
</details>

`<summary>`

It is used with the <details> tag to provide a short summary or label for additional content.

<summary>Click to expand</summary>

`<mark>`

It is used to highlight text.

<p>This is some text with a <mark>highlighted</mark> word.</p>

`<time>`

It is used to indicate a specific time or date.

<time datetime="2022-11-01">November 1, 2022</time>

`<wbr>`

It is used to indicate the scope of a sound break.

<p>This is a very<wbr />longwordthatneeds<wbr />abreak.</p>

`<bdi>`

It is used to isolate a piece of text that may be oriented differently from the rest of the text on the page.

<p>This text is <bdi>rtl</bdi> formatted.</p>

`<data>`

It is used to attach a machine-readable value to a piece of text.

<p>I have <data value="10">ten</data> apples.</p>

`<figure>`

It is used to group a self-contained stream of related elements with an optional caption.

<figure>
  <img src="image.jpg" alt="image" />
  <figcaption>This is the caption for the image</figcaption>
</figure>

`<figcaption>`

It is used with the <figure> tag to provide a caption or label for the associated elements.

<figcaption>This is the caption for the image</figcaption>

`<template>`

It is used to define a template that can be cloned and later inserted into the DOM.

<template id="item-template">
  <li>{{item}}</li>
</template>