Abuse of CSS and Markup

Beaver tails are absolutely delicious. However, when you abuse them, it is bad for your health. A good combination of CSS and markup can produce a marvelous website. Just as beaver tails, however, they can be abused. Abuse might be a slightly strong word, and misuse may be more appropriate, but it sounds more cool if you say abuse.

What exactly does this mean? It means that you can easily use a combination of both CSS and (X)HTML. The problem is that CSS can turn, for example, a series of plain anchors (<a>) into a bulleted list. Visually, there seems to be no problem. However, for people who do not have visual browsers, such as Mozilla Firefox or Internet Explorer, the list will be gone and there will simply be a series of links with nothing to separate them. Below are some examples of the most common misuses.

Div Elements

The purpose of the <div> element is to surround a group of elements to unite them. More semantically considering its name, its purpose is to create divisions throughout the page, each of which serves a specific semantical and/or visual purpose. For non-visual browsers, a div tag will be ignored, unless its id attribute serves for in-page links at some point. The most common way to use one such tag is to surround each section of the page with one div, for example one for the content area and one for the sidebar.

However, you might also have seen this quite often: <div class="header">Welcome</div>

The above piece of markup is wrong for two reasons. The first is that the div is used to surround only one word, for which a paragraph would have been more suited. However, there actually exists a tag that serves exactly the purpose of the above one: <h1>. This extremely hard-to-remember tag (this is sarcasm, for the skeptical) defines the main title of an individual page. Who benefits?

  • Search engines. Not only do search engines rank your page higher as words are higher in the page, but they will give a greater importance to header tags than to some other tags. Therefore, if you have <h1>Review: Edward Scissorhands</h1>—which also happens to be a wonderful movie—it will be more efficient than <div class="header">Review: Edward Scissorhands</div>.
  • People without visual browsers. Whatever styles you apply to the div tag will be completely ignored by text, braille and voice browsers. There will therefore be no way inside the page to tell what its title is. Also, some browsers make it possible for blind people to navigate from one header to another (e.g., the first <h2> and the second one) in an instant. It is impossible with div elements or paragraphs.
  • You. You have less class names to remember. The <h1> element is easily customizable by using CSS.

The example above is often also replaced by paragraphs (<p> instead of ><div>), which is also incorrect.

Textareas

How many websites out there, mostly tutorial sites, display their pieces of code using textarea? The problem with this is that it is semantically incorrect and relies strictly on the visual displaying of a textarea.

  • This will invalidate your markup.
  • You cannot display </textarea> inside a textarea without escaping the < and >.
  • You cannot use it to display code inside paragraphs or other tags.

The proper way to display markup is to use the <code> tag. It will be semantically correct and is easily modifiable for visual browsers. You can even customize
it to have a scrollbar
.

Overusing Classes

Classes are a wonderful part of markup. By adding class="class-name" to an element, you can modify it so it will be different from any other element of its kind. Wow, that sounds really incomprehensible…Let’s say you have paragraphs (<p>). Your text is included in them, aligned to the left, and everything is alright there. However, you want to post screen captures of your other websites and you would love them to be centered. Forget all about the <center> tag, as it is deprecated.

Also forget align="center", as it is not up to XHTML and, should you ever wish these paragraphs to no longer be centered, you will have to go through each of them and remove the attribute. Also forget adding inline styling (the style attribute), as it will also be a hassle to remove it later on, should you change your mind.
Let’s instead create a class:

<p class="screencap"><img src="images/screencap/personal.jpg" alt="personal site" title="personal site" /></p>

We can customize it using CSS: .screencap {text-align:center}

This will center any element (p or not) that has “screencap” as a class. What if you want to change it later on, then? Well, you simply have to modify the .screencap in your stylesheet. You can even omit the class entirely from your stylesheet for one layout, and put it back again later on.

Up to now, everything is fine and dandy. Nothing is abusive. What then can be? Well, some people are just making things a little bit too complicated, when they could be more simple. For example, let’s take a look at the (me-created) navigation below:

<ul id="nav">
   <li><a href="me.php" class="menu">Me</a></li>
   <li><a href="you.php" class="menu">You</a></li>
   <li><a href="site.php" class="menu">Site</a></li>
   <li><a href="www.php" class="menu">WWW</a></li>
   <li><a href="index.php" class="menu">Home</a></li>
</ul>

There is no use to have a class both for the navigation and for the individual links. You can remove the class=”menu” entirely and, in the stylesheet, use this: #nav a {links-properties}

%d bloggers like this: