10 Unique HTML Elements You Might Not Know
Tags: webdev, programming, html, frontend
Published: 2024-07-10 15:06:49

The world of web development extends far beyond the familiar `<div>, <p>, and <img> tags`. HTML offers a treasure trove of lesser-known elements that can elevate your creations and provide a more engaging user experience. Here, we’ll delve into 10 unique HTML elements you might not have encountered yet, along with examples to illustrate their potential:

## 1. Responsive Images with <picture> and <source>:

Imagine a website that automatically delivers the perfect image size for any device. That’s the magic of <picture> and <source>. Here’s how it works:

`<picture>
  <source srcset="image-large.jpg" media="(min-width: 768px)">
  <source srcset="image-medium.jpg" media="(min-width: 480px)">  
  <img src="image-small.jpg" alt="A beautiful landscape">  
</picture>`

This code defines three image options: a large image for desktops, a medium image for tablets, and a smaller default image. The browser intelligently chooses the most suitable image based on the user’s screen size, ensuring faster loading times and a smooth experience.

## 2. Interactive Accordions with <details> and <summary>:

Want to create expandable sections that reveal more information on demand? Look no further than the dynamic duo of <details> and <summary>.

`<details>
  <summary>Click to learn more about us</summary>
  <p>We are a passionate team dedicated to building exceptional web experiences.</p>
</details>`

This code creates a collapsible section. Clicking the “Click to learn more about us” summary toggles the visibility of the paragraph content, allowing users to control information flow and declutter the page.

## 3. Annotated Text with <mark> and <del>:

Highlighting important changes or edits becomes effortless with these elements. <mark> creates a highlighted section, drawing attention to specific text:

`We are excited to announce the <mark>launch</mark> of our new website!`

On the other hand, <del> represents deleted content, typically displayed with a strikethrough effect:

`Our previous website was located at <del>www.oldwebsite.com</del>.`

## 4. Visualize Progress with <progress>:

Ever encountered a loading bar that keeps you informed? That’s the <progress> element in action.

`<progress value="50" max="100">50% complete</progress>`

This code displays a progress bar that’s half filled (value set to 50) with a maximum value of 100. You can style the appearance using CSS to create informative and visually appealing progress indicators.

## 5. Gauge Measurements with <meter>:

Similar to <progress>, the <meter> element represents a value within a defined range. Imagine a gauge that displays storage space usage:

`<meter value="70" min="0" max="100">70% full</meter>`

This code displays a gauge that’s 70% full (value set to 70) with a minimum value of 0 and a maximum value of 100. You can customize the gauge’s appearance using CSS to effectively represent various scalar measurements.

## 6. Semantic Dates and Times with <time>:

Go beyond just displaying dates and times. The <time> element provides a semantic way for search engines and assistive technologies to understand the temporal nature of your content.

`This article was last updated on <time datetime="2024-07-10">July 10, 2024</time>.`

This code not only displays the date but also embeds machine-readable information using the datetime attribute, improving accessibility and SEO.

## 7. Elegant Word Wrapping with <wbr>:

Ensuring proper text wrapping on various screen sizes can be tricky. The <wbr> element offers a subtle solution. It doesn’t force a line break but suggests to the browser that a word can be broken at that point if needed:

`This is a very long URL that can potentially overflow on narrow screens. Let's add a <wbr> for better wrapping: http://www.verylongwebsitewithalongeverylongname.com`

This code suggests a break point within the long URL, allowing the browser to wrap the text more gracefully on smaller screens.

## 8. Reusable Content with <template>:

Imagine creating a standard layout for blog posts or product listings without duplicating code. The <template> element makes this possible.

`<template id="postTemplate">
  <h2>{title}</h2>
  <p>{content}</p>
</template>

<script>
  const template = document.getElementById('postTemplate');
  const title = "A New Blog Post";
  const content = "This is some exciting content for the new blog post!";

  // Clone the template and populate its content
  const newPost = template.content.cloneNode(true);
  newPost.querySelector('h2').textContent = title;
  newPost.querySelector('p').textContent = content;

  // Append the populated template to the document body
  document.body.appendChild(newPost);
</script>`

This code defines a template with placeholders for title and content. The JavaScript then clones the template, populates the placeholders with dynamic data, and inserts the new post into the webpage.

## 9. Declarative Popups with <dialog>:

Forget complex JavaScript for modal windows. The <dialog> element offers a declarative approach.

`<dialog id="confirmationDialog">
  <h2>Are you sure?</h2>
  <p>This action cannot be undone.</p>
  <button>Yes</button>
  <button>Cancel</button>
</dialog>

<button onclick="document.getElementById('confirmationDialog').showModal()">Confirm</button>`

This code defines a modal dialog with content and buttons. Clicking the “Confirm” button opens the dialog using JavaScript’s showModal() method. You can style the dialog’s appearance using CSS for a seamless user experience.

## 10. Enhanced Form Filling with <datalist>:

Streamline form filling by providing auto-completion suggestions with <datalist>.

`<label for="color">Choose a color:</label>
<input list="colorOptions" id="color" name="color">
<datalist id="colorOptions">
  <option value="Red">
  <option value="Green">
  <option value="Blue">
</datalist>`

[Read more on FuturisticGeeks](https://futuristicgeeks.com/10-unique-html-elements-you-might-not-know/)