Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create conditional comments in HTML?
Conditional comments are nothing but conditional statements which are used to hide or provide HTML the source code from browser.
First let us discuss about HTML comments then we will know more about conditional comments in HTML −
HTML comments is not an executable statement; they are used to describe the statements.
The comments in HTML has start and end tag, <!-- -->.
These comments can be placed anywhere in the HTML page, but its better to place after DOCTYPE.
HTML cannot hold nested comments, that means it cannot support comment within another comment.
HTML comments are used to hide the unnecessary content or hide content temporarily.
HTML comments can also have used to hide a part of content in the middle of code we call it as hide inline content.
For example, if you observe the following HTML tag, the output of this statement is − He is a boy. It hides the word ‘talented’.
<p>He is a <! ---talented - -> boy</p>
Example
Following is an example of the comments in a HTML document −
<!DOCTYPE html> <HTML> <body> <!--write the content here --> <p> Welcome to <!--HTML &--> CSS tutorial</p> <!--<img src=”pic.jpg --> </body> </html>
In the above program, three ways of representing the comments is shown, explaining the usage of code, hide inline content, hiding the unnecessary content. Now let us discuss about Conditional comments in HTML −
Conditional Comments
The conditional comments are nothing but a conditional statement which are used to hide or display HTML source code from Internet explorer.
There are two types of conditional comments that are used in HTML they are −
downlevel-hidden − Used to hide HTML source code in browser
downlevel-revealed − Used to expose HTML source code in browser
Syntax
Let us see the usage of downlevel-hidden and downlevel-revealed conditional comments −
Downlevel-hidden <!—[if expression]> HTML Code has written here <![endif]--> Downlevel-revealed <![if expression]> HTML code has written here&;lt;![endif]>
Example
Following example shows how to use Conditional comments −
<link href="home.css" rel="stylesheet"> <!--[if IE]><link href="body.css" rel="stylesheet"><![endif]-->
Use of conditional comments in HTML
Let us see what is the necessity of using conditional statements in HTML −
sFor developing the cross-browser websites is a big challenge to developers, because IE (Internet Explorer) interprets the HTML code differently when compared to other browsers.
So, with the help of conditional comments we can solve the above problem by simply writing a separate set of code for Internet Explorer and different code for other browsers.
The structure of Conditional comment is same as HTML comments.
By seeing the structure of conditional comments, the other browsers ignore the code that is written inside the conditional comments.
The Internet Explorer recognizes the conditional comments and it consider as a normal web page content.
Following are the operators that are used to represent the conditional comments.
! − Not operator.
lt − less than.
lte − less than or equal to.
gt − greater than.
gte − greater than or equal to.
( ) − represent the subexpression which is used to construct a condition within another condition.
& − AND operator.
| − OR operator.
Now let us see some programs on downlevel hidden and downlevel revealed using operators -
Example
Following example demonstrates the downlevel hidden conditional comment in HTML −
<!DOCTYPE>
<html>
<head>
<title>Example of conditional comment using downlevel hidden</title>
</head>
<body>
<h1>How to write conditional comment</h1>
<!--[if lte IE 8]>
<link href="sample.css" rel="stylesheet">
<![endif]-->
</body>
</html>
Example
Following example demonstrates the downlevel revealed conditional comment in HTML −
<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Example of conditional comment using downlevel revealed</title> </head> <body> <h1>How to Write conditional comment</h1> <![if !IE]> <p>This message can be seen, if your browser is not IE </p> <![endif]> </body> </html>
815 Views
