Tips for the HTML Element

Use the HTML to embed everything from widgets to YouTube videos

Published: Tuesday, June 16, 2009

Updated: Tuesday, July 27, 2010 15:07

Organization is key in managing your Web Site effectively, especially when it comes to using multiple custom HTML elements on your Site.

General Tips:

  • It is best practice to test your custom HTML element on a hidden Sub Page before making it visible to your readers. This way your Site users will never see a broken or unfinished design.
  • Want to use the same custom HTML in multiple places? Use the Copy/Paste functionality in CP5 to paste the element in different locations on Sub Pages. This way you can have the same file displayed in multiple areas, but only have to update the file once.
  • If you decided to use your HTML element for referencing JavaScript files, you should consolidate all JavaScript files to a single HTML element. This element should be placed in the "Top Bar" section of the "Header and Footer" tab.
  • Stick to a naming convention. When writing HTML for your site, pick one naming convention for IDs and Classes and stick to it - for example use id="myElement" OR id="my-element." This will make it easier for you (and future editors) to keep your custom code organized.
  • Need some padding? Use the global HTML wrapper <div class="gutter">your HTML</div> to add instant padding around any custom HTML element. This is perfect if you are using the HTML element for Sub Pages such as "Contact Us."
  • Pay attention to the global structure. All of the global elements in CP5 have the same basic HTML structure (div > h2 > gutter). View the source of your site to see the code. It's a good idea to use this same structure when coding similar elements for your Site.
  • Do browsers matter? Absolutely. It's a good idea to code in Firefox because it has fewer quirks that Internet Explorer. It is much easier to go back and fix problems in Internet Explorer than to re-write your HTML for every other browser. NOTE: Always browser test your custom HTML before "launching" it live on your Site.
  • Using Firefox? Great! The Web Developer tool bar is a great way to check your work, find column widths and other information about your HTML. Firebug is another great Firefox add on for debugging HTML and custom scripts on your Site.

Recommended: Articles that may interest you