Tag Archives: HTML

Buckets inside of buckets — an HTML primer

Have you ever tried to edit part of your web site, only to find that the more you try to fix it, the more everything seems to spiral out of control?

I can’t tell you how many times I’ve been told “The editor doesn’t work!” by a desperate co-worker. Usually, this is followed by, “You’re a programmer! Fix it!”

But the problem almost never turns out to actually be a broken editor. And the problem almost never turns out to be something that requires a programmer to fix.

What it requires, is somebody who knows HTML.

What is HTML? HTML stands for HyperText Markup Language. It’s the language of the web. Go to any web site and use your favorite browser’s “view source” command. That bunch of confusing text you see? That’s HTML. That’s what your browser takes, interprets, and displays in the visually pleasing manner we’re used to.

You don’t have to learn everything there is to know about HTML in order to use one of our editors. But if you want the best results possible, a basic understanding of HTML and how it works helps a lot.

Each HTML document is made up of a number of elements. I find it helpful to think of these elements as containers for content. The content might be text, or it might be an image, but the content has to have somewhere to be. It has to be inside of a container.

Each container begins with a tag — a special code word enclosed in angle brackets like <div> — and ends with an end tag — the same code word preceded by a forward slash, like </div>. For example:

<div>Hello world!</div>

This HTML will look like this in your browser, and in the standard editor window:

Hello world!

But, here’s the tricky part. The following HTML:

<table><tr><td>Hello world!</td></tr></table>

Will also look like this in your browser:

Hello world!

What’s the difference? The difference is the type of bucket. Different types of buckets have different functions and different formatting rules. They might look the same under some circumstances, but not under all circumstances. For example, the following HTML:

<table><tr><td>Hello world!</td><td>One</td></tr><tr><td>Two</td><td>Three</td></tr></table>

Actually looks like this:

Hello world! One
Two Three

What are you looking at? A table bucket (<table></table>), which contains two table row buckets (<tr></tr>), which each contain two table cell buckets (<td></td>). Each table cell bucket contains text, your actual content.

Buckets can also have attributes. For example:

<table width = “100%”><tr><td style = “width:50%;height:60px;border:1px solid red;” valign = “top”>Hello world!</td><td>One</td></tr><tr><td>Two</td><td style = “font-weight:bold;color:green;padding:10px;border:1px dotted gray;” >Three</td></tr></table>

Will look like this:

Hello world! One
Two Three

Width, visual style and vertical alignment (valign) are all attributes that can be assigned to the different buckets. It’s important to understand that not all attributes can be assigned to all buckets in all arrangements. For example, the first cell in our table is defined as being 60 pixels high and fifty percent of the total table width. That means that the cell immediately below it has to be the same width, and the cell immediately to the right of it needs to be the same height.

It’s also important to get the buckets right. For example:

<table><tr><td>Hello world!</td><td>One</tr><tr><td>Two</td><td>Three</td></table>

This has tags which are not closed, which is like punching a hole in the bucket. This might look okay, but it can also cause your content to shift in unpredictable ways. Sometimes it will look okay until you make a seemingly unrelated change — like adding a second table — and then suddenly everything’s out of whack.

Buckets with actual holes are rare in HTML created when using the WYSIWYG editor. The editor automatically closes any bucket it creates. However, it is very common to end up with buckets that contain too many other buckets, or buckets that contain the wrong thing, or buckets that overlap improperly. For example, if you tell the editor to insert a table within a line of text, you might get something like:

<h3>Hello world<br /><table><tr><td>Here I am!</td></tr></table></h3>

The <h3> tag is a headline tag, which browsers expect to be a line of text. The H3 tag is not supposed to contain a table. It’s the wrong type of content for the bucket. Browsers aren’t expecting the content to come that way, and how they display it is unpredictable. The HTML above might display like this:

Hello world

Here I am!

Or it might display like this:

Hello world

Here I am!

It will vary depending on the browser, and on the styles applied to your website, and sometimes on the other elements on the page.

I hope this helps explain why your content formatting can get crazy. But the real question is, how to fix it? Usually, when the buckets get too messy, the only way to fix them is to take your content out of the buckets, get rid of the buckets that are there, and start over with new buckets. This is usually easiest if you follow these steps:

  1. With the editor open, highlight your text.
  2. Copy by pressing ctrl+c or command+c on a Mac.
  3. Open a plain text document editor such as Notepad.
  4. Paste by pressing ctrl+v or command+v on a Mac.
  5. From the text editor, copy the text again.
  6. Paste into the editor.
  7. Apply new formatting.

Because it is so fast to format text with the editor, starting over is nearly always faster than trying to fix what’s already there.

However, if you want to take a look at the HTML, most WYSIWYG editors have a “view source” command that will show you the HTML. On our editor, it looks like this:

For a complete HTML reference, see the W3 Schools HTML Tutorial.