10 Unique HTML Elements You Might Not Know

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

Imagine a website that automatically delivers the perfect image size for any device. That’s the magic of and . 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 and :

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

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

Highlighting important changes or edits becomes effortless with these elements. 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, represents deleted content, typically displayed with a strikethrough effect:

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

4. Visualize Progress with :

Ever encountered a loading bar that keeps you informed? That’s the 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 :

Similar to , the 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 :

Go beyond just displaying dates and times. The 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 :

Ensuring proper text wrapping on various screen sizes can be tricky. The 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 :

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

`

{title}

{content}

<br> const template = document.getElementById(&#39;postTemplate&#39;);<br> const title = &quot;A New Blog Post&quot;;<br> const content = &quot;This is some exciting content for the new blog post!&quot;;</p> <p>// Clone the template and populate its content<br> const newPost = template.content.cloneNode(true);<br> newPost.querySelector(&#39;h2&#39;).textContent = title;<br> newPost.querySelector(&#39;p&#39;).textContent = content;</p> <p>// Append the populated template to the document body<br> document.body.appendChild(newPost);<br> `

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 :

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

`

Are you sure?

This action cannot be undone.

Yes
Cancel

Confirm`

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 :

Streamline form filling by providing auto-completion suggestions with .

<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