8 important HTML tags you should try

<details>
  <summary>View More Info</summary>
  <p>Hidden content revealed when clicked</p>
  <img src="info-graphic.png" alt="Additional information">
</details>

<dialog id="newsletterDialog">
  <h2>Subscribe to Newsletter</h2>
  <form method="dialog">
    <input type="email" placeholder="Enter email">
    <button>Subscribe</button>
  </form>
  <button onclick="document.getElementById('newsletterDialog').close()">
    Close
  </button>
</dialog>

<button onclick="document.getElementById('newsletterDialog').showModal()">
  Open Dialog
</button>

<template id="userCard">
  <div class="card">
    <h2 class="name"></h2>
    <p class="email"></p>
  </div>
</template>

<script>
const template = document.getElementById('userCard');
const clone = template.content.cloneNode(true);
clone.querySelector('.name').textContent = 'John Doe';
clone.querySelector('.email').textContent = 'john@example.com';
document.body.appendChild(clone);
</script>

<label for="browser">Choose browser:</label>
<input list="browsers" id="browser" name="browser">

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

<progress value="75" max="100">75%</progress>
<!-- Indeterminate state -->
<progress max="100"></progress>

<p>Next meeting: 
  <time datetime="2024-03-15T14:00">March 15th at 2 PM</time>
</p>

<p>Search results for <mark>HTML5</mark> features</p>

<figure>
  <img src="chart.png" alt="Revenue growth chart">
  <figcaption>Figure 1: 2023 Quarterly Revenue</figcaption>
</figure>