How to specify that an element is not yet relevant in HTML?

HTML Web Development Front End Technology

A boolean attribute makes up the hidden attribute.

It indicates that an element is either not important yet or is no longer relevant when it is present. Elements that have the hidden attribute specified shouldn't be displayed by browsers.Another application of the hidden attribute is to prevent a user from viewing an element until a different requirement has been satisfied.

Syntax

<p hidden> ……… </p>

Following are the examples…

Example

We are using the hidden attribute to hide the element of the html script that is not relevant.


<!DOCTYPE html>
<html>
<body>
   <h2>Heading</h2>
   <p>This is a demo paragraph and visible.</p>
   <p hidden>This is a demo paragraph and hidden.</p>
</body>
</html>

Output

The output achieved after executing the above script is −

Example

In the following example we are using hidden attribute to specify that the element is not relevant.


<!DOCTYPE html>
<html>
<body>
   <p hidden>A laptop, laptop computer, or notebook computer is a small, portable personal computer with a screen and alphanumeric keyboard.</p>
   <p>A laptop is a personal computer that can be easily moved and used in a variety of locations.</p>
</body>
</html>

Output

On executing the above script, the text which was written inside the hidden will be revealed and the remaining text will be displayed .

Example: Hiding Content in Forms

The irrelevant information can also be hidden in the forms using the hidden attribute. However, the syntax is slightly different −

Syntax

<input type = “hidden”>

Let us look at a form created to apply for a job post where there are three input spaces: to enter name, a question asked by the hiring manager and the salary provisions. However, the salary provision is hidden as it is irrelevant in the job application form.


<form>
   <div>
      <label for="title">Enter Name:</label>
      <input type="text" id="title" name="title" value="My Name">
   </div>
   <div>
      <label for="content">Why should we hire you? Write in 300 words:</label>
      <textarea id="content" name="content" cols="60" rows="5">
         Some Content Here.
      </textarea>
   </div>
   <div>
      <label for="text"> Salary (Is hidden):</label>
      <input type="hidden" id="text" name="text" value="Hidden Content">
   </div>
   <div>
      <button type="submit">Update post</button>
   </div>
   <input type="hidden" id="postId" name="postId" value="34657">
</form>