10 HTML Tags You Need to Be Using

Not all HTML tags are created equal.

Malak Ben Romdhane
Jul 31, 2020 · 5 min read
HTML Tags

As a front-end developer, you no doubt use HTML constantly and probably feel it doesn’t have any more unknowns. Nevertheless, the way it has evolved (in particular with the advent of HTML5) may surprise you at times.

I’ll show you 10 HTML tags you may not be using or maybe even aren’t yet aware of that help to increase the semantics and maintainability of your web pages.

The basic semantic HTML tags such as <header>, <footer>and <nav>are almost self-explanatory. But, there are a host of newer HTML tags that we need to be using as well.

1- Time

This tag allows you to represent a machine-readable date and/or time on your web pages.

Because you can simply place dates and times on a page, you might wonder why you would ever want to use a time tag. The simple answer is that while you can display dates and times on your page in a variety of ways, there are times when you might want the browser to clearly understand what the date and/or time is. By using the datetime attribute of the <time> tag, you can make sure that it is clear that date and/or time are being represented. More importantly, using scripting or another coding, you can access this machine-readable format and use it to do calculations and more.

The <time> tag and its datetime attribute are supported by all the major browsers including Google Chrome 6.0+, Internet Explorer/Edge 9.0+, Safari 5.0+ Firefox 4.0+, and Opera 11.1+.

<p>Our party is going to be <time datetime="2018-08-11 17:00">the eleventh of August at 5:00pm</time></p>Preview
Our party is going to be the eleventh of August at 5:00pm

2- DataList

The <datalist>tag provides an autocomplete interface for <input>elements. Each list contains a set of <option>elements that have an associated value. When linked to an <input>using the “list” attribute, it can provide a drop-down list or even display suggestions as the user types.

<label for="tutorial_choice">Tutorials: </label>
<input list="tutorial_types" name="tutorial_choice" id="tutorial_choice">

<datalist id="tutorial_types">
<option value="HTML">
<option value="CSS">
<option value="SQL">
</datalist>

Preview

Preview of the <datalist> html tag
Preview of the <datalist> html tag
<datalist> Tag

3- Template

The <template>is used to store HTML code fragments, which can be cloned and inserted in an HTML document.

The content of the tag is hidden from users being stored on the client-side. It is inert until activated using JavaScript.

The browser processes the content of the <template>element while loading the page to ensure that the code is valid.

Templates can be placed anywhere inside of <head>, <body>, or <frameset>and can contain any type of content which is allowed in those elements

The <template>tag is a new element in HTML5.

Everything within the <template>element is parsed like regular HTML. However, there are some exceptions:

  • It doesn’t get rendered.
  • The <script>tags within it don’t get run.
  • The <style>tags within it don’t get evaluated.
  • External resources are not rendered.
  • Content within this element is not considered to be in the document. If the document.getElementById() or querySelector() is used in the main page, the child nodes of a template won’t be turned back.
<template id="myTemplate">
<p>Template content</p>
</template>
<div id="normalContent">
<p>First paragraph</p>
</div>
<!-- JavaScript function clones the template and adds it to the document. -->
<button onclick="useTemplate();">Show content</button> <script>
function useTemplate() {
var myTemplate = document.getElementById('myTemplate'); normalContent = document.getElementById('normalContent'); clonedTemplate = myTemplate.content.cloneNode(true); normalContent.appendChild(clonedTemplate);}
</script>

Preview

Preview of the <template> html tag
Preview of the <template> html tag
<template> Tag

4- OptGroup

The <optgroup>tag is a great way to add a little definition between groups of options inside a select box. If you needed to group movie listings by time, for example, then it would look like this:

<label for="showtimes">Showtimes</label><select id="showtimes" name="showtimes"> <optgroup label="1PM"></optgroup> <option value="titanic">Twister</option> <option value="nd">Napoleon Dynamite</option> <option value="wab">What About Bob?</option> <optgroup label="2PM"></optgroup> <option value="bkrw">Be Kind Rewind</option> <option value="stf">Stranger Than Fiction</option> </select>

Preview

Preview of the <optgroup> html tag
Preview of the <optgroup> html tag
<optgroup> Tag

5- <abbr>

The <abbr>tag is used along with a title attribute to associate a full-text explanation with an abbreviation or acronym. Website visitors do not see the text in the title attribute, but browsers, search engines, and assistive technologies do use this information.

<abbr title="Sergeant">Sgt.</abbr> Pepper's Lonely Hearts Club is my favorite album.

Preview

Preview of the <abbr> html tag
Preview of the <abbr> html tag
<abbr> Tag

6- Sup

The <sup> tag is used to identify text that should appear in a superscript position relative to the surrounding text.

<p>This text contains <sup>superscript</sup> text.</p>

Preview

Preview of the <sup> html tag
Preview of the <sup> html tag
<sup> Tag

7- Ins & Del

The <ins>tag highlights what’s been added to the document with an underline, and the <del>tag shows what’s been taken out with a strikethrough.

John <del>likes</del> <ins>LOVES</ins> his new iPod.

Preview

Preview of the <ins> and <del> html tags
Preview of the <ins> and <del> html tags
<ins> & <del> Tags

8- Progress

The <progress>tag represents the progress of a task.

It has two attributes: value (to specify the state of the progress) and max (to indicate the maximum value to reach). If the max value isn’t set, a range of 0-1 is assumed and value can be any float within this range. So, to show a progress bar for a task completed at 50% you can write:

<progress value="50" max="100">50%</progress>Or equivalently:<progress value="0.5">50%</progress>

Preview

Preview of the <ins> and <del> html tags
Preview of the <ins> and <del> html tags
<progress> Tag

9- Pre

The <pre> tag allows us to show preformatted text as it appears in the source. What this means is that multiple whitespace characters won’t be collapsed into one (changing the default manner that browsers handle whitespace). This tag is ideal when you need to show a snippet of code because it helps preserve indentation. For example, in a page we may have something like this:

<pre><code>function sayHello(name) {for (var i = 0; i &lt; 3; i++) {console.log('Hi ' + name + '!');}}sayHello('Aurelio');</code></pre>

Preview

Preview of the <pre> html tag
Preview of the <pre> html tag
<pre> tag

10- Details

The <details>tag creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the <summary> element.

<details>
<summary>Details</summary>
Something small enough to escape casual notice.
</details>

Preview

Preview of the <pre> html tag
Preview of the <pre> html tag
<details> tag

I hope you expand your knowledge with these HTML tags.

If I missed important HTML tags, feel free to make suggestions ❤

The Startup

Get smarter at building your thing. Join The Startup’s +724K followers.

Malak Ben Romdhane

Written by

Web & Mobile developer | addicted to writing.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +724K followers.

Malak Ben Romdhane

Written by

Web & Mobile developer | addicted to writing.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +724K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store