Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to specify that an element is not yet relevant in HTML?
The hidden attribute in HTML is a boolean attribute used to specify that an element is not yet relevant or no longer applicable to the current state of the page. When present, browsers should not display the element to users.
The hidden attribute serves multiple purposes − hiding content that becomes relevant only after certain conditions are met, removing outdated information from view, or concealing elements until user interactions make them applicable. It provides a semantic way to control element visibility without relying solely on CSS.
Syntax
Following is the syntax for the hidden attribute −
<element hidden>Content</element>
Since it is a boolean attribute, you can also write it as −
<element hidden="hidden">Content</element>
Basic Usage of Hidden Attribute
The hidden attribute can be applied to any HTML element to remove it from the document flow and visual presentation. Unlike CSS display: none, the hidden attribute conveys semantic meaning about the element's relevance.
Example
Following example demonstrates the basic usage of the hidden attribute to hide irrelevant content −
<!DOCTYPE html> <html> <head> <title>Hidden Attribute Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <h2>Page Content</h2> <p>This paragraph is visible and relevant to users.</p> <p hidden>This paragraph is hidden and not currently relevant.</p> <p>This paragraph is also visible.</p> </body> </html>
The output shows only the visible paragraphs −
Page Content This paragraph is visible and relevant to users. This paragraph is also visible.
Hidden Attribute vs CSS Display None
While both the hidden attribute and CSS display: none hide elements, they serve different purposes. The hidden attribute indicates semantic irrelevance, while CSS controls visual presentation. The hidden attribute can be overridden by CSS if needed.
Example
Following example shows how CSS can override the hidden attribute −
<!DOCTYPE html>
<html>
<head>
<title>Overriding Hidden Attribute</title>
<style>
.force-show[hidden] {
display: block;
color: red;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<p>Normal visible content.</p>
<p hidden>This is hidden by the hidden attribute.</p>
<p class="force-show" hidden>This is hidden but CSS forces it to show.</p>
</body>
</html>
The output shows how CSS can override the hidden attribute −
Normal visible content. This is hidden but CSS forces it to show. (in red, bold)
Hidden Input Fields in Forms
In HTML forms, hidden input fields serve a different purpose than the hidden attribute. The type="hidden" input stores data that gets submitted with the form but remains invisible to users.
Syntax
<input type="hidden" name="fieldName" value="hiddenValue">
Example
Following example demonstrates a form with hidden input fields for tracking purposes −
<!DOCTYPE html>
<html>
<head>
<title>Hidden Input Fields</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Contact Form</h2>
<form action="/submit-form" method="post">
<div style="margin: 10px 0;">
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" value="John Doe" style="margin-left: 10px;">
</div>
<div style="margin: 10px 0;">
<label for="email">Email:</label>
<input type="email" id="email" name="email" value="john@example.com" style="margin-left: 10px;">
</div>
<div style="margin: 10px 0;">
<label for="message">Message:</label>
<textarea id="message" name="message" rows="3" cols="30" style="margin-left: 10px;">Hello, I need assistance with...</textarea>
</div>
<input type="hidden" name="formId" value="contact-2024">
<input type="hidden" name="source" value="website">
<button type="submit">Send Message</button>
</form>
</body>
</html>
The form displays visible fields while hidden inputs store tracking data that gets submitted along with the form.
Dynamic Show/Hide with JavaScript
The hidden attribute can be dynamically toggled using JavaScript, making it useful for interactive content that becomes relevant based on user actions.
Example
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Hidden Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Dynamic Content Visibility</h2>
<button onclick="toggleContent()">Toggle Hidden Content</button>
<div id="content" hidden style="margin: 20px 0; padding: 15px; background: #f0f8ff; border: 1px solid #ccc;">
<h3>Hidden Content</h3>
<p>This content was initially hidden and became relevant when you clicked the button.</p>
</div>
<script>
function toggleContent() {
var content = document.getElementById('content');
if (content.hasAttribute('hidden')) {
content.removeAttribute('hidden');
} else {
content.setAttribute('hidden', '');
}
}
</script>
</body>
</html>
Clicking the button toggles the visibility of the content section, demonstrating how the hidden attribute can be controlled dynamically.
Common Use Cases
The hidden attribute is commonly used for −
-
Progressive disclosure − Showing additional content based on user selections or form progress.
-
Conditional content − Hiding elements until specific conditions are met, such as user authentication or feature availability.
-
Template elements − Storing reusable HTML content that gets cloned and shown dynamically by JavaScript.
-
Error messages − Keeping error or success messages hidden until they become relevant.
Conclusion
The hidden attribute provides a semantic way to specify that an element is not currently relevant, causing browsers to hide it from view. Unlike CSS-based hiding, it conveys meaning about the element's relevance state and can be dynamically toggled with JavaScript. For form data storage, use type="hidden" input fields instead.
260 Views
