10 HTML Tags You May Not Be Used Till Today

8 HTML Elements You're Not Using (and Should Be)

 

If you are hardcore front-end developer and you think you are aware HTML completely or probably feel it doesn’t have any more unknowns. But this time you may surprised after reading this article, I’ll show you 10 HTML tags which you may not be used or maybe even aren’t yet aware to how can you maintaina of your web pages.

Also Check: How To Center Anything With CSS

---

1. <meter>

The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.

Examples: Disk usage, the relevance of a query result, etc.

<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>

---

2. <progress>

The HTML <progress> Element is used to view the completion progress of a task. While the specifics of how it's displayed is left up to the browser developer, it's typically displayed as a progress bar. Javascript can be used to manipulate the value of progress bar.

Example:

<progress value="22" max="100"></progress>

---

3. <cite>

The <cite> tag defines the title of a work (e.g. a book, a song, a movie, a TV show, a painting, a sculpture, etc.).

Example:

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

---

4. <q>

The <q> tag defines a short quotation. Browsers normally insert quotation marks around the quotation.

Example: 

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

---

5. <pre>

The <pre> tag defines preformatted text. Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

Example:

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks </pre>

---

6. <kbd>

The HTML Keyboard Input Element (<kbd>) represents user input and produces an inline element displayed in the browser's default monospace font. This tag is not deprecated, but it is possible to achieve richer effect with CSS.

Example:

<p>Type the following in the Run dialog: <kbd>cmd</kbd><br />Then click the OK button.</p> <p>Save the document by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd></p>

---

7.  <samp>

The <samp> tag is a phrase tag. It defines sample output from a computer program. It is usually displayed in the browser's default monotype font (such as Lucida Console).

Example: 

<p>Regular text. <samp>This is sample text.</samp> Regular text.</p>

---

8. <small> 

The HTML Small tag (<small>) makes the text font size one size smaller (for example, from large to medium, or from small to x-small) down to the browser's minimum font size.  In HTML5, this element is repurposed to represent side-comments and small print, including copyright and legal text, independent of its styled presentation.

Example: 

<p>This is the first sentence.  <small>This whole sentence is in small letters.</small></p>

---

9. <output>

The <output> tag represents the result of a calculation (like one performed by a script).

Example: 

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100
  +<input type="number" id="b" value="50">
  =<output name="x" for="a b"></output> </form>

---

10. <dfn>

The <dfn> tag represents the defining instance of a term in HTML. The defining instance is often the first use of a term in a document. The nearest parent of the <dfn> tag must also contain the definition/explanation for the term inside <dfn>.

Example:  

<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>

---

Conclusion: 

So what you think after reading this article ? This kind of article may surprising you and refresh your knowledge with semantic  elements of html. If you have any question related this topic please comment here.