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

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

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

```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](/docs/platform/salesforce-pages-developers-guide/guide/pages-comp-cust-elements-attributes.md) contains more information on using the `<apex:attribute>` component.