Custom Component Markup

All markup for a custom component is defined within an <apex:component> tag. This tag must be the top-level tag in a custom component definition. For example:

1<apex:component>
2    <b>
3        <apex:outputText value="This is my custom component."/> 
4    </b>
5</apex:component>

Notice that the markup can be a combination of Visualforce and HTML tags, just like other Visualforce pages.

For a more complex example, you could use a custom component to create a form that is used across multiple Visualforce pages. Create a new custom component named recordDisplay and copy the following code:

1<apex:component>
2    <apex:attribute name="record" description="The type of record we are viewing."
3                    type="Object" required="true"/>
4                     
5    <apex:pageBlock title="Viewing {!record}">   
6        <apex:detail />
7    </apex:pageBlock>
8</apex:component>

Next, create a page called displayRecords and use the following code:

1<apex:page >
2  <c:recordDisplay record="Account" />
3</apex:page>

For this example to render properly, you must associate the Visualforce page with a valid account record in the URL. For example, if 001D000000IRt53 is the account ID, the resulting URL should be:

1https://Salesforce_instance/apex/displayRecords?id=001D000000IRt53

You should see a page with details about the account you passed in as an ID.

Now, replace the code in displayRecords with the following sample:

1<apex:page>
2  <c:recordDisplay record="Contact" />
3</apex:page>

Again, pass in the ID of a contact before refreshing the page. You should see the page display information about your Contact.

Custom Component Attributes contains more information on using the <apex:attribute> component.

Visualforce Developer Guide

Custom Component Markup