HTML code misuse, abuse, and ways to correct them.
QuestionA guy looked at my HTML code and told me I was forming bad habits. What is he talking about?
AnswerAll HTML code serves a specific purpose. Everyone with basic knowledge of HTML knows that the <p> tag is meant for paragraphs, and the quotes are quotes, etc., etc.. However, it is very easy to misuse and abuse these HTML tags by using them for something other than their intended purpose.
QuestionWhy does it matter what my methods are if the result is good?
AnswerCan you guarantee that? And can you guarantee that it will stay good through time? The big reason not to misuse tags is that browser support for misused code is far from guaranteed. There may be extra spaces in one browser, while it's perfect in another. Simply put, the entire goal of a website is to get it to work on as many browsers as possible while getting the right content across. Misused code does the site a disservice in general, and it gets in the way of the main goal of the webmasters, which is to make it work no matter what broswer you use to navigate the web.
QuestionBut I use [Brand name] designer! I don't edit the HTML code myself!
AnswerI feel your pain. I once wrote a page in a brand name What You See Is What You Get editor. I look back on the code today, and I don't even want to hazard a guess as to what the program was doing when it wrote that code.
To illustrate my point, I opened a leading brand WYSIWYG editor and made the following in Design mode:
Hello.
This is a sample Web Page.
This is far down...
The code that the program generated follows:
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<p>Hello.</p>
<p>This is a sample web page.</p>
<p> </p>
<p> </p>
<p>This is far down...</p>
</body>
</html>I see several very large problems with this code:
- The document does not specify which version of HTML it is using in the document. All it would take to make it use the latest in HTML is this line at the top:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">But it isn't there. So what's it using? 1.0?
- It uses the META tag, which is deprecated and not necessary.
- It uses "empty" paragraphs and abuses the non-breaking space.
So, where do most people foul-up? Using deprecated tags isn't really a crime, but in the future it will be a tragedy for the Web Designer who uses them. However, I'm talking about people intentionally using tags for something they weren't meant for. Like the following:
THE <P> TAG - Everyone knows the <p> tag, right? it is used to specify paragraphs. However, when people want to make multiple lines of blank space, they often use this code block:
Words...</p>
<p> </p>
<p> </p>
<p>More words...</p>These "empty" paragraphs serve absolutely no purpose other than to cause a mess out of your web page. Browser support is hazy at best. To the IT guy who insists on building sites this way, I can only say "lotsa luck".
So how do you make multiple lines, you ask? The answer is simple: Use the
tag. That's the whole tag. Nothing goes after it; it's only purpose is to break one line down - like hitting the ENTER key.
For example: This code
<p>This is a paragraph with one sentence.</p>
<br />
<br />
<p>This line is two lines down.</p>Produces this:
This is a paragraph with one sentence.
This line is two lines down.
You can also use CSS:
p.leading
{
padding-top: 2em;
}Kudos to robpomeroyThis is the same as the paragraph abuse, with one major difference: It will render properly on all browsers. Of course, the non-breaking space ( ) was abused there as well. Why? That's not the point of that special character. It is also abused in another way: Indenting.
Let's say you want to be fancy and indent a paragraph. How does your standard WYSIWYG editor do? It puts non-breaking spaces in there. So what you got is blank space followed by text. Sounds great, right? Wrong.
The problem here is more than shoddy browser support. It doesn't event indent evenly. To prove my point, open Word or Notepad and hit spacebar five times, and type a short sentence. Go down a line, and hit spacebar five times, and type a completely different sentence. Repeat for a few more lines. How it comes out depends on your font. A mono-spaced font such as
courier will show up fine. However, your site isn't courier by default; it's Times New Roman. So what do you get with Times?
