Nerdy insides – fixing problems and using HTML

The HTML Editor

Most of the time, you will probably want to work with the Visual Editor, which does a fairly good job of generating the appropriate HTML code via the various buttons above the Editor panel. But sometimes you need to see what’s going on behind the scenes, and clicking the HTML tab allows you to do this.

The HTML Editor shows the underlying code that the browser uses to display the web page, and is useful in debugging, or when the Visual Editor doesn’t seem to be doing what you want.

However, even with the HTML Editor, what you see is not exactly the HTML that gets used to create the web page. In particular, the HTML editor interprets a double return (ie: a blank line) as the start of a new paragraph. This has the advantage that when you are typing ordinary paragraphs of text, you only need to press return twice after each one and not need the HTML <p> at the start and </p> at the end.

Obviously, to make full use of the HTML Editor, you have to be prepared to learn a bit more about HTML.

Troubleshooting

Most pages should be fairly easy to edit, but those with more complex mark-up can be challenging. If there are pages where Wingfinger has had to insert a bit more HTML than usual to get the desired effect, it’s important to preserve the structure of the various tags when you do your editing – and it’s possible to check this, using the HTML editor.

For example, the <div> </div> tags we often use are a way of grouping things together as an item – a sort of generic container. You’ll need to make sure that these are left alone.

Testing the code – if you’re feeling adventurous

Warning: This section gets really nerdy!

The basic rule of HTML is that – with a few exceptions like <img/> and <br/> (a line break) – every opening tag needs a corresponding closing tag. Sometimes the opening tag will contain some “attributes” – like class="intro".

As a general rule, if the whole page breaks, it often means that you’ve got an opening tag without its corresponding closing tag. One way to check what’s happening is to click the “W3C Validator” link in the Admin Bar. This checks the page against the official W3C Validator (but it can’t check Private pages like this one).

If the validator detects some errors, tick the “Show source” option and Revalidate. This allows you to see the line of code that the error occurs in – and also to see what WordPress has done with your efforts in the editing panel. (Sometimes the automatic paragraph feature seems to insert <p> </p> tags in unhelpful places.)

Don’t be too put off if the validator thinks it’s found lots of errors. The good news is that fixing the first one will often cure all the others at the same time. Although the error messages can be hard to unravel, the answer will probably be in there somewhere.