HTML For Editors Who Don't Use HTML

Wait. What? Why would a website editor who doesn't use HTML need to know about HTML?

By David Adams on 9 July, 2013

HTML is a document format for creating content which will be shown in a browser. So anybody creating content for the web is using HTML, even if they're using a Content Management System (CMS) which shields them from it. Most CMS provide a WYSIWYG (What You See Is What You Get) editor - software which looks and acts a bit like a Word Processor, specifically designed for creating web pages. But HTML wasn't designed for being created with a WYSIWYG editors and they aren't perfect.

What often happens is that your WYSIWYG editor will generate some code correctly. Then you'll move the cursor around the document as you edit it and you'll type some more and some more code will be generated. Then you'll cut and paste a section. All of these are legitimate operations and usually will work perfectly, but occasionally you'll end up with illegal HTML code. If you know how to fix it you'll save yourself a great deal of frustration! Great CMS have built-in HTML checkers and the very best can automatically correct errors, but what if you're stuck with one that doesn't?

The good news is that HTML is actually really simple to understand. It's really clear and logical and if you understand the absolute basics you'll be able to quickly solve your coding problems.

HTML is made up of tags. Tags are written in between angle brackets, like this: < and this: >. Most tags consist of an opening tag and a closing tag. The tags themselves don't get displayed, but they affect the content that comes between the opening and closing ones.

One of the simplest tags is the paragraph tag, whose code is 'p'. So to specify a paragraph of text, the HTML looks like this:

<p>This is one paragraph.</p> 
<p>This    is     another 
paragraph.</p>

And the output looks like this:

This is one paragraph.

This is another paragraph.

Note that extra spaces and blank lines mean nothing in HTML. All blanks lines and runs of spaces are replaced with a single space in the output. Therefore even if you split your code on to separate lines it will all be shown on one line; instead use the P tag to separate paragraphs.

You can style text using the bold tag <b>, the italic tag <i> and the underline tag <u>, the of purpose of which is clear from their names. Just wrap the text you want to make bold with <b> and </b>. Additional information can be given with the tag to do formatting and provide other additional information; these are called tag attributes. One of the most common is the 'style' attribute and typically look like this:

<p style='border: thin red solid; font-size: 20px;'>
    This text will be 20 pixels high and have a thin red border around it.
</p>

However, most WYSIWYG editors will handle these additional attributes for you.

You can create lists, both with simple bullets or with numbers. For these you need a tag to indiciate the list and a tag for each item on the list. The tag for a bullet list is <ul> (standing for unordered list) and for a numbered list it's <ol> (ordered list). For each item in the list, use <li>. Here's an example:

<ul>
<li>First Item.</li>
<li>Second Item.</li>
<li>Third Item.</li>
</ul>

And the output looks like this:

    First Item.
Second Item.
Third Item

  

The <div> tag is used as a kind of container - it might contain a paragraph or a series of them, or images, lists and other content, even other DIV tags. They can have formatting applied to the whole container, such as setting a font size, a border or a colour. Some systems use the DIV tag for each paragraph of text.

The really important point with all tags is how they are used in combination and in particular how they are nested. Understanding this will likely solve 90% of your WYSIWYG generated HTML problems.

Nesting tags simply means putting a tag inside another. A simple example is a DIV tag containing two P tags:

<div>
  <p>This is one paragraph.</p> 
  <p>This is another paragraph.</p>
</div>

Note how the P tags are indented in order to show how they're nested within the DIV tag. That's perfectly good HTML. But now look at this:

<div>
<p>This is one paragraph.</p> 
<p>This is another paragraph.
</div>
</p>

The opening DIV tag is fine, as is the first paragraph. But with the second paragraph the code tries to close the DIV before it has closed the P tag. This is invalid and how the browser will show this output can't be predicted. Not only that, but code like this can break your entire page, not just the section that this code represents. Also note how it's harder to spot because the tags aren't indented.

Here's one more example of some broken HTML:

<div>
    <p>This is one paragraph.</p> 
<p>This is another paragraph.  Next is a box containing some text and a list:
<div style="border: thin red solid;">
<p>Here comes a list:</p>
<ul>
<li>First Item.</li>
<li>Second Item.</li>
</ul>
<p>A closing paragraph.</p>
</div>
</div>

This shows a a related common problem is opening a tag, e.g. <div> but never closing it with the corresponding </div>. The first DIV is opened on the first line, then we have some paragraphs, another DIV with a red box around it, then the list and a final paragraph. Unfortunately one of the paragraphs has no closing P tag. This can be particularly frustrating because often it won't show up as a problem at the time, only later when you edit another part of the page will you discover that things aren't coming out as you'd expected.

If your HTML is broken try going through it and matching up each of the tags and make sure none are overlapping. The best way to do this is to indent them so you can see whether they match. Remember, unfortunately the problem might not be anywhere near where the output goes wrong.

There are literally thousands of guides to HTML available on the web. One of the most definitive and highly regarded is the W3Schools one. It's comprehensive and links through to their extensive documentation on all manner of web page topics.