How To Deal With HTML Errors When Writing An Article !

If you guys are anything like me, then the majority of you will use the Wordpress visual editor when writing your articles & no doubt many of you have encountered problems with spacing or justification of text. No matter how hard you try, you just cannot get the spacing or justified text correct, each time you save, it reverts back to as it was originally.

This article will show you some of the more common causes of HTML errors, how to avoid them & more importantly, remedy those that do occur from time to time.

Of course there are those that will tell you that any serious blogger would use the HTML editor instead of the visual editor & by doing so would not have these errors to deal with. Well that’s not much of a help when you are racking your brain trying to find where the problem lies! Furthermore, one has to be fully conversant with HTML in order to be able to use the HTML editor, I am not & I have no doubt that there are many of you out there in exactly the same predicament as me!

Do Things In Order To Help Prevent Errors

If you are writing a fresh article then follow this simple guide to help minimize errors in your HTML code;

1. I highly recommend using a basic text editor to type your articles,  NotePad++, NotePad, MS Word. The one big advantage to MS Word is the spelling & grammar checks, (this can be of great benefit to those of you that do not have English as your first language!) Yes I know it is not perfect, but it will often highlight simple errors in grammar, that once corrected, can make a huge difference to the readability of your article. Also the spell checker is far superior to the one used in the Wordpress HTML editor.

2. Always use the correct text insertion method, DO NOT paste directly into the editor as this will introduce errors!

If you used a text editor to type your article then use 

If you used MS Word to type your article then use 

3. Having inserted your article into the editor, now start at the top of the page and adjust your spacings. Remember that anywhere you intend to place a heading tag (H2, H3 etc) you will need to leave two clear spaces above & also below the heading.

4. Ok spacing completed, now use the    button to set your headings to either H2, H3 etc. Remember that the only H1 heading on the page should really be the title to the article, this is more often than not, set by the theme. So if your theme sets your title to H1, then I would use H2 throughout the article, but if your theme sets the title to H2 then I would use H3 throughout the article. This is purely for SEO benefit & is not set in concrete !

5. Once you have your spacing of headings & paragraphs sorted out, then start at the top of the page again & select each paragraph in turn & then use the Justify Button    to tidy up the ends of the text.

6. Now insert any images you wish to use within this article.

Note: It is a good habit to leave a 10px horizontal gap between your image & the text.

7. Finally if you need to use the “More Tag”, select the area of text in your first paragraph that you wish to use as the excerpt, then simply place your cursor in the desired spot & click the ”More Tag” button  . Once the line appears on your page, press the enter key to leave one clear line below it.

If all has gone according to plan, you should now be able to save your article and not have any errors in your HTML.

Dealing With Errors In Your Code

If the worst has happened and you have inadvertently introduced an error into you code, then stay calm, do not panic ! I will show you the easiest methods I have found in order to trace and deal with errors.

1. Go through your article from top to bottom, remove all heading tags, the more tag (if used) & the text justify. Then select all text from top to bottom & once highlighted blue, click the “remove formatting” button  , this will very often remove the error that is causing the problems. Then simply redo all heading tags, the more tag (if used) & the text justify.

2. If the above method fails to cure the problem, then you have no choice but to examine the HTML code for the error.

Common Causes Of HTML Errors

Example 1 

<p style=”text-align: justify;”><img title=”Angry-Computer” src=”http://www.my-blog-review.com/wp-content/uploads/2010/02/Angry-Computer.jpg” alt=”" width=”288″ height=”208″ />If you guys are anything like me, then the…….

In the example above, the command to justify text has been placed incorrectly, move the entire red text & place it between the > & If you guys. In other words the justify command should be placed after the image command ends.

Example 2

you just cannot get the spacing or justified text correct, each time you save, it reverts back to as it was originally.<!–more–> </p>

In the above example, the more tag has been set incorrectly, move the close paragraph tag </p> to the end of the paragraph text and before the more tag, to correct this error.

Example 3

<p style=”text-align: justify;”><strong>2.</strong> Always use the correct text insertion method, <strong>DO NOT paste directly into the editor as this will introduce errors!</p> </strong>

 In this example the closing tag for bold text has appeared after the paragraph closing tag & should actually be placed before it. This is a perfect example of what is meant by ” invalidly nested tags “

Note:In order to minimize the occurrence of HTML errors, I would suggest that you go the the writing settings in your admin panel & make sure there is a check in the box indicated in the image below.

This will not cure everything, but it should at least help to minimize any errors in your HTML code.

Steve Nickson | Create Your Badge