Introduction:

At the heart of HTML lies a diverse set of elements known as HTML tags. These tags serve as the essential building blocks of web pages, dictating how content is organized, styled, and rendered in browsers.

These tags are enclosed in <> symbols

This blog post aims to shine a spotlight on those unsung heroes of HTML – the not-so-common HTML tags. While many developers are well-acquainted with the popular tags like <div>, <p>, and <a>, there exists a trove of lesser-known HTML tags that possess the potential to elevate your web development game.

Tags:

1. <details> and <summary>

• The <details> tag contains a <summary> tag, creating a disclosure widget.

• The <summary> tag provides the visible text that the user can click on to toggle the visibility of the content inside the <details> element.

• The content inside the <details> tag consists of two paragraphs that will be revealed or hidden when the user interacts with the summary.

    <details>
        <summary>Click to reveal more information</summary>
        <p>This is the additional information that can be revealed or hidden.</p>
        <p>It's a useful feature for providing extra details without cluttering the main content.</p>
    </details>
  

  

  

2. <mark>

• The <mark> tag in HTML is used to highlight or mark parts of text within a document.

• This tag is typically used to visually distinguish or emphasize specific portions of the text.

• It's mainly a presentational element and doesn't carry any specific semantic meaning.

    <p>This is a <mark>highlighted</mark> text.</p>
    <p>Here is some <mark>important</mark> information.</p>
  

  

  Note:- The appearance of the highlighting may vary depending on the browser, but it is commonly displayed with a yellow background.

3. <abbr>

• The <abbr> (abbreviation) tag in HTML is used to define abbreviations or acronyms.

• It is often used to provide additional information or clarification about an abbreviation when the user hovers over it.

    <p>
      <abbr title="HyperText Markup Language">HTML</abbr> is used for creating web pages.
    </p>
  

  

  When hovered on HTML Text we'll get the bottom result

  

4. <cite>

• The <cite> tag in HTML is used to define the title of a creative work, such as the title of a book, play, song, movie, or other creative pieces.

• It is often used to properly cite the source of a quote or a reference within a document.

• Using this <cite> tag helps convey the semantic meaning of the cited work and aids in creating a well-structured and accessible document.

    <p>
      The famous novel <cite>To Kill a Mockingbird</cite> was written by Harper Lee.
    </p>
  

  

5. <wbr>

• The <wbr> (word break opportunity) tag in HTML is used to suggest a possible line break within a word.

• It is a non-printable character that indicates a point at which the browser may break a line if necessary, especially in cases where automatic word wrapping occurs.

    <p>This is a very long word: supercalifragilisticexpialidocious</p>
    <p>This is a very long word: supercalifragilistic<wbr>expialidocious</p>
  

  

6. <dialog>

• The <dialog> tag in HTML is used to create a dialog box or modal within a web page.

• It's intended to represent a conversation or interaction between the user and the application.

• The dialog element can be styled and controlled using JavaScript for various interactive purposes.

    <dialog open>This is an open dialog window</dialog>
  

  

7. <menu>

• The <menu> element in HTML represents a list of commands or options within a user interface.

• It can be used to create contextual menus, toolbars, and other similar navigational structures.

• The contents of the <menu> element typically consist of <li> (list item) elements representing menu items or commands.

    <menu>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </menu>
  

  

  Note:- In modern web development, other approaches using <ul> (unordered list) or <nav> elements, combined with CSS and JavaScript, are often used to create custom menus and navigation structures.

---

Closing Thoughts:

• Express the excitement of discovering and incorporating less common HTML tags.

• Reiterate the impact these tags can have on web development.

• Invite readers to share their experiences and favorite uncommon HTML tags.