DEV Community

loading...
Cover image for 24 HTML Tags you may not know.

24 HTML Tags you may not know.

kiranrajvjd profile image Kiran Raj R Updated on ・6 min read

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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> 
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide