An alternative Blogger Editor to edit your posts

Sometimes when you are editing HTML in Blogger you run across errors that turn a HTML tag red, and you have no reason why this is the case. For long pages or post this is very hard. 

Would not be great to be able to test this HTML first in a editor first? Well now you can HTMLLint - The HTML Validator and Formatter (html-lint.com) has the same HTML validation engine as Blogger's editor. 

So now you can test you HTML, and if you can't locate the error cut into smaller parts, and paste into the editor.

If you can't understand the error, some times it's great to reduce the noise and duplicate tags and you can do that with HTML Tidy. 

The command line version is well known, and is online as well at HTML Tidy - Online Markup Corrector

This generates the following reduced HTML. 

<blockquote>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxrUpnkHyJjAuZSQUywKNesmgwIJ7UIJwKsChZkG2NApkQazCpghvPFByagXhjm6j-tePHfcc30UfCd5PlEHyUXvarVXwSKLZylEn50J0e2Ww1Bl3VYrSFTB1utn0bClxMagSFuBre0k4m/s450/WorldWideFirstWreath.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxrUpnkHyJjAuZSQUywKNesmgwIJ7UIJwKsChZkG2NApkQazCpghvPFByagXhjm6j-tePHfcc30UfCd5PlEHyUXvarVXwSKLZylEn50J0e2Ww1Bl3VYrSFTB1utn0bClxMagSFuBre0k4m/s320/WorldWideFirstWreath.png" width="320" border="0" data-original-height="410" data-original-width="450" /></a></p>
</blockquote>

Here's the original HTML that causes errors in the Blogger Editor.

<blockquote style="border: none; margin: 0px 0px 0px 40px; padding: 0px;">
    <p dir="ltr" style="text-align: left;" trbidi="on">
        <p class="separator" style="clear: both; text-align: center;">
            <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxrUpnkHyJjAuZSQUywKNesmgwIJ7UIJwKsChZkG2NApkQazCpghvPFByagXhjm6j-tePHfcc30UfCd5PlEHyUXvarVXwSKLZylEn50J0e2Ww1Bl3VYrSFTB1utn0bClxMagSFuBre0k4m/s450/WorldWideFirstWreath.png" 
               style="clear: left; float: left; margin-bottom: 1em; margin-left: 1em;">
              <img border="0" data-original-height="410" data-original-width="450" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxrUpnkHyJjAuZSQUywKNesmgwIJ7UIJwKsChZkG2NApkQazCpghvPFByagXhjm6j-tePHfcc30UfCd5PlEHyUXvarVXwSKLZylEn50J0e2Ww1Bl3VYrSFTB1utn0bClxMagSFuBre0k4m/s320/WorldWideFirstWreath.png" width="320">
            </a>
        </p>
    </p>
</blockquote>