Cleaning up Code
Whether you’re working with a WYSIWYG editor, or hand coding your projects, it’s a good practice to check the hierarchical order, syntax, and spelling of your HTML, CSS, JavaScript, or other programming code. Even using the best programs available, at some point your code could include errors because you are human.
No matter how conscientious a content editor you are, the HTML in your pages will inadvertently become cluttered with unnecessary markup, redundant tags, and outright detrimental code that can negatively impact the presentation and functionality of your web pages unless you take steps to correct it.
Many of these errors occur when pasting content onto your pages from other sources like a Word document, an Excel file, an email or another website. Other errors might include a simple typo or from coding mistakes that happened behind the scenes when moving elements around the page.
Automated Clean up Using Siteimprove Quick Fix Report
One very common code problem is duplicate, or empty, hyperlinks on a webpage. This happens when a code editor leaves in the code (for no apparent reason) when you move a link from one spot on the page to another. These empty links are essentially just bits of code that don’t surround any content and are invisible to your eye, which means they won’t appear as visible errors in the browser. However, they do display for screen readers and other assistive devices - causing confusion for those users.
As is often the case, such extra code might not be noticeable during the building phase of your site, but it will often rear its head during the testing phase prior to publishing.
To minimize coding errors on your web pages, be sure to check the Siteimprove Quick Fixes report for your website and fix them as you go. Siteimprove automates the cleanup process within any managed site by identifying and highlighting misspelled words, nesting errors, broken links and empty links – then it’s simply up to you to go to the page and clean up the errors Siteimprove points out.
Siteimprove doesn’t however, clean up the unnecessary markup and redundant <span> tags that appear from a copy/pasting from Word.
Cleaning text from Word Files
When working from a word file the best way we’ve found to keep the code clean is to use the shortcut, Control + Shift + V when pasting text.
In Drupal, when you use the paste function [Shift + V, or on Mac Cmd + V], a message pops up asking if you want to clean up the code. However, when you click YES, no code is cleaned. It’s a myth.
However, if you use the shortcut [Control + Shift + V, or on Mac Cmd + Shift + V] when pasting text, all tags - except for bullets – are cleaned out.
To alleviate the task of hand plucking these bullets out after copying/pasting the text into the text editor, consider changing the formatting on the original document to remove the bulleted lists. That means you'd copy a text list that doesn’t include bullets at all, and paste that clean list into the content editor. Then one can simply select all the items that were in the list and using the Bullet list feature in the text editor, add them all back in. However, the permissions of a shared doc sometimes do not allow that. In that case, you can manually delete the bullets, cleaning up the list; select all the items, and add them back in using the text editor of the block.