Home / HTML5 / The Top 5 Important HTML Tags You May Not Be Using

The Top 5 Important HTML Tags You May Not Be Using

Thursday July 15, 2021
3 minutes read
5167 Views
html tags 2

Hello there, everyone! Today I’m going to discuss 5 Unknown HTML Tags.

HTML Tags

As a front-end developer, you would think that HTML has no unknowns, but you could be shocked at how HTML5 has progressed over the previous few years. In this article, we’ll look at 5 HTML tags that you might not be aware of or aren’t even aware of.

<progress>

To construct progress bars, HTML5 includes its own progress> tag. A task’s completion progress is represented by the tag. For earlier browsers, the text inside the element is utilized as a fallback. For best accessibility practices, use the label> tag!

<progress>  has two impute value and max.

value,  specify the state of the progress.

max, indicate the maximum value to reach.

Syntax

Assuming you wish to indicate progress on a work that is 75% complete, you can write

<progress value="75" max="100">75%</progress>

Output

75%

CSS can also be used to style <progress>.

progress {
  -webkit-appearance: none;
  -moz-appearane: none;
  appearance: none;
  height: 15px;
  width: 100%;
	border: none;
  background-color: #000000;
  border-radius: 50px;
	box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.2);
  padding: 2px;
  display: block;
}

progress::-webkit-progress-bar {
	background: #000000;
	border-radius: 10px;
}

progress::-webkit-progress-value {
	border-radius: 10px;
	box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
}

progress::-moz-progress-bar {
	border-radius: 10px;
	box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
}

Browser Support

progress element  - Browser support - caniuse

<mark>

The <mark> tag is used to indicate or highlight text in an HTML document that is of particular interest or relevance. The content within the mark tag is often rendered as text with a yellow background color in browsers. The mark element is another common name for this tag.

Syntax

In HTML, the syntax tag is:

<body>
<p>The English test is on <mark>Friday</mark>.</p>
</body>

Output

The English test is on Friday.

Browser Support

<address>

The HTML <address> tag specifies contact information for the HTML document’s nearest or ancestor. The content within the element is often shown as italicized text by browsers. The <address> element is another frequent name for this tag.

Syntax

In HTML, the syntax tag is:

<body>
<address>
  You can contact us at:<br>
  TechOnTheNet.com<br>
  123 Somewhere St.<br>
  City, State
</address>
</body>

Output

You can contact us at:
TechOnTheNet.com
123 Somewhere St.
City, State

Browser support

<time>

The HTML <time> tag is an HTML5 element that in the HTML document defines either a time value (on a 24-hour clock) or a date (in the Gregorian calendar). The time element is another common name for this tag.

Syntax

In HTML, the syntax for the <time> tag is:

Happy <time datetime="2008-05-08 20:00">Mother's day</time>

Output

Open from 10:00 to 21:00 every weekday.

Browser support

<var>

In programming or in a mathematical formula, the <var> tag is used to specify a variable. Italics are commonly used to display the material inside.

<p>
   The area of a triangle is:
    1/2 x <var>b</var> x <var>h</var>,
    where <var>b</var> is the base, and <var>h</var> is the vertical height.
</p>

Output

The area of a triangle is: 1/2 x b x h, where b is the base, and h is the vertical height.

Browser support

Further Reading 📚

Check out the following links to learn more:


Post author

A bright, talented, ambitious and self-motivated 💻 Freelancer, ⌨ Programmer, JavaScript and Typescript lover 📍

  Tweet It


All Comments (3)

Leave a Reply

Your email address will not be published. Required fields are marked *