10 HTML Tags You Need to Be Using
Not all HTML tags are created equal.
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
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
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
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
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
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
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
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 < 3; i++) {console.log('Hi ' + name + '!');}}sayHello('Aurelio');</code></pre>
Preview
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
I hope you expand your knowledge with these HTML tags.
If I missed important HTML tags, feel free to make suggestions ❤
