html

If you have ever tried to build a custom branded community on Salesforce.com chances are you have run into a problem with Salesforce injecting its own HTML, CSS and JavaScript.

Some of the first things Salesforce introduced were the showHeader, sidebar and standardStylesheets attributes on <apex:page />.

These attributes allow you to control whether or not the standard Salesforce header/footer, sidebar and stylesheets (CSS) are rendered in the visualforce page.

  • If you set showHeader=”false” the header, footer, sidebar, and menu will not be rendered.
  • If you set sidebar=”false” the sidebar will not be rendered.
  • If you set standardStylesheets=”false” the Salesforce css files will not be included.

Summer ’13

In the Summer ’13 release Salesforce introduced the applyBodyTag, applyHtmlTag and docType attributes to <apex:page />.

These attributes allow you to control whether or not the html and body tags are rendered in the visualforce page.

Setting the applyBodyTag and applyHtmlTag to false gives you the ability to override the html tag, head tag, and body tags.

Setting the docType attribute to “html-5.0” prevents html5 tags and attributes from getting stripped away. This should make it much easier to work with HTML5 and JavaScript frameworks that use HTML attributes extensively.

Spring ’14

In the  Spring ’14 release Salesforce introduced the ability to use HTML5 pass-through attributes. This allows you to enable HTML5 features, such as client side validation.

To use the pass-through attributes all you have to do is prefix the attribute with “html-“. Adding html-placeholder=”Email” to an <apex:input /> will carry over placeholder=”Email” to the <input /> tag.

Putting it together

Putting it all together you almost have complete control over what is rendered.

<apex:page showHeader=”false” sidebar=”false” standardStylesheets=”false” applyHtmlTag=”false” applyBodyTag=”false” docType=”html-5.0″>
<html><body>
<header><h1>Subscribe</h1></header>
<apex:form html-novalidate=”true”><apex:inputText html-placeholder=”Email” value=”{!email}” /><apex:commandButton action=”{!subscribe}” value=”Subscribe” id=”theButton” /></apex:form>
</body></html>
</apex:page>

Even with all of the progress, there are still elements that get injected into the page that we cannot control.

In particular, these script tags are injected:
/faces/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript?rel=1392581006000
/static/111213/js/perf/stub.js

Do not fear!

Join me in up voting a Salesforce Idea to add an applyScriptTags=”false” that would work similarly to how applyHtmlTag does.

https://success.salesforce.com/ideaView?id=08730000000l22lAAA