Conditional Rendering inside Visualforce pages

Question

I have an overwritten edit page for my custom object, which have different record types with different fields.

The simplified desktop version of this VF page looks like this:

<apex:page standardController="CustomObject__c" extensions="CustomObjectCtrlExt" >

    <apex:form>

        <apex:pageBlock>         

            <apex:pageBlockButtons >
                <apex:commandButton value="Save" action="{!save}"/>
                <apex:commandButton value="Cancel" action="{!cancel}"/>                
            </apex:pageBlockButtons>

            <!-- Record Type 1 -->
            <apex:pageBlockSection rendered="{!recordtypename == 'RecordTypeName1'}" >
                ...
            </apex:pageBlockSection>


            <!-- Record Type 2 -->
            <apex:pageBlockSection rendered="{!recordtypename == 'RecordTypeName2'}" >
                ...
            </apex:pageBlockSection>


            <!-- Record Type 3 -->
            <apex:pageBlockSection rendered="{!recordtypename == 'RecordTypeName3}" >
                ...
            </apex:pageBlockSection>



            ...



    </apex:form>

</apex:page>

Now I want to create a second VF page for my mobile users with HTML 5.

How do I implement the conditional rendering with HTML 5 ?

Of course, something like <div rendered="{!recordtypename == Name1}"> doesn't work.

Answer 1

Update (2017)

The trick below is good for 90% of cases, especially if you need a placeholder to which rerender might eventually have to inject something. But it can cause problems if you render VF as PDF and you're using this conditional rendering to hide table rows; inside <apex:repeat> for example. (Of course best would be to filter the data in a controller but sometimes you need to make-do without involving Apex)

Recently outputPanel started to inject <span> tags, even with layout="none"; and they break the table into separate rows with renderAs="pdf" Knowledge Base link.

So... what's another VF tag that contains rendered attribute but for sure doesn't generate any HTML so tables don't break...

<table>
<thead>
    <tr><th>{!$ObjectType.Opportunity.fields.Name.label}</th></tr>
</thead>
<tbody>
    <apex:repeat value="{!acc.Opportunities}" var="opp">
        <apex:variable var="renderingHack" value="whatever" rendered="{!opp.Probability > 0}">
            <tr><td><apex:outputField value="{!opp.Name}" /></td></tr>
        </apex:variable>
    </apex:repeat>
</tbody>
</table>

---

Original answer (2014)

<apex:outputPanel layout="block" rendered="{!recordTypeName = 'foobar'}">
    plain html here
</apex:outputPanel>

Will render into a <div>. Experiment with different values for layout param. apex:outputText can be used in similar way but somehow I prefer the panel, feels, cleaner that way.