Best HTML Code Design and SEO Practices

Be very attentive when using custom HTML & CSS because you can break your page layouts if you are not careful!

Like all languages — programming language has it’s rules, syntax and a grammatical structure that should be followed. But, unlike spoken languages - programming language leaves little room for error and you can end up with big problems if you don’t follow the basic rules.

Be sure to follow these basic rules when adding manual code or editing HTML and CSS in your page builds:

1. Back-up your shop! Always build, fully test and validate your HTML and CSS in a separate TEST version of your shop before copying any code to the active live version of your shop.

2. Try working in NotePad or NotePad++ first to build the basics — some third party HTML / CSS editors will automatically add additional modifications or “coding junk” in certain cases. Using NotePad or NotePad++ will ensure you work with clean code.

You can save your working file out as a self contained .html page to check the design in your browser. TIP: While working in NotePad++ - you can open the page up in any browser and "refresh" to view the layout changes as you make them in NotePad/++.

Once completed, then upload the separate html page to a free online HTML validator to validate your code work. Some error messages you will receive from these online validators can be ignored though.

3. Work in sections and build upon each section. Double check your start and close tags for errors. Quite often you can end up missing a simple problem like: <H1> and close the tag by accident with </H2>. Hence, building the basic blank structure as in Example 2 (below) and filling in the content will help resolve some of this...

4. Very important - Always close your tags!

Attribute tag elements all have an opening < > and a closing </ > statement. Closing the tags must always be done to clearly define the end of a statement or statement group.

Example 1 - these are some commonly used open and closed attribute tags:

<H1></H1>

<H2></H2>

<div></div>

<span></span>

<p></p>

IMPORTANT NOTE:

ShopFactory already uses H tags in the right way by assigning H tags to Website titles, slogans, Page titles, page introductions, product titles, paragraph titles etc.

You should only add additional H tags for SEO if targeting a special strategy or if you are not using some of the key ShopFactory fields for design or other reasons. You need to ensure that the manually inserted H tags do not interfere and/or do not conflict with H tags automatically inserted by ShopFactory.  A new page style may be required to avoid this conflict.

The new product style is usually just a copy of the product style used with " h2 " simply replaced with " div ", and  the " /h2 " tag at the end of the sentence replaced with  " /div ".

5. Build your statement array first, then add in content and other structure. It is recommended to break it up into sections while working - you can remove line spaces and other grouping you may use later to compress the page.

Example 2 - Structured:
<H1> </H1>

<div>

         <p> </p>

         <p> </p>

         <p> </p>

</div>

<span> </span>

Example 3 - fill in the content:

<H1>Now we have added some content! </H1>

<div>

         <p>This div section is a multi-paragraph section which is separate for CSS styling.</p>

         <p>Some attribute elements can include additional tags inside the main element. But be sure you know what goes where, and when to use stuff!</p>

         <p>I’m not just a pretty face, eh!</p>

</div>

<span>Do NOT forget to double check your closing tag each time as you work! </span>

6. CSS styling can be done external, internal and inline (in the HTML page tags). But it’s best to use the Add HTML function for an "Internal" style sheet on the whole page. Those who know CSS will understand why. It just helps keep your work flow and code cleaner when building HTML & CSS styling to your page. You can do some research as there are lots of free online CSS knowledge sites. But the key is to understand the difference between external, internal and inline CSS styling.

7. Once you copy in your code — TEST and RE-TEST in your TEST shop before using it in your live shop. Yes, I’m a bit TESTY on this point since I too have made this mistake too many times.

8. Have fun with it and remember:  "<Wax-on> Don’t forget to breathe as you double check and properly close your tags! </Wax-off>". Sorry, small joke — couldn’t resist. Don't use Wax-on /Wax-off as tags — it won’t work.

 :-)