If you are an advanced user and find your self constantly dealing with code, you may have noticed the built in validator on the Embed HTML app or on the field for analytics code.

In this article we’ll explain how to ensure that the code you paste is valid on the fields that require it.

What’s with the Validation

Empowerkit’s validator is a feature that performs a series of checks to see if the code you enter here is correct.

“Correct” by itself can mean a different number of things. In this case, it validates against the XHTML 1.0 Transitional DTD. If your code is written with this standard in mind, it should be correct and good to go.

We’ll talk about ways to verify/fix your code below.

Why is this validator needed?

Since these places (Embed HTML app and Custom Tracking Code) allow for custom code, it’s advised to proceed with caution. The code here, if invalid can break up your site.

And that is what was actually happening: some users were having problems with broken sites when entering invalid code.

This is the main reason why we implemented the code validator: to prevent sites from breaking.

Invalid code?

The validator checks for missing closing tags.

As you know, every element in HTML must have a closing tag (newer HTML versions anyway). So we’ll go over some examples.

Missing Closing Tag

All tags within the HTML you’re pasting should have its closing match. For example, for every paragraph tag you open, a closing one must be at the end of the paragraph.

Invalid Example

<p>empowerkit empowerkit...

<p>empowerkit empowerkit…

Valid Example

<p>empowerkit empowerkit……</p>

<p>empowerkit empowerkit……</p>

Also image or other tags that only have attributes and no content inside them must have it’s closing slash, within the opening tag.

Invalid Example

<img src=”/empowerkit.png” alt=”empowerkit Logo”>

Valid Example

<img src=”/empowerkit.png” alt=”empowerkit Logo” />

Understanding Validation Errors

There are basically two important parts to look for in an error. First: the actual broken rule that’s causing the error, and secondly: the line where you must look to find the error.

Look at the image below.

Empowerkit validator error sample

The error stated is “Content html is not valid: Opening and ending tag mismatch: h2 line 19 and root”.

We’ll focus in the “opening and ending tag mismatch: h2” and “line 19“.

This means that the h2 element was either inappropriately opened, or closed. Most probably, an </h2> closing tag is missing, but it can also be the opening tag.

Then, the line 19 is where this error was found. You can use this information to look for that line and and fix the error accordingly.

The most common mistakes (and how to fix them) are listed further down, so keep reading!

How to Fix Errors

There are a few things you can do to fix your code. The easiest one may be to parse it in an online fixer tool, such as:

                                           HTML Fix tool

Note: this tool is designed for fixing HTML only, it will ignore CSS or scripts. You should still double check your code.

“Fix My HTML” online service

But there are other options, like:

• Read the code and fix it manually

• Refer to the error messages from Empowerkit’s validator (see above)

• Use an advanced validator to check your markup (see below)

Advanced Code Validator

The W3C (World Wide Web Consortium) has made available an online validator to check your code.

http://validator.w3.org/

You can choose to enter your code directly in a field, upload a file, or enter an online address.

Enter your code by direct input, file upload or an online address

This service parses your code and provides a summary on top:

You can quickly review how many errors and warnings you have here

And details on specific errors and warnings below:

Check the line of code described here to fix errors

FAQ

My code seems legit, but Empowerkit’s validator says it’s not… what now?

Don’t assume it’s valid just because it looks like it. Try the validator from the W3C.

I copied the code from a third party, shouldn’t it work?

It probably should, but don’t be hasty, there may be errors. Run your code against a validator (such as w3c’s) to verify first.

Can I insert CSS and/or JavaScript?

Yes, the code inside those tags actually won’t be validated. So if it’s wrong, you may not get a notification and the code accepted, but if wrong, the code there won’t work.

What versions of HTML are validated?

The code is validated against the DTD (Document Type Definition) XHTML 1.0 Transitional.

Can I use server side code?

No. Server side (such as PHP, JSP or ASP) code is not supported in Empowerkit.

Where is the code validated?

The validator runs on the Embed HTML app and on the URL / Custom Tracking Code. It doesn’t run on the iFrame app.

Get in touch with us if you have questions or need any further assistance.