---
schema_version: "1"
id: 9c52c6885366b7338203c4ee3a3df65e233b09145e137242af3947eeac608360
title: Custom Component Markup
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/salesforce-pages-developers-guide/guides/pages/comp-cust/pages-comp-cust-elements-markup.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-comp-cust-elements-markup.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 9148ab1880079950e5b43c733ab6ab542a8618560e27bfa8d3803275775de379
products:
  - Visualforce Developer Guide
  - Platform Developer Content
---

# 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:

<!-- otherprops: apex_page -->
```markup
<apex:component>
    <b>
        <apex:outputText value="This is my custom component."/> 
    </b>
</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:

<!-- otherprops: apex_page set_clipboard -->
```markup
<apex:component>
    <apex:attribute name="record" description="The type of record we are viewing."
                    type="Object" required="true"/>
                     
    <apex:pageBlock title="Viewing {!record}">   
        <apex:detail />
    </apex:pageBlock>
</apex:component>
```

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

<!-- otherprops: set_clipboard -->
```apex_page
<apex:page >
  <c:recordDisplay record="Account" />
</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:

```nolang
https://MyDomain_login_URL/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:

```visualforce
<apex:page>
  <c:recordDisplay record="Contact" />
</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](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-comp-cust-elements-attributes.md) contains more information on using the `<apex:attribute>` component.