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
Create a hidden paragraph in HTML5
The hidden attribute in HTML5 is used to create elements that are not displayed or relevant to the current page state. When applied to a paragraph or any HTML element, it completely hides the content from both visual display and screen readers, making it semantically irrelevant until the attribute is removed.
Syntax
Following is the syntax for using the hidden attribute −
<p hidden>This paragraph is hidden</p>
The hidden attribute is a boolean attribute, meaning its presence alone indicates the element should be hidden. You can also write it as hidden="hidden" or hidden="true", but simply hidden is sufficient and preferred.
Basic Hidden Paragraph Example
Following example demonstrates how to create a hidden paragraph using the hidden attribute −
<!DOCTYPE html> <html> <head> <title>Hidden Paragraph Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Visible and Hidden Content</h2> <p>This is a visible paragraph that appears on the page.</p> <p hidden>This is a hidden paragraph that does not appear.</p> <p>This is another visible paragraph after the hidden one.</p> </body> </html>
The output shows only the visible paragraphs −
Visible and Hidden Content This is a visible paragraph that appears on the page. This is another visible paragraph after the hidden one.
Using JavaScript to Toggle Hidden Paragraphs
The hidden attribute can be dynamically controlled using JavaScript to show or hide content based on user interactions or application logic.
Example
<!DOCTYPE html>
<html>
<head>
<title>Toggle Hidden Paragraph</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Toggle Hidden Content</h2>
<button onclick="toggleParagraph()">Toggle Hidden Paragraph</button>
<p id="normalParagraph">This paragraph is always visible.</p>
<p id="hiddenParagraph" hidden>This paragraph can be toggled on/off!</p>
<script>
function toggleParagraph() {
var paragraph = document.getElementById("hiddenParagraph");
if (paragraph.hasAttribute("hidden")) {
paragraph.removeAttribute("hidden");
} else {
paragraph.setAttribute("hidden", "");
}
}
</script>
</body>
</html>
Initially, only the first paragraph is visible. Clicking the button toggles the visibility of the second paragraph by adding or removing the hidden attribute.
Toggle Hidden Content [Toggle Hidden Paragraph] This paragraph is always visible. (Click button to show/hide: "This paragraph can be toggled on/off!")
Hidden vs CSS Display None
The hidden attribute serves a different purpose than CSS display: none. The hidden attribute indicates that content is semantically irrelevant, while display: none is purely a visual styling choice.
Comparison Example
Following example shows the difference between the hidden attribute and CSS display property −
<!DOCTYPE html>
<html>
<head>
<title>Hidden vs Display None</title>
<style>
.css-hidden { display: none; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Comparison of Hidden Methods</h2>
<p>This paragraph is visible.</p>
<p hidden>This paragraph uses the hidden attribute.</p>
<p class="css-hidden">This paragraph uses CSS display: none.</p>
<p>This paragraph is also visible.</p>
</body>
</html>
Both hidden methods produce the same visual result, but the semantic meaning differs −
Comparison of Hidden Methods This paragraph is visible. This paragraph is also visible.
Common Use Cases
The hidden attribute is particularly useful in the following scenarios −
Form sections − Hide form fields that become irrelevant based on user selections
Progressive disclosure − Show additional content only when needed
Status messages − Hide success or error messages until they need to be displayed
Content templates − Keep template elements hidden until they are cloned and populated
Example − Form with Hidden Sections
<!DOCTYPE html>
<html>
<head>
<title>Hidden Form Section</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Registration Form</h2>
<form>
<label>Account Type:</label>
<select id="accountType" onchange="toggleBusinessInfo()">
<option value="personal">Personal</option>
<option value="business">Business</option>
</select>
<div id="businessInfo" hidden>
<h3>Business Information</h3>
<p>Company Name: <input type="text" placeholder="Enter company name"></p>
<p>Tax ID: <input type="text" placeholder="Enter tax ID"></p>
</div>
</form>
<script>
function toggleBusinessInfo() {
var accountType = document.getElementById("accountType").value;
var businessInfo = document.getElementById("businessInfo");
if (accountType === "business") {
businessInfo.removeAttribute("hidden");
} else {
businessInfo.setAttribute("hidden", "");
}
}
</script>
</body>
</html>
When "Business" is selected, the hidden business information section becomes visible. When "Personal" is selected, the section becomes hidden again.
Browser Compatibility
The hidden attribute is well supported across all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 11+. It provides a semantic way to hide content that is universally understood by browsers and assistive technologies.
Conclusion
The hidden attribute in HTML5 provides a semantic way to hide elements that are not currently relevant to the page content. Unlike CSS display: none, it carries semantic meaning and is properly handled by screen readers. Use the hidden attribute when content should be completely removed from the document flow and user interaction.
2K+ Views
