HTML offers a vast array of elements that can enhance the way you present content on the web. While most developers are familiar with standard tags like <div>, <p>, and <a>, there are some lesser-known elements that can be quite useful. Here are five unique HTML elements you might not know about:

1. <q></q> Tag

The <q> tag defines a short quotation. It’s perfect for including inline quotes within your text. This element is intended for short quotations that don't require paragraph breaks; for long quotations use the <blockquote> element.

It's particularly useful in articles, blogs, or essays where referencing someone else's words within the body of your text enhances clarity and credibility. It is also most often in conjuction with <cite></cite> tags.

Here’s an example:

<q>Hi 👋, my name is Jane.</q>

2. <s></s> Tag

The <s> HTML element renders text with a strikethrough, or a line through it. Use the <s> element to represent things that are no longer relevant or accurate. The <s> tag should not be used to define deleted text in a document, use the <del> tag for that.

This tag is particularly effective in e-commerce, educational materials, or content revisions where you need to show what has been updated or corrected.

Here’s an example:

<p>Old Price <s>100</s></p>
<p>New price 50</p>

3. <mark></mark> Tag

The <mark> HTML element represents text which is marked or highlighted for reference or notation purposes due to the marked passage's relevance in the enclosing context.

Use the <mark> tag when you want to draw attention to specific text within a paragraph or section, such as key points, warnings, or items that require further action. It's useful in tutorials, important notices, or highlighting search results.

Don't use <mark> for syntax highlighting purposes; instead, use the <span> element with appropriate CSS applied to it.

Here’s an example:

<p>Hi, you should <mark>Follow me</mark> for more amazing content. Thanks!</p>

4. <sup></sup> Tag

The <sup> HTML element specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text.

The <sup> element should only be used for typographical reasons—that is, to change the position of the text to comply with typographical conventions or standards, rather than solely for presentation or appearance purposes.

Here’s an example:

<p>
  One of the most common equations in all of physics is <var>E</var>=<var>m</var
  ><var>c</var><sup>2</sup>.
</p>

5. <details></details> Tag

The <details> HTML element creates a disclosure widget where information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the <summary> element.

Use the <details> tag to hide content that is not immediately necessary but can be revealed if the user wants more information. It’s ideal for FAQs, additional reading, toggling descriptions, or any content where you want to manage space effectively.

Fully standards-compliant implementations automatically apply the CSS display: list-item to the <summary> element. You can use this to customize its appearance further.

Here’s an example:

<details open>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>

6. <menu></menu> Tag

The <menu> HTML element is described in the HTML specification as a semantic alternative to <ul>, but treated by browsers (and exposed through the accessibility tree) as no different than <ul>. It represents an unordered list of items (which are represented by <li> elements).

You can use this tag to create a toolbar and make your group commands that a user might execute.

Here’s an example:

<div class="news">
  <a href="#">NASA’s Webb Delivers Deepest Infrared Image of Universe Yet</a>
  <menu>
    <li><button id="save">Save for later</button></li>
    <li><button id="share">Share this news</button></li>
  </menu>
</div>

Result⤵️

7. <aside></aside> Tag

The <aside> HTML element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.

You can use this element for any content not directly related to the main content of the page. It works well for displaying advertisements, related posts, promotional content, blockquotes, nav elements, and so on.

Here’s an example:

<article>
  <p>
    The Disney movie <cite>The Little Mermaid</cite> was first released to
    theatres in 1989.
  </p>
  <aside>
    <p>The movie earned $87 million during its initial release.</p>
  </aside>
  <p>More info about the movie…</p>
</article>

Result⤵️

8. <search></search> Tag

The <search> HTML element is a container representing the parts of the document or application with form controls or other content related to performing a search or filtering operation.

The <search> element semantically identifies the purpose of the element's contents as having search or filtering capabilities. The search or filtering functionality can be for the website or application, the current web page or document, or the entire Internet or subsection thereof.

The tag helps provide a better user experience on mobile devices with search-optimized keyboards.

Here’s an example:

<search>
    <form action="./search/">
      <label for="movie">Find a Movie</label>
      <input type="search" id="movie" name="q" />
      <button type="submit">Search</button>
    </form>
  </search>

Result⤵️

9. <datalist></datalist> Tag

You might be familiar with the select element that lets you provide users with a bunch of options to select from. A similar element is the datalist element.

The only difference between them is the datalist element provides suggestions instead of a finite set of options. Users can also type in their own input if none of the suggestions match their requirements, whereas when using the select element, users must pick from the list of options in the dropdown.

You can use <datalist> with the input element so the user can type anything they want. Then if it matches the values in the datalist, the user can select that value.

In order to link the input element with the datalist, you'll need to use a list attribute on the input element. The value of the list attribute must be the id of the datalist. 

Here’s an example:

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
  <option value="Chocolate"></option>
  <option value="Coconut"></option>
  <option value="Mint"></option>
  <option value="Strawberry"></option>
  <option value="Vanilla"></option>
</datalist>

Result⤵️

10. <optgroup></optgroup> Tag

The <optgroup> tag is used to group related options within a <select> dropdown list. This makes the list easier to navigate, especially when there are many options, by categorizing them under different headings.

When to Use:

• To organize options in a long dropdown menu.
• To enhance the user experience by logically grouping related options.

Here’s an example:

 <div>
        <label for="cars">Choose a car:</label>
        <select id="cars" name="cars">
          <optgroup label="German Cars">
            <option value="bmw">BMW</option>
            <option value="audi">Audi</option>
            <option value="mercedes">Mercedes-Benz</option>
          </optgroup>
          <optgroup label="Japanese Cars">
            <option value="toyota">Toyota</option>
            <option value="honda">Honda</option>
            <option value="nissan">Nissan</option>
          </optgroup>
        </select>
      </div>

Result⤵️

These unique HTML elements can be extremely helpful in specific scenarios, enhancing the semantic richness and functionality of your web content. Next time you’re building a webpage, consider incorporating these tags to improve the user experience and accessibility of your site.