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

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

<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 value="75" max="100">75%</progress>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<summary>Click to expand</summary>

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

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

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

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

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

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

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

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