Simple web rules beginners & pros all break- Rule #1

Yes, this applies to you.  I’ve even changed the title of this series because if I named it “7 simple HTML rules beginners & pros all break” some readers would say “HTML” that’s coding stuff. That doesn’t apply to me. But almost everybody who surfs the web writes HTML.  They may not know it, but they do.  If you have a blog, I can almost guarantee you written HTML AND you’ve broken one or more of these rules. If you are a professional blogger or coder, I’d wager that you still break one or more of these rules on a regular basis.  So… enough build up…

Here we go:

Rule 1: Everything has a beginning and an ending

So, if you want to add a blank line to a post or comment, the code is pretty simple right?  You add <BR> and you have a new line. Right? WRONG! You’ve just broken rule number one.  ALL HTML TAGS MUST HAVE AN OPEN AND CLOSE.  So to write this correctly you would say either <BR></BR> or use the short cut <BR />.  That shortcut with a trailing / is the correctest way to add a break. It opens and closes the tag within itself.  Another example of a common place this rule is broken is within the IMG tag.  You will often see code like

<IMG SRC=”me.bmp” alt=”A picture of me”>

when it is more properly written as:

<IMG SRC=”me.bmp” alt=”A picture of me”/>

Why does this rule matter?

Perhaps the most visible side effect of this is seen on blogs that don’t have a sidebar or have all the text after a certain point bolded or centered. This is most frequently caused by an unclosed <DIV> tag. Each <DIV> is a division or an invisible box that is in a specific area of a web page. The center column of a website is a common example of a <DIV>. If you don’t have the write number of <DIV> and </DIV> your web page will tell the browser, “The center column starts here” and it is never told “Now it has ended”.  So your sidebar can become part of your center column.  The most common cause of this is copying and pasting text from another website into your post. You will catch all of the open <DIV>with your copy but often miss a close div or two and that confuses the heck out of the browser.  This happens so often that I’ve made a short video about how to manage these things for the bloggers on the b5media network.

The other reason this matters is that most browsers have a “Site didn’t follow the rules” or “Compatiblity” mode which is turned on when there are errors on the page.  When this mode is activated, the browser starts loading the page in the simplest way it can in order to guess at what you really meant.  I’ve over simplified this and you can find out more by searching “Web Standards” in Google.  Put briefly, if you want your page to appear as you intended, close all your tags.

Or Everthing that begins must eventually come to an