- HTML Tutorial
- HTML - Home
- HTML - History and Evolution
- HTML - Overview
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Headings
- HTML - Paragraphs
- HTML - Quotations
- HTML - Comments
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Style Sheet
- HTML - CSS Classes
- HTML - CSS IDs
- HTML - Images
- HTML - Image Map
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Iframes
- HTML - Blocks
- HTML Backgrounds
- HTML - Backgrounds
- HTML Colors
- HTML - Colors
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Code Builder
- 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
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - Global hidden Attribute
The Hidden is a HTML Global attribute indicates that the content of an element should not be displayed to the user. It can also be used to define the visibility of elements.
For example, it is used to hide elements of the page that can’t be used until the login process has been completed.
This attribute can take any one of these values−
- An empty string, the keyword hidden − set the element's visibility to hidden.
- The keyword until-found − sets the element to the hidden until found state.
Syntax
Following is the syntax of the hidden attribute −
<element hidden> ...content </element>
Example
In the following example, we are creating an HTML document and using the hidden attribute and a different value to hide the content of the page, as follows −
<!DOCTYPE html> <html> <body> <span hidden>I'm hidden</span> <span>I'm not hidden</span> <span>I'm also not hidden </span> <span hidden="hidden">I'm also hidden</span> <span hidden="something else">I'm hidden too!</span> </body> </html>
On running the above code, the output window will pop up displaying the text on the webpage.
Example
Considering the another scenario, where we are going to use the div element and adding the hidden attribute.
<!DOCTYPE html> <html> <head> <title>hidden attribute</title> </head> <body> <h2>HTML hidden attribute</h2> <h1>tutorialspoint</h1> <div hidden> This content will be hidden while displaying the content </div> <h4>TutorialsPoint is an EdTech website that makes your life simple and easy learning!</h4> </body> </html>
When we run the above code, it will generate an output consisting of the text displayed on the webpage.
Example
Let's at the following example, we are creating an HTML document and using the hidden attributes without any value to hide some of the content when the browser renders it, as follows −
<!DOCTYPE html> <html> <head> <title>HTML hidden attribute</title> </head> <body> <h2>HTML hidden attribute</h2> <h1>GeeksforGeeks</h1> <p hidden=""> This is hidden paragraph, I will hide when browser will rendered </p> <p> Free Tutorials, Millions of Articles and Reference Api, 6000+ CS courses, and Math, Che, Phy, and Bio courses for 6th, 7th, 8th, 9th, 10th, 11th, and 12th </p> </body> </html>
On running the above code, the output window will pop up displaying the text on the webpage.
To Continue Learning Please Login
Login with Google