SHARE

Quick Content Editing Tips & Fixes Found In Code

Editing and implementing content onto a website can be really easy or really difficult. It just depends on the day. Sometimes you do everything right, but little issues spring up that make it necessary for you to go into the backend code (or HTML editor) to hunt for the solution, which can take forever and lead to great frustration, especially if you don’t know what to look for.

Never fear. For quick fixes to common HTML code problems that may be messing with your content, please continue reading. This guide will identify the top five typical issues people encounter, followed by explanations on how to fix them. To begin with, let’s take a look at a basic understanding of how to access the HTML editor and interpret what you see in there.

How Do I Access The HTML Editor?

So if you are editing or implementing content and it is doing something strange, you will need to have a look at the code in the HTML editor. Some websites will just have an “HTML editor” option labeled in plain English for you to select. Other times you may see the function labeled another way like “Basic Text Box” or “Rich Text Editor.” And for certain site platforms like IAPPS you will scroll down to the bottom of your editing window and select the icon with the “greater than/less than symbol":

While the labels and buttons for accessing the HTML editor may differ from site to site, in general, when you’ve clicked on a button in editor that takes you to a coded version of your content, then you’re in the right place.

A Basic Understanding Of How Things Look In The HTML Editor:

Headers are the bigger lines of text that you may use to label different sections within your content or title the content. In the example below, “Invisalign” is an H1 header because it is the title. Then “What Makes Invisalign Different?” is an H2 header—slightly smaller. Anything smaller than that, which is still bigger than the normal text, would descend in order (i.e. H3, H4, and H5).

EXAMPLE IN TEXT:

EXAMPLE IN CODE:

<h1>Invisalign</h1>
<h2>What Makes Invisalign Different</h2>

Regular text in code would begin with a paragraph symbol <p> and end with a close paragraph symbol </p>.

EXAMPLE IN CODE:

<p>While traditional braces and other forms of braces like clear braces and lingual braces are the most common means for straightening teeth, there now exists an increasingly popular alternative: Invisalign clear aligners.</p>

Other useful coding to note for word styling:

  • Italicized word "healthy"
    <em>healthy</em>
  • Bolded word "gorgeous"
     <strong>gorgeous</strong>
  • Underlined word "help"
     <span style="text-decoration: underline;">help</span>
  • A word with an apostrophe
    &rsquo; = apostrophe
    So, Dr. Storie&rsquo;s = Dr. Storie's

ISSUE #1: I Want More Space Between Lines Of Text, But When I Hit Enter The Space Is Too Big.

If you are seeking that nice median between no space between lines of text and too much space between lines of text, instead of hitting enter after a sentence, which creates a big space (as noted by the image below), go into the HTML editor. In the code, in between the last line of text and the line of text you are trying to create distance from, insert a <br /> on its own line. This will create a good size space.

EXAMPLE IN TEXT:

Too Big
Too Little
Just Right

EXAMPLE IN CODE:

Before
After

ISSUE #2: How Do I Make Bullet Points?

To begin your list, after you finish a paragraph you will need to enter a <ul>, then each item in your bullet point list should begin with a <li>, and end with a </li>. So a bullet point item would look like this:

<li>Magical Princess</li>

Finally, when your list is done, on the following line enter a </ul>.

EXAMPLE:

IN CODE

EQUALS THIS IN TEXT

ISSUE #3: Why Is One Section Of My Text An Inexplicably Different Color, Font, Or Size Than The Rest?

If you enter text into editor and for whatever reason it goes berserk and some writing ends up a different color, font, or size than the rest, you’ll want to go into the code and basically play a game of “One of these things is not like the other.”

First, find the section with the problem. In the below example the H2 called “Start Smiling Today” is black when it should be purple. So I go into the HTML editor and look for <h2>Start Smiling Today</h2>. Typically, such errors happen because a "span style" instruction has situated itself there. You will note something that looks like this: <span style="color:#0000;"> in front your problem text and then a </span>  afterward. Delete those areas so you are left with clean text. Then your text will normalize.

***Note, you will have to be surgeon-level delicate when removing these span styles because you don’t want to pull out the wrong one or pull out too much. That’s why this is a game of “One of these things is not like the other,” and not just a simple hatchet job where you obliterate anything with a <span>. Sometimes there are span styles in the code that belong there. So find the ones that don’t and only remove them. For this example below, I would compare what my non-weird H2s look like in the code with the weird one. That’s how I would figure out what “extra” span style element needs to be removed.

EXAMPLE:

In this example, you copy and pasted all your text at once. And then you formatted all your H2s the same way. However, the third H2 is black while the other ones are purple. So in the HTML editor delete the span style color code that is currently appearing for that H2.

BAD : <h2><span style="color: #29323c;">Start Smiling Today</span>&nbsp;</h2>

GOOD: <h2>Start Smiling Today</h2>

You may be wondering why this happens at all. The reason is because when you paste text into the editor it might still be richly formatted vs. plainly formatted.

In general, one great way to implement text and avoid this problem most of the time is by selecting the “paste from word, strip font” button, which is marked by the little W over the clipboard.

The advantage of this is that it keeps the hyperlinks you inserted in the original text, so you don’t have to re-enter them. The downside is that once in a while it does not completely strip all extra aspects of span styling. It does not create completely plain text. You can format completely plain text in your computer’s Text Editor, but that will strip your hyperlinks too. And since this styling error occurs only once in a while, and the time you save by utilizing the “paste from word, strip font” button can be significant, I wouldn’t approach it that way.

ISSUE #4: Sometimes I Input The Text Like Normal, But When I Save The Text Looks Compressed & Squished Together. How Do I Fix That?

Example Of Compressed Text:

If text is freaking out and looking all compressed and weird once you save it, get rid of all the <div> and </div> you see in the code. ***Note, you would replace the ones that start and end lines of text with  <p> and </p> and delete the extra <div>&nbsp;</div> that might be in between the lines of text as well.

EXAMPLE ONE:

EXAMPLE TWO:

If you had a line of text that read: <div>the patient is awesome</div> <div>&nbsp;</div> <div> the patient has shoes</div> <div>&nbsp;</div> 

You would want to turn it into: <p>the patient is awesome</p><p> the patient has shoes</p>

Swapping the <div> and </div> with <p> and </p> at the beginning and end of the lines plus deleting the extra <div>&nbsp;</div> between the lines fixes the problem. Like so:

ISSUE #5: How Should Linked Text Look In Code?

EXAMPLE ONE:

<a href="/treatment/the-speed-system.aspx">the word you are linking to<a/>

EXAMPLE TWO:

<a href="http://www.mybraceland.com/treatment/types-of-braces/types-of-braces" returnvalue="/treatment/types-of-braces/types-of-braces,,Page,_self,,,false,false,false,false,df6f9927-26bf-4e21-8732-f524fcb90637,;NoWatch">the word you are linking to</a>

THE GIST IS:

The linked area begins with an <a href= followed by the URL pointing to the designated page you are linking to followed by the actual word you are linking to followed by the </a>.

***Note, if a link extends past the designated text you want it to apply to, make sure the text you are trying to link ends with a </a> in the code. Without that ending, it will link all text that comes after that until the end of the paragraph, marked by </p>.

written by: Geanna Culbertson

Check Out Other Relevant Guides

Let’s Talk Shop! Learn how to grow your business from the Wpromote experts.

Thank You For Your Interest In Wpromote!

Your message has been received and you will be contacted by one of our marketing specialists shortly. If you have any other questions, please do not hesitate to contact us by calling 310.421.4844 or by emailing sales@wpromote.com. We look forward to speaking with you shortly.

Sincerely,

The Wpromote Team

Get Educated! Recieve Wpro U Updates, Case Studies & More

Thanks for signing up to be a Wpromote Insider.
You’ll be the first to get the scoop on our latest services, promotions and industry news.


Recent Posts
How Geotargeted Content Can Help Your Ec
Girl vs. Internet – The Importance Of
CONNECT
  • Los Angeles HQ: 310.421.4844
  • Chicago: 312.690.7112
  • San Francisco: 415.423.1535
  • View All Offices
  • Dallas: 214.696.9600
  • Houston: 281.974.5569
  • Denver: 720.583.9064