Creating an Empty HTML5 “Container” Page

Use an empty container page when you want to bypass most of Visualforce and add your own markup. A container page is especially useful for HTML5 and mobile development, and other web apps for which standard Visualforce output isn’t desired.

You use Remote Objects, JavaScript remoting, or other Force.com APIs to make service requests and then render the results with JavaScript.

The following code provides a sample container page to start with.

1<apex:page docType="html-5.0" applyHtmlTag="false" applyBodyTag="false"
2           showHeader="false" sidebar="false" standardStylesheets="false"
3           title="Unused Title">
4<html>
5    
6    <head>
7        <title>HTML5 Container Page</title>
8    </head>
9    
10    <body>
11        <h1>An Almost Empty Page</h1>
12  
13        <p>This is a very simple page.</p>
14    </body>
15    
16</html>
17</apex:page>

The <apex:page> component and its attributes is the core of a container page’s definition.

docType="html-5.0" sets the page to use the modern HTML5 docType.
applyHtmlTag="false" and applyBodyTag="false" tell Visualforce that your markup supplies the <html> and <body> tags so that it doesn’t generate its own.
When you set applyHtmlTag or applyBodyTag to false, the title attribute of the <apex:page> component is ignored.
Note
The showHeader="false", sidebar="false", and standardStylesheets="false" attributes suppress the standard header, sidebar, and style sheets that add the Salesforce user interface and visual design to Visualforce pages.

The <head> tag isn’t required in a container page, but it’s a good idea to include it. If you need to add values to the <head> element, you must add the <head> tag yourself. In that case, Visualforce adds any of its required values to your <head>. Otherwise, Visualforce renders its own <head> to add any necessary values.

You can use Visualforce components, such as <apex:includeScript>, <apex:stylesheet>, and <apex:image>, to reference static resources on the page. The output of <apex:includeScript> and <apex:stylesheet> is added to the <head> element. If you didn’t include one, Visualforce adds its own. The <apex:image> output is rendered wherever you place it on the page.

An “empty” Visualforce page renders the minimum amount of HTML markup, but it isn’t completely empty, or free of resources you don’t control. JavaScript code that’s essential for Visualforce, such as instrumentation, is still added. Visualforce also automatically adds resources required for markup you add. For example, references to Remote Objects or JavaScript remoting resources, if you use them in your code.

Note

Visualforce Developer’s Guide

Creating an Empty HTML5 “Container” Page