HTML Tags Added or Modified by Visualforce

By default, Visualforce automatically adds required HTML tags to a page to ensure the result is a valid HTML (and XML) document. You can relax and even override this behavior.

For pages using this automatic behavior, Visualforce adds HTML tags in two contexts: a simpler GET request context, when a page is initially loaded and rendered; and a POSTBACK context, when an <apex:form> is submitted back, an Ajax request is made using an <apex:actionXXX> tag, and so on.

In a GET context, the HTML rendered by Visualforce is somewhat relaxed. It adds <html> tags to wrap the page, <head> tags to wrap the page’s title and any stylesheets or scripts added to the page using <apex:stylesheet> or <apex:includeScript>, and <body> tags to wrap the page’s content.

HTML generated by other Visualforce tags will be complete and valid HTML, and you can’t save a Visualforce page with invalid static XML. However, HTML added by expressions that access controller methods, sObject fields, and other non-Visualforce sources isn’t validated by Visualforce before it’s returned. It’s therefore possible to return an invalid XML document via a GET request.

In a POSTBACK context, Visualforce is more strict. Because the contents of the request might need to be inserted into an existing DOM, the response HTML is post-processed to ensure it’s valid. This “tidying” fixes missing and unclosed tags, removes invalid tags or attributes, and otherwise cleans up invalid HTML so that it will insert cleanly into the DOM of any page it’s returned back to. This behavior is intended to ensure that tags that update an existing DOM, such as <apex:actionHandler>, work reliably.

  • Relaxed Tidying for the HTML5 Doctype

    To relax the default HTML tidying for HTML5 applications where it causes problems, set the docType to “html-5.0” and the API version to 28.0 or greater.

  • Manually Override Automatic <html> and <body> Tag Generation

    Use the applyHtmlTag and applyBodyTag attributes of the <apex:page> tag to suppress the automatic generation of <html> and <body> tags, in favor of static markup you add to the page yourself.

  • 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.