Reading time: 6 minutes
Whether you are a professional web developer, a seasoned one, a learner, or even someone who doesn't know web development, everyone knows that at the heart of every website is a simple HTML page or a set of HTML pages.
In fact, one starts diving into the world of web development by starting with HTML and its semantic tags. In fact, HTML5 is the final version of the HTML and is considered a W3C recommendation.
When it comes to HTML tags, there are so many to learn, that many of us skip and move on to other web technologies. While this is considered totally A-Okay, it's interesting to know that some HTML tags are so obscure that they are rarely used and not even heard of.
So, without further ado, let me share with you the ten HTML tags you may not know and are not heard of. However, many tags are less used apart from these and if you are interested, you can learn about them in MDN Web Docs.
1. <wbr>
<body>
<p>Lorem ipsum <wbr>dolor</wbr> sit amet
consectetur adipisicing elit. Molestiae, eveniet.</p>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Minus, corporis.</p>
</body>
As per MDN Web Docs:
The
<wbr>HTML element represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.
To explain this in simple words, the text wrapped in a <wbr> tag will not get broken by those annoying hyphens when reducing the width of the screen.
The <wbr> tag is supported in all the major browsers except IE (But who cares about IE?).
2. <var>
<p>
The volume of a box is <var>l</var> × <var>w</var> ×
<var>h</var>, where <var>l</var> represents the length
<var>w</var> the width and <var>h</var> the height of the box.
</p>
The <var> tag helps in emphasizing variables in a mathematical expression by italicizing the variables (As you usually see in Math Textbooks). They are mainly used for semantic purposes.
Fortunately, this tag is supported in all browsers including IE (Again, who cares about IE?).
3. <u>
<body>
<p>You could use this element to highlight
<u>speling</u> mistakes, so the writer can
<u>corect</u> them.</p>
</body>
The <u> tag is used to annotate text in HTML using some underlined decoration. This tag can be useful to mark incorrect text and other types of annotations.
Many of us including me know this <u> tag to give underline to the text. However, this has been deprecated in HTML4 and is replaced with the current <u> tag used for annotations.
4. <dfn>
<body>
<p>A <dfn id="def-validator">validator</dfn>
is a program that checks for syntax
errors in code or documents.</p>
</body>
A <dfn> tag is used to indicate a word to be defined within a paragraph or text. This tag looks for the parent tag like a <p> or a <section> and considers all the text inside it to be the word's definition, again for semantic purposes.
5. <cite>
<body>
<figure>
<blockquote>
<p>It was a bright cold day in April, and the clocks were striking thirteen.</p>
</blockquote>
<figcaption>First sentence in <cite><a href="http://www.george-orwell.org/1984/0.html">Nineteen Eighty-Four</a></cite> by George Orwell (Part 1, Chapter 1).</figcaption>
</figure>
</body>
The <cite> tag is used to indicate a cited work or article in a block of text. This is almost the same as <a> tag except for semantic purposes.
6. <ins> and <del>
<p>“You're late!”</p>
<del>
<p>“I apologize for the delay.”</p>
</del>
<ins cite="../howtobeawizard.html" datetime="2018-05">
<p>“A wizard is never late …”</p>
</ins>
So... technically it's 11 tags instead of 10 :) But whatever. I wanted to put the two tags together because they both do the same thing but with different purposes.
The <ins> and <del> tags are the tags that are used to indicate the insertion of text and deletion of text respectively in a given block of text.
Think of these as the same kind used in the GitHub commits where you can see the insertion and deletion of lines of code in a file.
7. <noscript> tag
Now, if you have any experience using React, then you must have come across the <noscript> tag when going through the index.html page created by the CRA tool. However, many of us including me don't know the exact reason for this. You may even think about why a <noscript> tag is used when you have a <script> tag.
To give you a clear idea, the <noscript> tag is used to define a section of the HTML page that contains the alternative text for those browsers that don't support scripting. That is, when scripting is enabled, the content inside <noscript> tag is hidden and vice versa.
8. <pre> tag
<pre>
L TE
A A
C V
R A
DOU
LOU
REUSE
QUE TU
PORTES
ET QUI T'
ORNE O CI
VILISÉ
OTE- TU VEUX
LA BIEN
SI RESPI
RER - Apollinaire
</pre>
Did you know? HTML5 by default ignores some extra spacing, blank lines, and new lines when you are typing out a text block inside any HTML tag.
However, with the <pre> tag, the text including all the spacing and blank lines is exactly formatted when rendered on the web. In other words, all the space and blank lines are considered as typed out when a <pre> tag is used.
9. <q> tag
<p>When Dave asks HAL to open the pod bay door, HAL answers: <q cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921">I'm sorry, Dave. I'm afraid I can't do that.</q></p>
The <q> tag is similar to the <em> tag in the sense that they emphasize the inline text. The <q> tag is used to emphasize a small quote in a given paragraph or a block of text.
10. <ruby> tag
<ruby>
明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>
<ruby> tag? Now that's a very weird name for an HTML tag.
Initially, I thought it may have something to do with the Ruby language but I was way out of my assumptions.
In fact, the <ruby> tag is used to annotate small text rendered above or below some text, and this tag is mainly used for text written in East Asian languages like Japanese, Chinese, etc to denote the meaning and/or pronunciation of the characters.
Fun fact: the term "ruby" refers to a unit of measurement used in typesetters for newspapers to print very small but legible text.
Conclusion
So, there you have it! These are, in my opinion, some of the obscure HTML5 tags that are rarely heard of. Apart from these, there are many more that you can check out in MDN Web Docs.
Also, I would like to tell you that you don't have to know any of these at all. Just stick with the most commonly used tags and you are good to go and become an awesome web developer!
If you like my content, you can check out my socials:
Top comments (0)