10 useful html tags

Posted on by — No Comments ↓

Live demo: https://fancy-cascaron-2e1a89.netlify.app/

1. <datalist>

Use <datalist> to provide autocomplete suggestions for a regular text input.

Why it matters:

  • Works with standard <input> fields using the list attribute.
  • Supports both selecting a suggestion and typing a custom value.
  • Great for location pickers, tags, or search hints.

Example: 

<label for="city">Choose a city:</label>
<input id="city" list="cities" />

<datalist id="cities">
  <option value="Bhubaneswar" />
  <option value="Brahmapur" />
  <option value="Cuttack" />
  <option value="Puri" />
  <option value="Sambalpur" />
</datalist>

Demo: tags/datalist.html

2. <dialog>

<dialog> is a native modal/dialog container for popups.

Why it matters:

  • Use show(), showModal(), and close() to control visibility.
  • Browsers handle focus management inside modals.
  • Supports a native backdrop for dimming the page.

Example: 

<button commandfor="myDialog" command="show-modal">Open Modal</button>

<dialog id="myDialog">
  <h2>Contact Form</h2>
  <form>
    <label>Name</label><br>
    <input type="text" required><br><br>
    <label>Email</label><br>
    <input type="email" required><br><br>
    <button type="submit">Submit</button>
  </form>
  <br>
  <button commandfor="myDialog" command="close">Close</button>
</dialog>

Demo: tags/dialog.html

3. <details> + <summary>

These tags make a native collapsible disclosure widget.

Why it matters:

  • No JavaScript required for expand/collapse behavior.
  • The open state is stored automatically.
  • Accessible to screen reader users out of the box.

Example: 

<details>
  <summary>What is HTML?</summary>
  <p>HTML is the standard markup language for web pages.</p>
</details>

Demo: tags/details.html

4. <progress>

Use <progress> to show task completion status.

Why it matters:

  • Semantically represents progress rather than using decorative bars.
  • Accepts value and max to define completion.
  • Can become indeterminate if value is omitted.

Example: 

<h2>Download Progress</h2>
<progress value="75" max="100"></progress>

Demo: tags/progress.html

5. <meter>

<meter> expresses a scalar measurement within a range.

Why it matters:

  • Ideal for levels, scores, and performance indicators.
  • Supports min, max, low, high, and optimum.
  • Browsers may apply threshold-based styling automatically.

Example: 

<h2>Battery Level</h2>
<meter value="0.85">85%</meter>

Demo: tags/meter.html

6. <output>

<output> is meant for presenting calculated results.

Why it matters:

  • Semantically links to the inputs that generated the value.
  • Can serve as a live update region in forms.
  • Clearer than using a plain <span> for dynamic values.

Example: 

<form oninput="result.value=Number(a.value)+Number(b.value)">
  <input type="number" id="a" value="10">
  +
  <input type="number" id="b" value="20">
  =
  <output name="result">30</output>
</form>

Demo: tags/output.html

7. <mark>

<mark> highlights relevant or important text.

Why it matters:

  • Indicates meaningful emphasis rather than decorative styling.
  • Browser defaults make it stand out clearly.
  • Useful for search results and highlight-based explanations.

Example: 

<p>HTML is a <mark>very important</mark> skill for web developers.</p>

Demo: tags/mark.html

8. <kbd>

Use <kbd> for keyboard shortcuts and user input.

Why it matters:

  • Ideal for documenting commands and key combinations.
  • Uses monospace text for better readability.
  • Can be nested to show sequences like Ctrl + C.

Example: 

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save the document.</p>

Demo: tags/kbd.html

9. <time>

<time> relates human-readable dates to machine-readable values.

Why it matters:

  • Helpful for events, schedules, and publication dates.
  • Search engines and tools can parse the datetime value.
  • Improves semantic clarity for timestamps.

Example: 

<p>
  Event Date:
  <time datetime="2026-12-25">December 25, 2026</time>
</p>

Demo: tags/time.html

10. <template>

<template> stores inert DOM markup that can be instantiated later.

Why it matters:

  • The browser parses the content but does not render it initially.
  • Great for reusable UI fragments and component templates.
  • Prevents inner scripts and resources from executing until cloned.

Example: 

<template id="productCard">
  <article style="border: 1px solid #ccc; padding: 15px; margin-top: 10px; width: 200px; border-radius: 8px;">
    <h2 style="margin-top: 0;">Wireless Mouse</h2>
    <p>Price: ₹799</p>
    <button>Add to Cart</button>
  </article>
</template>

<script>
  const template = document.getElementById('productCard');
  const container = document.getElementById('cardContainer');
  const renderBtn = document.getElementById('renderBtn');

  renderBtn.addEventListener('click', () => {
    const clonedContent = template.content.cloneNode(true);
    container.appendChild(clonedContent);
  });
</script>

Demo: tags/template.html

Wrap-up

These tags are excellent examples of how semantic HTML can improve clarity, accessibility, and maintainability without adding extra complexity.

Live demo: https://fancy-cascaron-2e1a89.netlify.app/

This small demo proves that HTML alone can solve many UI problems elegantly. If you want to build more accessible and maintainable interfaces, start with native semantics and only add JavaScript when the interaction truly demands it.

Happy coding! 🚀

Leave a Reply