How to use valid W3C documents to maximize your experience with Pinegrow
To the best of our knowledge, Pinegrow is currently the only multi-platform visual HTML editor that allows you to create HTML documents and projects from scratch and import your existing HTML documents and projects to edit them.
When you create HTML documents using one of Pinegrow’s built-in libraries (Standard HTML, Bootstrap, Foundation, Tailwind …), creating documents with syntax errors is an uncommon situation.
Indeed, all of the Library elements included in Pinegrow have a valid structure. Unless you decide to modify your documents’ code using the integrated code editor or an external code editor (Atom, Visual Studio …), you should not be bothered. The HTML code produced by Pinegrow should be valid at all times.
With great power comes great responsibility — Uncle Ben, Peter Parker principle
Similarly, when you import a project created by a third party, amateur or professional, free or paid, everything will be fine in most cases. Pinegrow allows you to immediately edit your documents in the usual way (modifications, saving, etc.).
However – and this is a situation frequently reported to the Pinegrow technical support email – the HTML code of some files from third parties may contain syntax or structure errors.
▪ Unclosed elements: If an element is not closed properly, then its effect can spread to areas you didn’t intend
▪ Badly nested elements: Nesting elements properly is also very important for code behaving correctly.
▪ Unclosed attributes: Another common source of HTML problems.
Not only can these errors be very challenging to identify, but they will also penalize your site’s general quality (SEO among others) and, above all, will severely compromise the proper functioning of Pinegrow.
Indeed, most standard browsers such as Chrome, Internet Explorer or Firefox will accept a problematic HTML document and try to display it as well as possible. In that case, the advanced functionalities of Pinegrow, which rely on the use of a valid document structure, will be largely disrupted if it encounters an anomaly in the code and it may cause severe malfunctions or even a crash of the application in the most acute cases.
Although we anticipate such problems by regularly improving our parsing module, Pinegrow is much more than a standard browser. Its sensitivity to syntax or structure problems can cause significant malfunctioning.
In some cases, the display can look correct in the page view when you load your document in Pinegrow. However, features such as the WordPress theme builder, master pages, smart components, interactions, and the management of your elements’ properties can show unexpected, erratic, and therefore abnormal behaviors.
Note: Pinegrow offers a basic error validation module (Page > Check for HTML errors….), but it turns out that it can be insufficient.
Fortunately, Pinegrow is not an all-or-nothing development tool, so many external solutions exist.
Therefore, if you encounter a display or functional problem when using third-party documents, we recommend, as a very first step, that you check the source code using the following validation tools:
Online, the W3C Markup Validation Service: https://validator.w3.org/
Read more about W3C validation basics: https://validator.w3.org/docs/help.html#validation_basics
You can also use Visual Studio Code and a Web Validator extension so the process will be more convenient.
Note: There are dozens of other extensions, tools and information sources on the web that you can find using your favorite search engine.
We highly recommend the reading of this excellent document: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML, which will allow you to approach the debugging of your HTML documents in a didactic way.
In conclusion, markup validation is an unpleasant, even painful step that requires some knowledge and an adequate level of understanding of the code structure; however, your documents’ syntax must be correct if you want to use the innovative features of Pinegrow with confidence and particularly if you decide to load and modify third party HTML templates.