The hidden global attribute in HTML5 is a Boolean attribute. It stipulates that the targeted element is further relevant or not for the HTML document. One such example of using the hidden attribute is that it can be utilized to cover/uncover any particular content present on the HTML web page that is not authorised unless the user has been authenticated. Until then, browsers won’t render the elements with active hidden property (i.e. attribute is set).
One such usage of the hidden attributes can be like keeping a user away from seeing an element until some conditions have been met (such as selecting a radio button, etc.) after which, a JavaScript code could stipulate back the hidden attribute, hence making the element visible. This attribute should not be utilized to conceal content only for an individual presentation; rather, it should remain in the same state for all presentations if any content is kept hidden.
The content which is hidden shouldn’t be associated with unhidden content or content that is descendant to a hidden content that is yet active. This ensures that the form elements can yet be submitted and script elements can yet be executed. Scripts and Elements can, however, refer to any content that is hidden in some other context.
It would be totally incorrect to utilize the
Syntax
<element hidden> </element>
Given below are the examples of HTML Hide Element:
Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h2>HTML Hide element</h2>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>
</body>
</html>Output:
Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h2>HTML Hide element</h2>
<button id="btn">TOGGLE HIDDEN ELEMENTS</button>
<p id="p" hidden>This paragraph uses HTML5's <code>hidde</code> element.</p>
<textarea id="ta" hidden rows="5" cols="40">This textarea was hidden using the hide element</textarea>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>
<script>
document.getElementById("btn").addEventListener('click', function () {p.hidden = !p.hidden;ta.hidden = !ta.hidden;}, false);
</script>
</body>
</html>Output:
As per the definition of the Hidden attribute, we can hide any content present within an HTML webpage using the hidden attribute and then JavaScript code can be used to access it afterwards. Target to hide an element can also be achieved by CSS with the property as display property (i.e. setting it to none) but using the hidden attribute is an easy approach. Hence, we can say that content with a hidden attribute is a slice of the DOM, but the user can’t access it.
In the below example, we’ll pick the
Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h2>HTML Hide element</h2>
<button id="btn">DISPLAY HIDDEN TEXT</button>
<output id="op">(Hidden text will appear here)</output>
<textarea id="ta" hidden rows="5" cols="40">This textarea was hidden using the hide element</textarea>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>
<script>
document.getElementById("btn").addEventListener('click', function () {op.innerHTML = ta.innerHTML;}, false);
</script>
</body>
</html>Output:
These are some important points that should be well known before interacting with the hidden attribute:
Below mentioned are some of the main key points which you should remember from this topic.
Suitable use cases for hidden attribute include:
Non-suitable use cases of a hidden attribute include:
The above is the detailed content of HTML Hide Element. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
