Did you know: What is Conditional Statements in HTML

We used to see some tags like ” <!-- Some Text --> ” in html source files. Ever used those tags in your html? I do, actually, use the technique quite a lot. What are they?. They are called the “HTML Comments” or “HTML Statements“. We can also use these comments as conditional statements just like the conditional statements (eg: IF -- ENDIF) in PHP, C++, JavaScript and other programming languages.

When we creating a web site, we always facing the browser compatibility issues with IE (Internet explorer) and other browsers like Firefox, Chrome etc… Using css you should as far as possible try to make the site look the same for the different browsers. But sometimes that might not be possible and in these cases you can use HTML conditional statements.So what are the HTML Conditional statements?. and how it use in html?. Take a loook.

Syntax of Conditional Comments

The basic syntax of each type of comment is shown in the tables below.

The Comment types

You can replace The HTML string shown inside the syntax block, with your HTML contents or scripts. Both types of conditional comment use a conditional expression to indicate whether the content inside the comment block should be parsed or ignored.

Comment type Syntax or possible value
Standard HTML comment <!-- Comment content  -->
Downlevel-hidden <!--[if expression]> HTML <![endif]-->
Downlevel-revealed <![if expression]> HTML <![endif]>

The Conditional Expressions.

The following table describes the conditional expressions.

Item Example Comment
IE [if IE] The string “IE” is a feature corresponding to the version of Internet Explorer used to view the Web page.
value [if IE 7] An integer or floating point numeral corresponding to the version of the browser.It returns a Boolean value of true if the version number matches the browser version.
WindowsEdition [if WindowsEdition] Internet Explorer 8 on Windows 7. The string “WindowsEdition” is a feature corresponding to the edition of Windows used to view the Web page.
value [if WindowsEdition 1] An integer corresponding to the edition of Windows used to view the Web page. Returns a Boolean value of true if the value matches the edition being used.
true [if true] Always evaluates to true.
false [if false] Always evaluates to false.

Operators for the Conditional Expressions.

The following table describes the operators that can be used to create conditional expressions.

Item Example Comment
! [if !IE] The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression.
lt [if lt IE 5.5] The less-than operator. Returns true if the first argument is less than the second argument.
lte [if lte IE 6] The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
gt [if gt IE 5] The greater-than operator. Returns true if the first argument is greater than the second argument.
gte [if gte IE 7] The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.
( ) [if !(IE 7)] Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.
& [if (gt IE 5)&(lt IE 7)] The AND operator. Returns true if all subexpressions evaluate to true
| [if (IE 6)|(IE 7)] The OR operator. Returns true if any of the subexpressions evaluates to true.

Examples for Conditional Comments/Statements

Here are some more examples of conditional comments.

<!-- [if IE]&gt;You are using Internet Explorer. &lt; ![endif]-->

You are not using Internet Explorer.

<!-- [if IE 7]&gt;Welcome to Internet Explorer 7! &lt; ![endif]-->
<!-- [if !(IE 7)]&gt;You are not using version 7. &lt; ![endif]-->

<!-- [if gte IE 7]&gt;You are using IE 7 or greater. &lt; ![endif]-->
<!-- [if (IE 5)]&gt;You are using IE 5 (any version). &lt; ![endif]-->
<!-- [if (gte IE 5.5)&amp;(lt IE 7)]&gt;You are using IE 5.5 or IE 6. &lt; ![endif]-->
<!-- [if lt IE 5.5]&gt;Please upgrade your version of Internet Explorer. &lt; ![endif]-->

<!-- [if true]&gt;You are using an <em>uplevel</em> browser.&lt; ![endif]-->
You are using a <em>downlevel</em> browser.

<!-- [if true]&gt;This nested comment is displayed in IE 7. &lt; ![endif]-->

About