We all know about HTML, it help us to structure the contents, there are many tags which help us to develop the web application quickly, there also some tags that we may never use because we don't know it existed. Here I list 24 html tags that may be useful to you at some point in your web development career. You can find the tags in action in this codepen. If you know any interesting tags let me know. Hope this list will help you in someway, happy coding
1. address element
The address element is a container element which is used to represent contact information or group contact information together.
<address>
<a href="mailto:kiran2345raj@gmail.com">kiranraj</a>
<p>Location : Kerala, India</p>
</address>
2. data element
The data element links a given content with a machine readable translation. The data element has one attribute, value, which specifies the machine readable translation. By default the value is not visible to the user.
<ul>
<li><data value="1972">C Language</data></li>
<li><data value="1979">C++ Language</data></li>
<li><data value="1995">JavaScript</data></li>
</ul>
3. datalist element
The datalist elements contains a set of option elements. datalist can be used to create auto complete function for input elements in HTML.
<label for="SELECT">Pick a country</label>
<input list="country" id="SELECT" />
<datalist id="country">
<option value="INDIA">
<option value="USA">
<option value="UK">
<option value="GERMANY">
<option value="RUSSIA">
</datalist>
4. bdi element (Bi Directional Isolation)
The bdi element tells the browser to treat the content inside the bdi element differently, with respect to the directionality.
<p>Hello World <bdi>مرحبا بالعالم</bdi></p>
5. bdo element (Bi Directional Override)
The bdo element overrides the current text direction of the text enclosed in the bdo tag, i.e. the text enclosed inside the bdo tag will have a direction specified by the dir attribute of the bdo tag.
<p>Hello World <bdo dir="rtl">Hello World</bdo></p>
6. code element
The code element is used to distinct program code snippet from normal text, the default font used to display text enclosed in code tag is monospace font.
<p>To install create-react-app use <code>npx create-react-app</code>.</p>
7. dl element (Description List)
The dl element is used to define a description list. The list consists of term or groups of terms each represented by dt tag and a corresponding detail for each terms enclosed in the dd tag.
dt element (Description Term)
The dt element is used to define a description term inside the description list.
dd element (Description Details)
The dt element is used to define a description detail inside the description list.
<!-- 7. Description Element -->
<dl>
<dt>bdi tag</dt>
<dd>The bdi tag help to display part of the text in the opposite direction</dd>
<dt>bdo tag</dt>
<dd>The bdo tag overrides the default text direction.</dd>
</dl>
8. kbd element(Keyboard Input Element)
The kbd element is an inline tag which represent user input from a keyboard or any other text entry device. By default kbd use a monospace font.
<!-- 8. Keyboard input Element -->
<p>Use <kbd>Ctrl</kbd> + <kbd>S</kbd> to save your work.</p>
9. mark element
The mark tag is used to highlight text content, it's an inline element.
<!-- 9. Mark Element -->
<p>Use <mark>Ctrl+ S</mark> to save your work.</p>
10. Meter Element
The meter tag is used to define a horizontal meter. It has a few attributes like value, min, max, low, high and optimum. The Value represent the current numeric value and it must be between min and max value. Min and max value represent the upper and lower bounds of the meter tag. Low and high represent the upper bound of low value and lower bound of the high value. Low must be higher than the min value and high must be lower than the max value.
<!-- 10. Meter Element -->
<label for="Mark">Mark:</label>
<meter id="Mark" min="0" max="100" value="80"></meter>
11. noscript element
The noscript tag contents are displayed only if the browser disabled JavaScript.
<!-- 11. Noscript Element -->
<noscript>
<p>JavaScript is disabled in the browser</p>
</noscript>
12. object element
The object tag defines a container for external resources.
<!-- 12. Object Element -->
<object type="image/jpg"
data="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80"
width="250"
height="200">
</object>
13. Output
The output is a container element which can be used to display result of a calculation/user action.
<!-- 13. Output -->
<form oninput="sum.value = parseInt(num1.value) + parseInt(num2.value)">
<input type="number" name="num1" value="4"> +
<input type="number" name="num2" value="7"> =
<output name="sum">11</output>
</form>
14. progress element
The progress element shows a progress bar, which take two properties max and value.
<!-- 14. Progress -->
<progress id="file" max="100" value="70"> 70% </progress>
15. sub element (Subscript)
The text enclosed in sub element cause the text to be displayed as a subscript
<!-- 15. sub element -->
<p>H<sub>2</sub>O</p>
16. sup element (Superscript)
The sup element style the text to be displayed as a superscript
<!-- 16. sup element -->
<p> (x + y)<sup>2</sup> = x<sup>2</sup> + 2xy + y<sup>2</sup></p>
17. details element
The details element create a disclosure widget that hides information, the information visible only when we click on the content of the summary element inside the details element.
<!-- 17. Details Element -->
<details>
<summary>Address</summary>
<a href="mailto:kiran2345raj@gmail.com">kiranraj@gmail.com</a>
<p>Location : Kerala, India</p>
</details>
18. time elements
The time element represent time in 24 hour clock, it's a inline element.
<!-- 18. Time Element -->
<p>
The IPL starts at <time datetime="2021-05-04T20:00">20:00</time>.
</p>
19. var element
The var tag is used to represent the name of a variable in a mathematical or programming expression.
<!-- 19. var Element -->
<div>
<p>Var Element</p>
<p>let <var>x</var> = 10</p>
</div>
20. wbr element (Word break Opportunity)
When we enter a lengthy text the browser automatically add line breaks to keep the paragraph's width under a specified limit, you can use the wbr element to indicate the browser the idea position to break the line.
<!-- 20. wbr Element -->
<div class="wbr">
<p>Wbr Element</p>
<p>helloworld,welcome</p>
<p>hello<wbr>world,<wbr>welcome</p>
</div>
21. abbr element (Abbreviation)
The abbr element represents a abbreviation, which have an optional title attribute where we can place the expansion for the abbreviation. This is the replacement of the element, acronym element is supported by some browsers.
<!-- 21. abbr Element -->
<div class="wbr">
<p>
<abbr title="kiran raj r">krr</abbr>
</p>
</div>
22. pre element
The pre element represents preformatted text, the browser will displays the text as in the same order as written in the html code and the white space is not ignored.
<!-- 22. pre Element -->
<div>
<p>Pre Element</p>
<pre>
<code>
function greet(name) {
console.log('Good Morning ' + name + '!');
}
sayHello('kiran raj');
</code>
</pre>
</div>
23. q element
The q element is used to represent short inline quotation, cite is used to represent the reference of the quote. For long quotations use blockquote element.
<!-- 23. q Element -->
<div>
<p>q and cite Elements</p>
<q>Imagination is more important than knowledge.
<cite>Albert Einstein</cite></q>
</div>
24. samp element
The samp element is used to represent inline sample output from a computer program. Monospaced font is used by browser by default.
<!-- 24. samp Element -->
<p>samp Elements</p>
<p> x + y gives <samp>undefined</samp> </p>
If you find any errors please comment, any additional knowledge regarding this topic is welcomed. If you like this post take a look at my other posts, thank you.
Top comments (0)