Conditionally Render HTML in Visualforce

Question

I am looking for a way to conditionally render HTML based on the value of a field on an opportunity. I have taken multiple stabs at it but can't figure out where I'm going wrong. First I tried to work everything through one visualforce page using an IF statement, but then decided it may work better if I utilized components as well as a page.

Here's what I have, any guidance would be appreciated.

Page:

<apex:page standardController="Opportunity"

action="
  {!
  IF(!opportunity.Contact_Attempts__c > 3, 
       (<c:ViableOppComponent/>),
       (<c:DeadOppComponent/>)
    )
  }">
</apex:page>

Components: - both use same code, just different message

<apex:component >  

<style>
h1 {text-align:center;color:green;font-size: 20px;width:100%;margin:0 auto}
#container {width:100%;margin:0 auto;text-align:center;}
</style>

<div id="container">
    <br />
    <h1> This prospect is still viable. Continue outreach. </h1>
 </div>


</apex:component>

Answer 1

Add your components inside apex:outputPanel and use rendered attribute to display and hide

<apex:page standardController="Opportunity" >

    <apex:form>
        <apex:outputPanel rendered="{!(opportunity.Contact_Attempts__c > 3)}" >
            <c:ViableOppComponent/>
        </apex:outputPanel>
        <apex:outputPanel rendered="{!(opportunity.Contact_Attempts__c <= 3)}" >
            <c:DeadOppComponent/>
        </apex:outputPanel>
    </apex:form>

</apex:page>

As @sfdcfox suggested. Thanks for your suggestion.

<apex:page standardController="Opportunity" >

   <apex:form>
        <c:ViableOppComponent rendered="{!(opportunity.Contact_Attempts__c > 3)}"/>

        <c:DeadOppComponent rendered="{!(opportunity.Contact_Attempts__c <= 3)}"/>
   </apex:form>

</apex:page>

Answer 2

If no real need in creating a separate component - just use this on your div:

<div style="{!IF( myRenderCondition == false, 'display:none', '')}" >...</div>