HTML is the backbone of the web and is used for creating web pages and web applications. While you might already be familiar with numerous HTML tags, there exist some less-discussed tags that can enhance the depth of your web pages.

In this blog post, I’ll introduce you to 7 HTML tags that can elevate your web development skills.

Let’s get started!

Table of Contents

<abbr>

The <abbr> HTML tag represents an abbreviation or acronym of a phrase or longer word.

This tag helps improve accessibility and user understanding by providing an explanation when a user hovers over it.

This tag can be used with the title attribute and the value of the title attribute will be shown when the user hovers over the <abbr> tag content.

<p>
  <abbr title="World Wide Web">WWW</abbr> is a fundamental part of the internet.
</p>

<base>

The <base> HTML tag defines the base URL for all relative URLs in a web page.

This is handy when you want to create a shared starting point for all relative URLs on a web page, making it easier to navigate and load resources.

<head>
   <base href="https://shefali.dev" target="_blank" />
</head>
<body>
   <a href="/blog">Blogs</a>
   <a href="/get-in-touch">Contact</a>
</body>

There can be only one single <base> tag in the document and it should be inside the <head> tag.

<cite>

The <cite> HTML tag is used to specify the title of a creative work such as quoted content, books, websites, paintings, etc.

It helps maintain proper citation formatting and semantics.

<blockquote>
   <p>Life is what happens when you're busy making other plans.</p>
   <cite>John Lennon</cite>
</blockquote>

<details> and <summary>

When you want to include collapsible content on your web page, then you can use the <details> and <summary> tags.

The <details> tag creates a container for hidden content, while the <summary> tag provides a clickable label to toggle the visibility of that content.

<details>
  <summary>Click to expand</summary>
  <p>This content can be expanded or collapsed.</p>
</details>

<fieldset> and <legend>

The <fieldset> tag is used to group related elements in a form and the <legend> tag is used with <fieldset> to define a title for the <fieldset> tag.

This is useful for creating more efficient and accessible forms.

<form>
   <fieldset>
      <legend>Personal details</legend>
      <label for="firstname">First name:</label>
      <input type="text" id="firstname" name="firstname" />
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" />
      <label for="contact">Contact:</label>
      <input type="text" id="contact" name="contact" />
      <input type="button" value="Submit" />
   </fieldset>
</form>

<mark>

The <mark> tag is used to highlight text on your web pages.

When you need to emphasize or highlight certain text, then you can use the <mark> tag. It applies a background color to the marked text and makes it stand out.

<p>This is a <mark>highlighted text</mark> within a paragraph.</p>

<optgroup>

The <optgroup> tag is used to group related options in a <select> HTML tag. This can be used when you are working with large dropdown menus or a long list of options.

<select>
   <optgroup label="Fruits">
      <option>Apple</option>
      <option>Banana</option>
      <option>Mango</option>
   </optgroup>
   <optgroup label="Vegetables">
      <option>Tomato</option>
      <option>Broccoli</option>
      <option>Carrot</option>
   </optgroup>
</select>

Conclusion

In this blog post, you’ve learned about the 7 less-discussed HTML tags that can enhance the depth of your web pages and elevate your web development skills.

Thanks for reading.

For more content like this click here.

You can also follow me on X(Twitter) for getting daily tips on web development.

Keep Coding!!

7 HTML Hidden Gems: HTML Tags You Should Know About