Site

HTML Troubleshooting

Sometimes formatting and layout issues can be caused by stray HTML in your posts. Here’s how to find and correct these errors. 

Table of Contents

Example: Formatting Errors
Example: Extra Spacing
Example: Sunken Sidebar
Error: Unexpected or Invalid Content
Learning More

Sometimes a formatting error on the front page of your site, such as your sidebar suddenly falling down into your footer area, can be caused by some faulty HTML.

If you’re just getting started, or want a refresher on HTML, check out the following articles:

If you’re not really sure what to look for, this document provides some examples to better help you understand what faulty HTML can do.

The most frequent reason for reason for stray HTML is pasting text or images from other applications.

We do our best to strip out any code that might cause formatting errors, but sometimes you may need to go into the HTML yourself to clean up any additional tags that were added when the content was pasted.

Example: Formatting Errors

Let’s say one day, you load your blog, and you notice that your most recent post looks like this:

strange-post-lorem-ipsum

For some reason, the first paragraph is italicized and the second and third paragraphs have no spacing between them.

To find out what happened, edit the post or page, and switch to the HTML editor.

HTML Troubleshooting - Edit as HTML

Now, take a look at the HTML in the post, and you’ll notice a few things:

You know from Beginning HTML that every HTML opening tag needs a closing tag, and vice versa. But here, you have an opening <span> tag with no closing span tag.

Instead, your code should look like this:

<span style="font-style:italic;">
     The text you want italicized.
</span>

You’ll also note there is a closing div tag followed by an opening div tag. An opening tag should always be the first tag, and the closing tag is indicated by the slash (/) in the tag name. For example:

<div>← This is the opening of a div, followed by the closing here →</div>

Because the code in the example is </div><div>, the editor is reading this as an open div with no close, which can cause formatting and layout problems.

Delete, or close the tags, to resolve the issue.

↑ Table of Contents ↑

Example: Extra Spacing

Perhaps you’re drafting a post and inserting some images. Everything looks fine in the Visual editor, but when you preview the post, there are giant gaps between the images like so:

Extra Space

If you edit your post, and switch over to the HTML editor, you may see several <br> tags.

<figure class="wp-block-image">
<img class="wp-image-319" src="https://docsdoctors.files.wordpress.com/2019/04/were-open-sign.jpg?w=1024" alt="" />
	<figcaption>
		<br /><br /><br /><br /><br />
		caption
		<br /><br />
	</figcaption>
</figure>

Extra line breaks were inserted while you were adding your images and moving them around. Deleting any extra <br /> in your HTML will remove the line break (extra space) seen in the example.

Fixed HTML Code:

<figure class="wp-block-image">
<img class="wp-image-319" src="https://docsdoctors.files.wordpress.com/2019/04/were-open-sign.jpg?w=1024" alt="" />
	<figcaption>
		caption
	</figcaption>
</figure>

↑ Table of Contents ↑

Example: Sunken Sidebar

If your sidebar has mysteriously sunk to the bottom of your front page, this most likely means that there is some extra HTML code in one of your posts breaking the layout. The most common culprit is an unclosed div tag, as we saw in the example above.

Usually, the extra tag will be in one of the posts you just published prior to noticing your sidebar was gone. Edit your last few posts and check out the HTML editor:

Troubleshooting HTML - Open Div

Look for any open <div> tag or other incorrectly formatted HTML code. In the example above, an open <div> tag is to blame.

↑ Table of Contents ↑

Error: Unexpected or Invalid Content

Unexpected or Invalid Content

If you see this error message, that means the Block Editor has identified incorrect HTML code in a specific block. Click the Resolve button and the Editor will attempt to resolve the issue.

Resolve Block

Using the open <div> example, you’ll note that the system identified that there was an open div, and suggested a closing div. Clicking on Convert to Blocks will accept the suggested change.

In some cases the HTML error will cause the block to be converted to a Custom HTML block. You can continue to edit the HTML, but it may be possible that the code you’re adding will not display correctly due to the error.

↑ Table of Contents ↑

Learning More

Even if you’ve never had any layout or formatting trouble, take a look at your HTML editor from time to time.

As you become more familiar with what proper HTML looks like, it will become more and more obvious to you what (if any) HTML in your posts is affecting your site’s appearance and how.

You can also learn HTML basics through w3schools.com

Not quite what you're looking for?

Get Help