1.

Solve : HTML misuse and abuse?

Answer» HTML code misuse, abuse, and ways to correct them.
Question
A guy looked at my HTML code and told me I was forming bad habits. What is he talking about?

Answer
All HTML code serves a specific purpose. Everyone with basic KNOWLEDGE of HTML knows that the

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.

Question
Why does it matter what my methods are if the result is good?

Answer
Can 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.

Question
But I use [Brand name] designer! I don't edit the HTML code myself!

Answer
I 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:

Quote

Hello.
This is a sample Web Page.


This is far down...

The code that the program generated follows:

Code: [Select]<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>&nbsp;</p>
<p>&nbsp;</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:
Code: [Select]<!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

TAG - Everyone knows the

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:

Code: [Select]Words...</p>
<p>&nbsp;</p>
<p>&nbsp;</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

Code: [Select]<p>This is a paragraph with one sentence.</p>
<br />
<br />
<p>This line is two lines down.</p>
Produces this:

Quote

This is a paragraph with one sentence.




This line is two lines down.

You can also use CSS:

Code: [Select]p.leading
{
padding-top: 2em;
}
Kudos to robpomeroy

This 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?You might see something like this:



See the problem? I "indented" five spaces, and got that shoddy excuse for organization. That's why people use the TAB key on word processing programs; it is always indented the same amount.

So what's the real purpose of the non-breaking space? Let's say you work for Widget Incorporated and want to make it so that even when the user resizes their window, the words "Widget Incorporated" never break apart in the word wrap. So, you'd type out Widget Incorporated, and you'll get a blank space that looks like an ordinary space, but will never break. The words will stay together! Neat, isn't it?

So how should you indent in a Web Page? With CSS:

Code: [Select]p.indent { text-indent: 2cm; }
Try this in a long paragraph. Don't hesitate to fiddle with the values. For a tutorial on how to use CSS, please read through QA0014.

Though this only covers a couple of the ways that people can misuse tags, there are other ways that people can misuse their code. Empty images is a good example of this. This is used almost as much as empty paragraphs.

Question
Should I stop using XYZ web development, then?

Answer
For simple pages made for a small purpose, no. If, however, you intend to take Web Design seriously, it is a good idea to learn HTML and CSS at a minimum. These tools are essential for creating a site that is simple to write, but beautiful at the end.

However, WYSIWYG editors don't really have serious problems of abuse - no empty table rows, none of that. Their main problem is deprecated tags. However, I've seen all too many HTML coders abusing the HTML tags just to do a simple thing that could easily be done with the appropriate tag.

Note
Technically, the META tag is not deprecated. However, Google and other search engines have "pseudo-deprecated" the META tag. This article has more details:
http://www.yourhtmlsource.com/promotion/metatags.html
This article will be updated periodically with new misuses and abuses.


Discussion

No Comment Found

Related InterviewSolutions