!-- element
Allows inserting remarks into the source code.
Remarks can be helpful when you need to edit the code at a later time.
Comment tags are not rendered by browsers.
If you want to see the HTML tags by categories, please visit this page.
This element cannot have a closing tag.
| JavaScript page for this element: CommentNode. |
Conditional comments
Conditional comments allow authors to create browser and browser version specific code in HTML and XHTML documents.
A conditional comment starts with an expression and depending on its value, the body of the comment is parsed by the browser.
This is the easiest way to detect the browser version in Internet Explorer.
Furthermore, the following symbols can be used in expressions:
Note: conditional comments are only supported by Internet Explorer and only from version 5. They can only be used in HTML syntax, they have no effect in script and style blocks.
Syntax
There are two types of conditional comments:
-
The first type is ignored in all browsers other than Internet Explorer, because the basic syntax is the same as HTML comments.
In Internet Explorer, the body is parsed depending on the expression.
<!--[if expression]> value <![endif]-->
- The second type is parsed in all browsers other than Internet Explorer. In Internet Explorer, the body is parsed depending on the expression.
<![if expression]> value <![endif]>
| operator | description |
|---|---|
| lt | Less than. Returns true if the left expression is lower than the right expression. |
| lte | Less than or equal. Returns true if the left expression is lower than or equal to the right expression. |
| gt | Greater than. Returns true if the left expression is greater than the right expression. |
| gte | Greater than or equal. Returns true if the left expression is greater than or equal to the right expression. |
| ! | logical NOT operator. Returns false if the value of the first expression is true, otherwise returns true. |
| ( ) | Subexpression operator. Can be used to create more complex expressions. |
| & | AND operator. Returns true if the value of the first AND the second expressions are true, otherwise returns false. |
| | | OR operator. Returns true if the value of the first OR the second expressions are true, otherwise returns false. |
Furthermore, the following symbols can be used in expressions:
| symbol | description |
|---|---|
| IE | Identifies the Internet Explorer browser. |
| IE version | Identifies the Internet Explorer browser with a version (e.g. 5, 5.5, 6, 7, 8). |
| WindowsEdition | Identifies Internet Explorer 8 on Windows 7. |
| WindowsEdition 1 | Identifies Internet Explorer 8 on Windows 7. |
How it works
<!--[if IE 6]>
Parsed in Internet Explorer 6 only
<![endif]-->
<![if IE 6]>
Parsed in all browsers other than Internet Explorer and in Internet Explorer 6
<![endif]>
<!--[if !IE 6]>
Parsed in Internet Explorer other than version 6 only
<![endif]-->
<![if !IE 6]>
Parsed in all browsers other than Internet Explorer 6
<![endif]>
<!--[if lt IE 8]>
Parsed in Internet Explorer versions lower than 8
<![endif]-->
<![if lt IE 8]>
Parsed in all browsers except in Internet Explorer versions greater than or equal to 8
<![endif]>
<!--[if gte IE 7]>
Parsed in Internet Explorer versions greater than or equal to 7
<![endif]-->
<![if gte IE 7]>
Parsed in all browsers except in Internet Explorer versions lower than 7
<![endif]>
<!--[if WindowsEdition 1]>
Parsed in Internet Explorer 8 on Windows 7 platform
<![endif]-->
<![if WindowsEdition 1]>
Parsed in all browsers and in Internet Explorer 8 on Windows 7 platform
<![endif]>
Example HTML code 1:
This example illustrates the use of the comment tag:
|
|
|||
<!-- This is a comment, the browser does not render it. --> |
|||
|
|||
|
Did you find this example helpful?
|
Example HTML code 2:
This example shows how you can use a conditional comment to detect Internet Explorer 6:
|
|
||||
<head> <style> .myDiv { position:fixed; top:70px; left:10px; } </style> <!--[if IE 6]> <style> .myDiv { position:absolute; } </style> <![endif]--> </head> <body> <div class="myDiv"> This element is positioned fixed in all browsers except Internet Explorer 6, where it is positioned absolute. Try to scroll! </div> <div style="height:800px"> </div> </body> |
||||
|
||||
|
Did you find this example helpful?
|
External links:
User Contributed Comments