Although it may be impossible to know all of the errors that can be made in web coding, knowing this hand-full of common mistakes can significantly decrease the amount of trouble budding web developers run into.

Syntax

syn·tax (sintaks′)

noun

  • the structure of statements in a computer language
  • the rules governing this structure

yourdictionary.com

Example:

A paragraph in HTML is properly written:

<p>Paragraph goes here.</p>

An incorrectly written paragraph might be something like:

<p Paragraph goes here.</p>

The missing “>” will cause the paragraph to display improperly or not at all and will probably affect a lot of other part of the web content following it. This is called a “syntax error”. The syntax is incorrect, so the browser reading it won’t understand it and the results won’t be pretty.

Knowing the proper syntax for any particular end result is one of the main ongoing pursuits of a web developer. But even the gurus run into the occasional mistake of missing a comma, semicolon, bracket, etc. The key is taking care to find and correct it.

Caps

There are many variables as to whether a capital letter will be treated the same as a lowercase letter or not. Take servers for instance.

Most servers would treat a directory named “MyFolder” as a separate directory from one named “myfolder” thus two directories could exist with the same name. Windows servers on the other hand, would only allow one folder named “myfold” or “MyFolder”, but not both. Either way, in using a path to one of these directories (example: <img src="MyFolder/some_image.jpg" />), matching the case is crucial. So, if you think you might forget which directories you capitalized and which ones you didn’t, or if you find yourself creating a directory only find you already created one with that name (just cased differently) using all lowercase letters is common and best practice.

This is just one example of how capital letters can cause problems. The thing to remember is that when referencing a directory, file, id, name, etc. cases should always to match. When in doubt, stick to lowercase letters.

Special Characters

Special characters (¢, •, ©, ½, ∧, etc.) aren’t always interpreted the same from one computer to the next. When one computer interprets the m-dash you punched in (—), another computer sees it as something like “↵ÁÖ”. You may have noticed strange notations like this in emails. That’s usually what’s occurring. Fortunately a lot of these can’t be used in folder names. Try it! Most of them won’t go in.

Special Characters on Your Keyboard

Your more common special characters (!, @, #, $, %, etc.— the number keys when holding shift) can be safely used in your HTML content, but be aware how you use the ampersand (&). That one knows a lot of tricks and it’s not afraid to use them. More on that:

Special Character Codes

When you need to use any of the special characters not on your keyboard in your web content, there are codes for each, and several resources to obtain those codes. I like this one: visibone.com/htmlref/char/ceralpha.htm. They all start with “&” and end with “;” and have an alphanumeric code. They also have numeric equivalents you can use if remembering numbers works better for you (I can’t—I think it fries my brain). Even the ampersand itself has it’s own code (&amp;), but these days if you ignore the amp; and just use the & by itself, you’ll still get the results you expect (&), so you rarely need to use that one. A lot of popular website platforms such as WordPress automatically convert these characters for you, so you don’t have to worry about it, but there are still places where these codes are necessary to produce those special characters.

Quotation Marks

Quotation marks are of much greater concern (this is one of the reason using Microsoft Word as a web editor is like trying to drive a station wagon across a lake). “Smart Quotes” or left and right quotes (“, ”, ‘, ’) whether double or single, are not the same as “quotes” as we refer to them as in web coding (“, ‘). These “Smart Quotes” (as I call them— taken from Words “Smart Quotes” feature), although great for word processing, are the prime cause of the disease known as Argh My Eyes Are Stuck Crossed-osis… Ok, I made that up. When used in content that is to be displayed, some computers (one’s using a different operating system) will turn them into foreign characters. When used in code, they don’t work the same way as straight quotes at all.

Another point on quotes is that a lot of languages allow you to use single or double quotes to mark the beginning and end of a value. Whichever type starts the value has to also end it. Usually you can use the alternate kind within if need be, but if you start with a double quote and end with a single, the browser is likely to think everything after that double quote is part of the value, until if finds another one later or gets interrupted by the start of a new tag or something.

Hyphens and Underscores

Aside from scripting languages (such as javascript and probably many more advanced languages as well), it’s safe to treat hyphens (-) and the underscores (_) the same as letters. Either of these will make a great replacement for a space, but why wouldn’t you want to use spaces?…

Spaces

In content, extra space is automatically illuminated. This is usually good or easy to manage at least, so there is really no issue here, unless you want and extra space somewhere. If so, the code for a space is: &nbsp; But please use it sparingly. There’s nothing much worse than code cluttered up with a bunch of those.

In the various web languages, spaces some times indicate something. This is just a matter of learning the proper syntax for that language.

In file and directory names spaces are only problematic. Sure it works fine on your home computer, but try it on the web and watch all kinds of things break. In a lot of cases (such as in the URL) you’ll find that spaces are equal to “%20” and that’s what you have to put in your path if you want it to work.

But there is no need for this complication when it’s easy enough to simply use underscores or hyphens instead.

Summary

Actually all of this is a matter of syntax, but avoiding caps, special characters and spaces (spaces in file names) will save you a lot of trouble… and watch those quotes. 🙂

©2020 Joe Rhoney. All rights reserved.