Conditional Formatting in HTML Tags

Question

Is there any option for using IF-ELSE conditioning in HTML tags

 <if true>  do something   </if>  
 <else>     do something   </else>

Answer 1

There is, but it's really only used in IE to distinguish between different versions:

<!--[if IE6]>
    Things here!
<![endif]-->

Answer 2

Not to be pedantic, but HTML is a markup language, and isn't useful for conditional logic.

That being said, it sounds like what you're looking for is a bit of javascript. If you could add a bit more detail to your question, I could elaborate on how you could use javascript to do tasks with conditional logic.

Answer 3

HTML was designed for document layout so the noscript and noframes are about as close as HTML gets to handling conditionals. You could conceivably approach this problem with javascript.

<div id='if-part' style='visibility: hidden;'>do something</div>
<div id='else-part' style='visibility: hidden'>do something</div>

<script>
    var node;
    if(true) {
        node = document.getElementById('if-part');
    }
    else {
        node = document.getElementById('else-part');
    }
    node.style.visibility = 'visible';
</script>

of course this only works if the client has javascript turned on.

Answer 4

Conditional rendering of HTML is not a new concept, but it cannot be done using HTML exclusively. You would need to use either client side scripting or server side code to provide the conditional logic that would render your HTML accordingly.

Answer 5

Have you guy's ever coded an email? All of your java script is stripped by google. Furthermore, gmail on android does not support media queries, and different versions of outlook have their own quirks. You have no choice but to use conditional HTML if you want to emails that render well on a variety of email clients.

This is much like the second example:

<!--[if gte mso 9]>
    <style type="text/css">
    /* Your Outlook-specific CSS goes here. */
    </style>
<![endif]-->

However, if you are not going through an email client I would have to agree with everyone else and say you should use Java Script.

Answer 6

As has been said in other posts, HTML does not support conditional logic. You have two choices here:

1) Generate the HTML dynamically using technologies such as PHP or XSLT

2) Modify the HTML DOM after the fact using Javascript

Answer 7

With acknowledgement to Kevin Loney and his javaScript solution, we should also consider CSS conditionals. If the conditional is based on browser-sensing/responsive design, then javaScripting can be bypassed:

<div class='if-part'>show something</div>
<div class='else-part'>show something</div>

"Show something" in the sense that you would merely hide the condition which does not apply. In the example below, "if-part" is shown on mobile devices only. "else-part" is shown on larger screens.

@media screen and (max-width:767px){
    .if-part{display:initial;}
    .else-part{display:none}
}
@media screen and (min-width:768px){
    .if-part{display:none;}
    .else-part{display:initial}
}

This answer offers even more CSS options to consider.