
- HTML Tutorial
- HTML - Home
- HTML - Overview
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Comments
- HTML - Images
- HTML - Tables
- HTML - Lists
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Frames
- HTML - Iframes
- HTML - Blocks
- HTML - Backgrounds
- HTML - Colors
- HTML - Fonts
- HTML - Forms
- HTML - Embed Multimedia
- HTML - Marquees
- HTML - Header
- HTML - Style Sheet
- HTML - Javascript
- HTML - Layouts
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- HTML - Fonts Ref
- HTML - Events Ref
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
How to specify that an element is not yet relevant in HTML?
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>
Output
The output obtained after executing the script above is;
- Related Articles
- How to specify that the element is read-only in HTML?
- How to specify whether the content of an element should be translated or not in HTML?
- How to specify a unique id for an element in HTML?
- How to specify that an element should be pre-selected when the page loads in HTML?
- How to specify that an input element should be disabled?
- How to specify whether the element is to have its spelling and grammar checked or not in HTML?
- How to specify that the form should not be validated when disabled in HTML?
- How to specify that the form should not be validated when submitted in HTML?
- How to set whether an element is draggable or not in HTML?
- How to specify that the styles only apply to this element's parent element and that element's child elements in HTML?
- How to specify that the element must be filled out before submitting the form in HTML?
- How to specify that the element should automatically get focus when the page loads in HTML?
- How to specify which form element a calculation is bound to with HTML?
- How to specify the type of box used for an HTML element using CSS?
- How to specify the usage of an element using the tabbing order (tab keyboard button) in HTML?
