This is a short lesson, but it can save you a lot of headaches later.
The Problem With Wrong Formatting
Does the following code look like trash to you?
<p class="MsoNormal" style="margin-top:0in;margin-right:0in;margin-bottom:8.0pt;margin-left:0in;line-height:107%;font-size:14.0pt;font-family:'Times New Roman',serif;">
<i style="mso-bidi-font-style:normal;">
<span style="mso-ascii-font-family:'Times New Roman';mso-hansi-font-family:'Times New Roman';mso-bidi-font-family:'Times New Roman';">
This is an example with an
<u style="text-underline:single;">underlined</u>
word.
</span>
</i>
</p>
If you said yes, then I agree – and I build websites for a living.
In contrast, here is how that exact same sentence should look in pure, clean HTML code:
<p><em>This is an example with an <u>underlined</u> word.</em></p>
So where does the mess come from?
We see this issue with many of our clients. Here is a typical conversation:
Client: “Hey! The fonts on the website look messy. Can you take a look?”
Us: “Sure thing!”
We scan the fonts, analyze the code, deactivate plugins, and try to figure out where this “malformed text” is coming from (all while billing the client for the investigation).
And eventually, we notice that it is the client who put it there!
Us: “Hey! So, it turns out the formatting was brought in with the text. Do you use a tool like MS Office for your drafts?”
Client: “Yes, that’s where I do all my editing. Once I’m finished, I just copy and paste it into the product page.”
Us: “Yeah, don’t do that!”
The Problem:
When you copy-paste directly from Word or Google Docs into a WordPress editor, you aren’t just copying text – you’re copying hidden HTML and styling code. This “junk code” conflicts with your site’s styling, leading to weird fonts, broken layouts, and unnecessary bloat.
Why This Hurts Your Website
This does not just look ugly. It also makes the website harder to maintain:
- Maintenance & Performance: Hidden styles can override your website’s design and make future edits unpredictable. Repeated across many pages, the extra markup also adds unnecessary page weight.
- Accessibility: Formatting that changes the visual appearance without using the correct headings, lists, and other HTML structure can make content harder to navigate with assistive technology.
The Solution: Strip the Formatting
So what is the answer?
Shift!
When you paste, hold down Shift as well. In most browser-based editors, Ctrl + Shift + V pastes the text without its original formatting.
Mac users can bring in the same formatting mess. In most browser-based editors, use:
- Windows: Ctrl + Shift + V
- Mac: Cmd + Shift + V
Alternative Tricks
If shortcuts aren’t your thing, here are two more ways to keep your code clean:
1. The Intermediary App Trick
Open a plain text editor on your computer – like Notepad (Windows) or TextEdit (Mac, set to Plain Text). Paste your Word document in there first. Then, copy it from Notepad and paste it into the website. Notepad automatically strips away all the Microsoft junk code.
2. The WordPress Buttons
Some website editors also have built-in “Paste as text” or “Clear formatting” tools. If your editor shows one, you can use it to strip unwanted formatting during or after pasting.
In Conclusion
Save yourself the hassle and do it right the first time. Otherwise, you might end up with 500 products that need to be cleaned up. One extra key while pasting can save hours later.