Hidden Gems: 5 Overlooked HTML Tags or Attributes to Enhance Your Web Pages

1. The <q\> tag

<q> Hi 👋, my name is Saurav Swain </q>

Browsers by default will generally surround text within the <q\> tag with quotation marks.

see use case below 👇

2.The <ruby\>, <rt\>, and <rp\> tags

The Ruby <ruby> HTML element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. It can also be used for annotating other kinds of text, but this usage is less common.

The HTML Ruby Fallback Parenthesis (<rp\>) element is used to provide fall-back parentheses for browsers that do not support the display of ruby annotations using the <ruby\> element.

One <rp\> element should enclose each of the opening and closing parentheses that wrap the <rt\> element that contains the annotation's text.

 <ruby>Saurav<rt>Firstname</rt></ruby>
 <ruby>Swain<rt>Lastname</rt></ruby>

3. The <details\> tag

The HTML <details\> tag is used to specify any additional details that a user can view or hide on click.

It can be used in conjunction with the HTML5 <summary\> tag to provide a heading that can be clicked on to expand or collapse the details as required.

This is useful when you need to show some content only when a user wants to view it.

Example below 👇

4.Contenteditable

It is a global attribute that makes the HTML content editable by the user or not! You should be careful to changes only made to visible content vs DOM content.

5.Hidden

It is a boolean attribute. It specifies that an element is not yet or no longer relevant.

It can be used to keep a user from seeing an element until some other condition has been met such as selecting a checkbox or filling an input field etc. Then we could use JavaScript to remove the hidden attribute and make it visible!