Visualforce components encapsulate a common design pattern and can be reused several times in one or more Visualforce pages. Salesforce provides a library of standard, pre-built components, such as <apex:relatedList> and <apex:dataTable>, that can be used to develop Visualforce pages. In addition, you can build your own custom components to augment this library.
Similar to the way you can encapsulate a piece of code in a method and then reuse that method several times in a program, you can encapsulate a common design pattern in a custom component and then reuse that component several times in one or more Visualforce pages.
To define a custom component for use in a Visualforce page: In Salesforce from Setup, click Develop | Components, then click New.
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:
<apex:component>
<b>
<apex:outputText value="This is my custom component."/>
</b>
</apex:component>
The body of an tag is the markup that is added to a standard Visualforce page whenever the component is included. For example, the following Visualforce page uses the component defined in Custom Component Markup (in this example, the component was saved with the name myComponent):
<apex:page standardController="Account">
This is my <i>page</i>. <br/>
<c:myComponent/>
</apex:page>
It results in the following output:
This is my page.
This is my custom component.
Useful Documentation
