Adaptive Content
Peek behind the scenes. See how this page was tailored for you.
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?
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.