5 HTML Elements You Might Not Know How to Use

Familiar yet unknown, or utterly new, it happens that we miss out parts of the HTML syntax that might turn out to be important knowledge we can put to some good use. That’s why whether it’s the new features of HTML or its less known applications that haven’t yet come into your radar, we cover them quite often on this site.

In today’s post, we’ll look into five HTML elements, some of which you may frequently use, but probably not at its full potential.

Read Also: 5 HTML Features You Might Not Know About

1. <data>

The <data> element has a similar function to the data-* attributes. It can be used to provide machine-readable data for a user-friendly content. The value attribute of this element carries the added information.

<p>The three volumes of the Lord of the Rings novel are:
  <data value='0-345-24032-4'>The Fellowship of the Ring</data>,
  <data value='0-345-23510-X'>The Two Towers</data>, and
  <data value='0-345-24034-0'>The Return of the King</data>.</p>
<p><i>ISBNs of the books mentioned in this page:</i>
  <span id='ISBNListBlank'></span></p>

In the above HTML, the ISBN of each book is added in the value attribute of the <data> element that encloses the book title. On the book market, ISBN is used to uniquely identify a book.

const ISBNListBlank = document.querySelector('#ISBNListBlank')
const dataElements = document.querySelectorAll('data');
const ary = [];
dataElements.forEach((dataElement)
  => ary.push(dataElement.textContent + ' : ' + dataElement.value))
ISBNListBlank.textContent = ary.join(', ')

To roughly show you how to extract the <data> values in JavaScript, the above script extracts the ISBNs from the <data> tag and displays them, along with the book titles, at a designated place in the page.

2. <label>

Most likely you’re already familiar with the <label> element, however it’s not just for checkboxes. It can control other labellable elements as well, performing their actions just like it performs the actions of checkboxes.

You only have to use the same value for the id attribute of the HTML element you want to control and the for attribute of the belonging <label> tag.

<label for='alertBtn'>
  Clicking on this text clicks the button below.
</label>
<button id='alertBtn' onclick="javascript:alert('Hello')">
  ALERT
</button>

Clicking the text of <label> will trigger the click event of <button> and show the given alert message.

3. <ruby>

This element is mostly used for East-Asian languages, however this isn”t its only use case. The purpose of <ruby> is simply to add annotation or pronunciation for texts, and you can do just that with English content as well.

The element encloses two main sub-elements, namely <rb> and <rt>. The <rb> tag holds the text you want to annotate (called the base text) and <rt> holds the annotation itself.

<p>A person who sets up a business or businesses, taking on financial
risks in the hope of profit, is called
<ruby><rb>entrepreneur</rb><rt>ˌɒntrəprəˈnəː</rt></ruby>;
a promoter in the entertainment industry.</p>

The pronunciation of the “entrepreneur” word is added using the <ruby> element inside the paragraph. The word itself is wrapped in the <rb> tag and the pronunciation in <rt>.

This is how the output looks like:

4. <ol>

The <ol> element for ordered lists is another element that you may be familiar with. It creates a list that has numbered elements, as opposed to an unordered list created with <ul>.

You might have known about the ordering, but did you know that the order can be reversed? Instead of an incrementing order, decrementing numbering can also be performed by <ol>, using the reversed attribute.

<ol reversed type=I>
  <li>Scrabble</li>
  <li>Mahjong</li>
  <li>Monopoly</li>
  <li>Chess</li>
  <li>Jenga</li>
</ol>

The reversed attribute reverses the numbering, while the type attribute determines the type of numbering. The capital I denotes capital roman numbering.

This is how it looks like on the screen:

5. <dfn>

The <dfn> element is meant to wrap a term that is defined by its surrounding text. The text enclosed by the <dfn> tag is styled by browsers with italics, meaning this is the term being defined.

You can add the definition of the term inside <dfn> in the value of its title attribute, which is useful to define words that aren’t necessarily defined by their surrounding text.

The <dfn> element works similarly to <abbr> which displays the meaning of an abbreviation given in its title attribute when the user hovers over the element.

<p>There's a
<dfn title='a division or contrast between two things
that are or are represented as being opposed or entirely different'>
  dichotomy
</dfn>
between the design and the prototype.</p>

This is its default browser styling, however on a production site, you may want to use a different style:

Taking the cursor over the defined word, the page will show the definition added in the title attribute.

Read Also: A Look Into Proper HTML5 Semantics