The most advanced and useful HTML5 tags: Guide with examples

Posted by

  


HTML5 has introduced numerous tags that go far beyond the simple structuring of content. Some of these tags, although less known, offer very powerful and flexible functionality. In this article we will explore the most advanced and useful ones, explaining their practical use with examples.

🔗 Do you like Techelopment? Check out the site for all the details!

1. <template>

The <template> tag allows you to define an HTML block that is not immediately rendered in the DOM. It is very useful for cloning dynamic content with JavaScript, such as cards, modals or notifications.

✅ When to use it
  • Creating repeatable components
  • Templates of content that will be displayed dynamically
💡 Example 
<template id="card-template">
<div class="card">
<h2></h2>
<p></p>
</div>
</template>

<script> 
const template = document.getElementById("card-template"); 
const clone = template.content.cloneNode(true); 
clone.querySelector("h2").textContent = "Dynamic Title"; 
clone.querySelector("p").textContent = "Dynamic content here."; 
document.body.appendChild(clone);
</script>

2. <details> and <summary>

These tags create a native expanding/closing component that is very useful for FAQs, collapsible sections or advanced content.

✅ When to use it
  • FAQ
  • Show/hide optional information
💡 Example 
<details> 
<summary>What is HTML5?</summary> 
<p>HTML5 is the latest version of the Hypertext Markup Language.</p>
</details>

3. <dialog>

With <dialog>, HTML5 offers a native modal window, controllable via JavaScript. No need for external libraries for simple popups/modals anymore.

✅ When to use it
  • Confirmations
  • Login or message modal window
💡 Example 
<dialog id="myDialog">
<p>This is a native HTML5 dialog!</p>
<button onclick="myDialog.close()">Close</button>
</dialog>

<button onclick="myDialog.showModal()">Open Dialog</button>

4. <picture> — Optimization for mobile and desktop

The <picture> tag allows you to define multiple versions of the same image and leaves it up to the browser to choose the most suitable one based on:

  • the width of the screen (media)
  • the type of supported format (type)
✅ When to use it
  • To load a lightweight version on mobile
  • To serve high-resolution images on desktop
  • To take advantage of more efficient formats (e.g. WebP or AVIF)
💡 Complete example (mobile vs desktop) 
<picture>
<!-- Version for wide screens (desktop), in WebP format --> 
<source srcset="image-desktop.webp" media="(min-width: 768px)" type="image/webp"> 

<!-- Version for mobile devices, in WebP format --> 
<source srcset="image-mobile.webp" media="(max-width: 767px)" type="image/webp"> 

<!-- JPEG fallback for browsers that don't support WebP --> 
<img src="image-fallback.jpg" alt="A responsive image for all devices">
</picture>

📌 How it works:

  • If the screen is wider than 768px, image-desktop.webp
    • will be used
  • If it is narrower than 768px, image-mobile.webp
  • If the browser does not support WebP, JPEG fallback is loaded

5. <slot> (Shadow DOM)

The <slot> tag is used in Web Components to define placeholders for content. It only works inside a Shadow DOM.

✅ When to use it
  • Creating reusable components
  • Flexible layout with dynamic content
💡 Example 
<template id="myComponent"> 
<style> 
div { border: 1px solid gray; padding: 10px; } 
</style> 
<div> 
<slot></slot> 
</div>
</template>

<script> 
class MyComponent extends HTMLElement { 
constructor() { 
super(); 
const shadow = this.attachShadow({ mode: 'open' }); 
const template = document.getElementById('myComponent').content.cloneNode(true); 
shadow.appendChild(template); 
} 
} 
customElements.define('my-component', MyComponent);
</script>

<my-component> 
<p>This is slotted content!</p>
</my-component>

6. <output>

The <output> tag is used to show results of calculations or user interactions in a semantic way. It is useful with forms and JavaScript.

✅ When to use it
  • Show results calculated from input
  • Live interaction with the user
💡 Example 
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
<input type="number" name="a"> +
<input type="number" name="b"> =
<output name="result">0</output>
</form>

7. <datalist>

The <datalist> tag allows you to create a drop-down menu of suggestions associated with an input field. It is useful for offering predefined options while maintaining the possibility of free entry.

✅ When to use it
  • To suggest common values ​​(e.g. cities, languages, currencies…)
  • To improve the UX of text inputs without limiting the user
💡 Example 
<label for="browser">Choose your 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="Work">
</datalist>

Conclusion

These tags represent some of the most powerful semantic and functional innovations in HTML5. Using them correctly allows you to write more accessible, maintainable, and performant code, often eliminating the need for external libraries.



Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
/>whatsapp: Techelopment
youtube: @techelopment