In this devs tips edition, we’ve gathered some HTML tags that will help you improve your coding skills!

1. Abbreviation Tag

Instead of using spans, spend less time coding with the abbreviation tag.

This HTML tag allows you to display a tooltip when hovering over it with your mouse. 

The ‘title’ attribute is responsible for displaying the tooltip.

Abbreviation tag example:

<h1>

  The most amazing

  <abbr title="Go to BitsKingdom site to get in touch with us!"> kingdom </abbr>

  you could ever imagine

</h1>

2. Optgroup Tag

When using a <select> in HTML for displaying options, we may want some dropdown options to show as unavailable.

Instead of using <options> and coding for each, use <optgroup>.

This tag includes global attributes, such as disabled and label, allowing you to code way more quickly! 

Example of HTML optgroup tag:

<label for="bitsKingdom">Bits Kingdom:</label>
<select id="bitsKingdom" name="bitsKingdom">
  <optgroup label="Happy Place"></optgroup>
  <option value="kingdom">Kingdom</option>
  <option value="developer">Developer</option>
  <option value="designer">Designer</option>
  <optgroup label="Party"></optgroup>
</select>

Result:

3. Acronym Tag

Instead of refactoring or using spans for different styles, code less using the acronym tag!

With this HTML tag you can abbreviate the title or name and easily change its colors and styles. It also provides a tooltip that displays the title. 

<p>

  The website design of <acronym title="Bits Kingdom">BK</acronym> will blow your mind!

</p>

If you didn’t use these tags and found them helpful, you’ll probably want to keep improving! Check out this article and speed up your coding skills even more!

✍️ This article was written by our copywriter, Sofia, in collaboration with our DEV expert, Enrique.