Add Nested Components - Visualforce

Adding additional components is easy.

1. Navigate to the end of the <apex:pageBlockSection> component, and add another <apex:pageBlockSection> component with its own title. Both<apex:pageBlockSection> components must be contained within the same <apex:pageBlock> component.
2. Click Save and admire your handiwork.

   <apex:page sidebar="false">
       <apex:pageBlock title="A Block Title">
           <apex:pageBlockSection title="A Section Title">
               I'm three components deep!
    </apex:pageBlockSection>
           <apex:pageBlockSection title="A New Section">
               This is another section.
           </apex:pageBlockSection>
       </apex:pageBlock>
   </apex:page>

Note the number of “nested” components. The start and the end tag for an <apex:pageBlockSection> are both within the start and end tag for the <apex:pageBlock>component. And your first <apex:pageBlockSection> ends before the next one starts (its end tag, </apex:pageBlockSection>, appears before the start of the new one, <apex:pageBlockSection>). All of the components on a Visualforce page tend to nest in this way—and the editor tells you when you’ve made a mistake (for example, if you forget an end tag).