10 HTML Elements You May Have Never Heard Of

HTML (hypertext markup language) is the standard markup language for building web pages, think of it like the building blocks or the structure of web pages. There are over 100 html tags, some of them have semantic meaning while others (<span> and <div>) do not. Using tags with semantic meaning improves accessibility, improves SEO, and results in code that is cleaner and easier to read.

It is also easier to use a semantic element because it comes with a lot for free. For example if you use a div as a button, you will need to add a role, aria-pressed, a tab index, and style the div so the user knows it is a button. All of which would come with using a button element.

Being familiar with elements that are lesser known will allow you to use semantic elements in more cases. And less importantly score better on HTML tag memory quizzes (like this one: https://codepen.io/plfstr/full/zYqQeRw) and be able to boast on slack with your co-workers.

Element vs Tag

Sometimes Element and Tag are used interchangeably but there is an important difference. An HTML element starts with a start tag, has some content and ends with an ending tag.
<p>I am an HTML element</p>
So in this case the whole thing <p> to </p> is the element while '

'is the individual html tag.

10 Elements:

1) <ruby> (<rp> and <rt>)

Annotations rendered above, below, or next to base text. Usually this is used for pronunciation or meaning of East Asian characters. <rp> is used as a fallback parentheses for browser that do not support ruby annotations and <rt> specifies the ruby text component.

Example:

<ruby>
  こんにちは <rp>(</rp><rt>Kon'nichiwa</rt><rp>)</rp>
</ruby>

2) <track>

A child of video or audio elements, lets you add.vtt files as captions.

3) <portal>

Allows for embedding of an HTML page, more limited than an <iframe> as it cannot be interacted with. It is considered experimental and does have accessibility concerns with its use.

4 and 5 <figure> and <figcaption>

Self contained content (such as a code snippet, quote, audio, image, etc), referred to be primary content but is not redundant information. You should be able to remove the figure and not affect the understanding of the primary content.
<figcaption> is a caption for a <figure> and is a child element to figure. Is not a substitute for alt text.

Example:

<figure>
    <img src="https://images.unsplash.com/photo-1533738363-b7f9aef128ce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80"
         alt="Gray cat wearing orange and rose gold sunglasses">
    <figcaption>A cool cat Photo by Raoul Droog on Unsplash</figcaption>
</figure>

6) <menu>

An unordered list of items, semantic alternative to a <ul>. Browsers and the accessibility tree see it as a <ul>.

7) <meter>

A scalar value within a known range. Like the health bar in a video game.

Example:

<label>Energy Level:</label>
<meter min="0" 
       max="100"
       low="33" high="66" optimum="80"
       value="75">
</meter>

8) <colgroup>

Group of columns within a table, useful for applying styles of entire columns instead of individual cells.

9) <caption>

The title or caption of a table. It should be inserted just after the <table> tag and describe the table. This is also an accessibility best practice. Screen reader users will be read the caption and not have to infer the table from its content.

Example for 8 and 9:

<table>
  <caption>Taco Ratings</caption>
  <colgroup>
    <col style="background-color:#BEDFB9;">
    <col style="background-color:#FFFFFF">
    <col style="background-color:#F0908A">
  </colgroup>
  <tr>
    <th scope="col">Type</th>
    <th scope="col">Rating</th>
    <th scope="col">Price</th>
  </tr>
  <tr>
    <td>Chicken</td>
    <td>4/5</td>
    <td>$3.99</td>
  </tr>
  <tr>
    <td>Steak</td>
    <td>3.5/5</td>
    <td>$4.49</td>
  </tr>
  <tr>
    <td>Veggie</td>
    <td>5/5</td>
    <td>$3.19</td>
  </tr>
</table>

10) <fieldset>

Groups several controls and their labels with in a web form. Helpful when using a number of checkboxes or radio buttons as it groups the inputs and labels together making a form easier to navigate.

<fieldset>
   <legend>Pick your favorite Tacos</legend>
   <input type="checkbox" name="chicken" value="chicken">
   <label for="chicken">Chicken</label>
   <input type="checkbox" name="veggie" value="veggie">
   <label for="veggie">Veggie</label>
    <input type="checkbox" name="steak" value="steak">
   <label for="steak">Steak</label>
</fieldset>

Sources:

Mozilla HTML Reference
Mozilla Accessibility
CSS Tricks: HTML5 Meter Element
Scott O'Hara Blog: How Do You Figure
Dev Practical: How many HTML tags are there in HTML[Answered]

Comments

[fruntend]

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍

[Dominic Ross]

This is a good article, and I didn't realise there was a distinction between Tag and Element.
Thank you!