Visual Editor vs. HTML Editor - Phantom Spacing & Alignment Issues
The Visual Editor (WYSIWYG - what you see is what you get) in a Content Management System like Hubspot, Wordpress, Joomla!, etc., can be a very useful tool when you need to edit the content in one of your content modules. It is particularly helpful to people that have little to no HTML coding skills. However, sometimes using the visual editor can cause phantom code fragments to appear in the HTML of the content during normal operation with a simple operation like hitting the ENTER key to create space. This blog should help you clean up those issues.
For example, if you have several paragraphs in your content but want more space between them, you would just hit the ENTER key in the Visual editor to create that space, right? However, sometimes the translation between the Visual and HTML editor don’t always end up the way it is intended. You may find that you went through your content and added more space between your paragraphs, but when you save and preview it, there is even more space than you anticipated. Then when you try to undo what you did by deleting those spaces, you find that it still looks off. So what’s going on!?
This is where the HTML Editor becomes handy…
Sometimes a simple command like hitting ENTER to create more space can cause a code fragment to appear in the HTML of the content. You can’t see it in the Visual Editor, but it’s there. So go into the HTML Editor and look for fragments like these between your paragraphs and remove them:
<p> </p><span></span><div> </div> 
Notice these fragments have no actual content in them. But because there is an opening tag <p> and a closing tag </p> with a non-visible code fragment like “ ” inside of it, it is creating space that you cannot see in the Visual Editor in your CMS. Here is another example of something you might see with the bad code highlighted:
<p>This is a good paragraph that belongs in the content module on the page</p><br /><br /><p> </p><span><span></span></span> <p>This is another good paragraph that belongs in the content module. <a href=”http://www.somelink.com”>With a link in the paragraph.</a></p>
As you can see there are two breaks <br /> between the two paragraphs that belong, but there is also some phantom code with opening and closing tags that have no content inside them. Get rid of those fragments to eliminate the phantom spacing and alignment issues you may be having.
This tip can be useful on most Content Management Systems like Hubspot, Wordpress, Joomla!, etc. It is a common problem that can be seen with most Visual Editors when you have repeated editing and changes within a single content page over time, but you never look at the HTML Editor to see what it’s actually doing in the code. But now you know what to look for in case that happens to you!
Free Conversion, SEO & SMO Guide for Blogs
