Bonarhyme
7 Most Neglected But Very Important HTML Elements That Can Save you From Stress

7 Most Neglected But Very Important HTML Elements That Can Save you From Stress

Bonaventure Chukwudi's photo
Bonaventure Chukwudi
·

3 min read

HTML5 which is the fifth and most recent markup language released in 2008 by Web Hypertext Application Technology Working Group (WHATWG) brought in a lot of new improvements such as the native inclusion of <audio>, <video>, <canvas>, <svg> and <math>. The update also brought in some of the most popular tags which we all use and love including <main>, <section>, <article>, <header>, <footer>, <aside>, <nav>, and <figure>.

However, there is a number of important elements which developers ignore maybe because they are ignorant of it or do not know of their importance. Therefore, I bring to you the list and use case of the 7 most ignored elements.

A. <datalist>

The <datalist> tag is used to provide an "autocomplete" feature for <input> elements. It enables users to see a drop-down list of pre-defined options as they input data.

<form action="/" method="post">
  <label for="names">Choose your name from the list:</label>
  <input list="names" name="name" id="name">
  <datalist id="names">
    <option value="Joh">
    <option value="Davide">
    <option value="Maryy">
    <option value="Sandraa">
    <option value="Merlin">
  </datalist>
  <input type="submit">
</form>

B. <details>

The <details> tag is often used to create an easy dropdown that the user can open and close. By default, the dropdown is closed. When open, it expands, and displays the content within.

<details>
  <summary>About Bonarhyme</summary>
  <p>I am a fullstack web developer.</p>
  <p>You can add other elements under here</p>
</details>

C. <meter>

The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge. Therefore it shouldn't be use to measure progress.

<label for="sd_1">Memory card usage 1:</label>
<meter id="sd_1" value="7" min="0" max="10">2 out of 10</meter><br>

<label for="sd_2">Memory card usage 2:</label>
<meter id="sd_2" value="0.6">60%</meter>

D. <progress>

The <progress> tag represents the completion progress of a task. The <progress> tag is not suitable for representing a gauge (e.g. disk space usage or relevance of a query result). To represent a gauge, use the <meter> tag instead.

This tag is used in conjuction with JavaScript to display progression.

<label for="file">Downloading progress:</label>
<progress id="file" value="46" max="100"> 46% </progress>

E. <track>

The <track> tag specifies text tracks for <audio> or <video> elements.

This element is used to specify subtitles, caption files or other files containing text, that should be visible when the media is playing.

Tracks are formatted in WebVTT format (.vtt files).

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="en.vtt" kind="subtitles" srclang="en" label="English">
</video>

F. <wbr>

The <wbr> (Word Break Opportunity) tag specifies where in a text it would be ok to add a line-break.

When a word is too long, the browser might break it at the wrong place. You can use the <wbr> element to add word break opportunities.

<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>

G. <bdi>

The <bdi> stands for Bi-Directional Isolation. This tag isolates a part of text that might be formatted in a different direction from other text outside it.

This element is useful when embedding user-generated content with an unknown text direction.

 <p>User <bdi>إيان</bdi>: 90 points</p>

Follow me on twitter bonarhyme

Source: w3schools.com

HTML5JavaScript