HTML, the language of the web, may seem like a simple markup language. However, HTML provides various underrated tags that can help you achieve certain tasks without the need for external JavaScript. There are many tags that you may not even know existed, which can save you hours of work.
In this detailed blog, we will look into some of the underrated HTML tags that you can use to simplify your next project. These tags also improve web accessibility and the overall structure of your code.
Without further ado, let’s get started.
1. The <progress> tag
The <progress> tag is an HTML element used to represent the progress of something. The <progress> tag allows you to easily create progress bars using native HTML elements without the need of JavaScript.
The <progress> tag is often used to display the current status of an ongoing process or task, such as file uploads, form submissions, or loading of resources.
There are mainly two attributes used with the <progress> tag:
- value: Specifies the current value of the progress. This attribute is usually a numerical value representing the completion percentage of the task.
- max: Specifies the maximum value that the progress can reach. This attribute is usually set to 100 to represent 100% completion.
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Progress Tag Example</title>
</head>
<body>
<progress value=”50″ max=”100″></progress>
</body>
</html>
Output
2. The <cite> tag
The <cite> tag in HTML is used to denote the title of a creative work such as a book movie or article. Including a <cite> tag in your HTML allows you to specify text as a reference. By default most browsers render the text inside the <cite> tag in italics but this can be customized using CSS.
Example:
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title></title>
</head>
<body>
<p>In his famous speech, Martin Luther King Jr. said: <q>I have a dream.</q> This quote is from his speech titled <cite>I Have a Dream</cite>, delivered on August 28, 1963.</p>
</body>
</html>
3. The <details> tag
The details tag is used to provide more information about a section on a website. It is used to create a disclosure widget that can hide or reveal additional content. This additional content is initially hidden from view but can be shown or hidden by the user, typically by clicking on a summary or title.
Example
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Details Tag Example</title>
</head>
<body>
<details>
<summary>Click to reveal more information</summary>
<p>This is some additional information that can be revealed by clicking the summary above.</p>
</details>
</body>
</html>
Output
4. The <meter> tag
The <meter> tag is another underrated tag in HTML that can be used for creating measurements. The <meter> tag defines a scale for measuring within a specified range and has the capability to handle fractional values.
The <meter> tag can accept several attributes to define its behaviour, like:
- value: The value attribute specifies the current value of the meter tag.
- min: The min attribute defines the minimum value of the range
- max: The max attribute defines the maximum value of the range.
- low: The low attribute Specifies the lower bound of the range. Values below this will be considered low.
- high: The high attribute specifies the upper bound of the range. Values above this will be considered high.
- optimum: specifies the optimal value within the range.
Example:
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Meter Tag Example</title>
</head>
<body>
<h2>Storage Usage</h2>
<meter value=“70” min=“0” max=“100” low=“30” high=“80” optimum=“50”>40%</meter>
<h2>Battery Usage</h2>
<meter value=“40” min=“0” max=“100” low=“30” high=“80” optimum=“50”>40%</meter>
</body>
</html>
Output
5. The <meta> tag
The <meta> tag is one of the most important HTML tags, and it is also the most ignored HTML tag. Meta tags provides metadata about a particular webpage. They are placed inside the <head> section. They are not visible to users when they view the page in a web browser.
The meta tags provide additional information to browsers, search engines, and other web services about the website, its content, and other information.
Here are some common meta tags and their purposes:
- <meta charset=”UTF-8″>: This meta tag specifies the character encoding for the document. UTF-8 is the commonly used character encoding. It supports a wide range of characters from different languages.
- <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>: This defines the viewport settings for responsive web design. It tells the browser to set the width of the viewport to the width of the device and set the initial zoom level to 1.0. It ensures that the web page is displayed properly on various devices and screen sizes.
- <meta name=”description” content=”…”>: Provides a brief description of the content of the web page. This description is often displayed in search engine results pages (SERPs) as a snippet beneath the page title, helping users understand what the page is about before clicking on it.
- <meta name=”keywords” content=”…”>: Specifies a list of keywords or phrases that are relevant to the content of the web page. While not as influential as they once were, some search engines may still use keyword meta tags as a signal for ranking purposes.
- <meta name=”author” content=”…”>: Indicates the author of the web page. This can be the name of an individual or an organization responsible for creating the content.
- <meta name=”robots” content=”…”>: Instructs search engine crawlers on how to index and display the web page. Common values include “index” (allow indexing), “noindex” (do not index), “follow” (follow links), and “nofollow” (do not follow links).
- <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>: This tag is commonly used to ensure proper rendering and zooming of web pages on mobile devices. It sets the width of the viewport to the width of the device’s screen and sets the initial zoom level to 1.0.
- <meta http-equiv=”refresh” content=”5;url=http://example.com”>: Redirects the web page to another URL after a specified time interval. In this example, the page will redirect to “http://example.com” after 5 seconds.
Here is an example
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<meta name=“description” content=“Talent500 connects skilled professionals with top companies, providing opportunities for career growth and development.”>
<meta name=“keywords” content=“Talent500, recruitment, job search, career growth, technology jobs”>
<meta name=“author” content=“Talent500 Team”>
<meta name=“robots” content=“index, follow”>
<title>Talent500 – Connecting Top Talent with Leading Companies</title>
</head>
6. Color picker
HTML offers a built-in color picker feature. Using the <input> tag and specifying its type as “color” enables the creation of a color picker interface. This allows users to select a color through either a visual picker or by inputting a color in the #rrggbb hexadecimal format into a text field.
Example
<div>
<input type=“color” id=“head” name=“head” value=“#eba465” />
<label for=“head”>Head</label>
</div>
<div>
<input type=“color” id=“body” name=“body” value=“#e0fff5” />
<label for=“body”>Body</label>
</div>
7. The <mark> tag
The <mark> tag in HTML is used to highlight or mark a specific portion of text within a document. It is typically rendered with a background color to distinguish it from the surrounding text, though the appearance can vary based on the browser’s default styles or custom CSS.
Example:
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Mark Tag Example</title>
<style>
/* Custom CSS to style the <mark> tag */
mark {
background-color: yellow;
}
</style>
</head>
<body>
<p>This is a <mark>highlighted</mark> text.</p>
</body>
</html>
8. The <datalist> tag
The <datalist> tag in HTML is used to provide a predefined list of options for input elements such as <input> and <textarea>. It allows users to select values from a dropdown list or provide suggestions as they type into an input field.
Example:
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Datalist Example</title>
</head>
<body>
<label for=“browser”>Choose your browser:</label>
<input list=“browsers” id=“browser” name=“browser”>
<datalist id=“browsers”>
<option value=“Chrome”>
<option value=“Firefox”>
<option value=“Safari”>
<option value=“Edge”>
<option value=“Opera”>
</datalist>
</body>
</html>
Wrapping it Up
Thanks for checking out this blog. In this detailed post, we’ve explored some underrated HTML tags that can simplify your workflow. These HTML tags also contribute to web accessibility. Additionally, remember to check the browser compatibility of these HTML tags, as some older browser versions might not support them.
Now that you’re familiar with these underrated HTML tags, there are also a few more for you to discover.
Keep learning
