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.
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.
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).
<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>.
<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:
<span style="text-decoration: underline;">help</span>
’ = apostropheSo, Dr. Storie’s = Dr. Storie's
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.
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:
Finally, when your list is done, on the following line enter a </ul>.
EQUALS THIS IN TEXT
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.
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> </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.
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> </div> that might be in between the lines of text as well.
If you had a line of text that read: <div>the patient is awesome</div> <div> </div> <div> the patient has shoes</div> <div> </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> </div> between the lines fixes the problem. Like so:
<a href="/treatment/the-speed-system.aspx">the word you are linking to<a/>
<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 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>.