CODEWITHSUNDEEP
html
balaweblog
balaweblog

Reputation: 15470

Conditional Formatting in HTML Tags

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

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

Upvotes: 10

Views: 162526

Answers (9)

yash
yash

Reputation: 11

These days, you can use frameworks like React.js and the code will look something like this:

{(condition)?(<div>True Condition</div>):(<div>False Condition</div>)}

The Javascript runs on the client side, therefore, first evaluates the condition and then renders the HTML object as per the condition.

Or, you can explore framework like Next.js if you want to do the javascript work on the server side.

Upvotes: 0

Umesh P
Umesh P

Reputation: 1

    ***Syntax***

{% if condition1 %} lines of code

{% elif condition2 %} lines of code

{% else %} lines of code

{% endif %}

    ***Example***

role='Manager'

{% if role=='Admin' %} Hello admin

{% elif role=='Manager' %} Hello Manager

{% else %} You are normal user

{% endif %}

Upvotes: -2

Parapluie
Parapluie

Reputation: 736

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.

Upvotes: 3

Bill
Bill

Reputation: 49

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.

Upvotes: 4

17 of 26
17 of 26

Reputation: 27382

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

Upvotes: 2

Cerebrus
Cerebrus

Reputation: 25775

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.

Upvotes: 4

Kevin Loney
Kevin Loney

Reputation: 7553

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.

Upvotes: 5

hydrapheetz
hydrapheetz

Reputation: 3580

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

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

Upvotes: 15

wilsoniya
wilsoniya

Reputation: 344

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.

Upvotes: 9

Related Questions