To hide and show elements without deleting and recreating them, display: none; is commonly used with JavaScript. The <script> element use display: none; as its default. You can override the default display value of any element.
Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow the web standards. A common example is making inline <li> elements for horizontal menus:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
li { display: inline; } </style> <body> <p>Display a list of links as a horizontal menu:</p> <ul> <li><a href="../html_beg/prh.html" target="_blank">HTML</a></li> <li><a href="../html_beg/prc.html" target="_blank">CSS</a></li> <li><a href="../html_beg/prj.html" target="_blank">JavaScript</a></li> </ul> </body> |
Display a list of links as a horizontal menu: |
