HTML code guidelines and tips

Sandvox Pro has many ways of allowing you to use your own custom HTML code:

Raw HTML pages and pagelets
Code Injection
The Paste HTML into Text menu command
The Edit Raw HTML menu command.

Below are some tips and guidelines to help you get the most out of these features and avoid some possible pitfalls.

The ability to insert custom HTML code is an advanced, pro-level ability of Sandvox. Because of the extent of HTML and the many ways in which HTML can be incorporated into a Sandvox site, Karelia does not attempt to provide its own HTML tutorial, nor can it provide specific troubleshooting advice related to an individual user's HTML code.

If you would like to explore the possibilities that using HTML in your Sandvox site presents and need some assistance, we encourage you to visit the following third party sites that specifically address HTML issues:

Validate your HTML

After finishing your HTML code, please use Sandvox's built-in validation to check it.

HTML Type

Please try to use valid XHTML, closing all tags and using lowercase tag names, etc.

If not, you can set the HTML type of a Raw HTML page or pagelet using the Selection Inspector. Many sources of HTML code on the web use old-style HTML, so be sure to set the type to match your HTML code. Otherwise, the page may fail to validate.

Note that you can only set the HTML type of Raw HTML pages and pagelets. In all other cases of using your own HTML code there is no such setting; you must use valid XHTML code.

Things to Avoid

Avoid using <img> tags pointing to the _Media directory, which is used internally by Sandvox.

Page tags

When using custom HTML code within a Sandvox site, it only forms part of a page. Therefore you should only use snippets of code. In particular, do not use the <html>, <head> and <body> tags.

The exception to this is if you are using a Raw HTML page with the "Fill Entire Page" box checked. In this case, you really are writing the HTML code for an entire webpage and need to provide all tags, including <html>, <head> and <body>.

Heading tags

Please avoid use of the <h1> and <h2> tags and be cautious with <h3> and <h4>, since these are already defined and used by Sandvox designs.

Javascript

Javascript can be used anywhere HTML code can be inserted. Note that if you have the "show live data feeds" preference turned off, scripts will not load while editing a site. Please see the "Javascript" article for more information.

If your custom HTML contains only a script, you may not see the results of that script until you have loaded or reloaded the page. This is a limitation in Sandvox for now. You also may have trouble clicking on this block if there is no text to click on. A work-around is to click on a block of editable text "above" this, and then use the "tab" key to select the desired block. Then, choose "Edit Raw HTML..." from the Edit menu.

What if I can't provide valid HTML?

Sometimes you may be unable to provide proper valid HTML code. Although it is less problematic to have valid HTML, your site will probably function perfectly well anyway. However, we would strongly recommend that you test the site out on a range of different web browsers first before publishing it.