Puceronie

Common Mistakes With Markup

Disclaimer

I am absolutely awesome, of course, but that doesn’t mean I am perfect. I do make mistakes and there are things I mention below that I have done in the past. I however have taken the advice of the wiser than me and corrected my mistakes. Would this article only make one person change only one detail about their website in order to make it more accessible, more simple or more practical, then I would be happier.

Introduction

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 to customize elements as you please. 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, the list will be gone and there will simply be a series of links with nothing to separate them. Below are some examples of some 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. Think of divs as divisions of your page, not as a free-for-all tag. However, there actually exists an element 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 with non-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. This functionality disappers with div elements or paragraphs.
  • You. You have less class names to remember. The <h1> element is easily customizable by using CSS if you think it is too large or anything. There exists up to <h6>, which is much more fun than subsubsubsubsubtitle.

Using <p> instead of <div> 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 (inline code).

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. 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. If you wish to only apply styles to paragraphs with the screencap class, and not other elements that would have the same class, simply use p.screepcap.

Up to now, everything is fine and dandy. Nothing is abusive. What would be, then? 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 class="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} to customize the links.

alt Attribute (and Lack Therof)

I do not believe you can ever speak too much of the importance of the alt attribute (yes attribute, not tag!).

The alt attribute is meant to create "alternative text", that is, what will be displayed alternatively instead of the image (or other content) if, for some reason, said image or content cannot be displayed. People browsing with images turned off will see this text, blind people will hear it (or read it through braille alphabet) rather than view the image, and if the image is broken, it will be replaced by it. Also, search engines can index the content of the alt attribute.

An awful lot of people omit this tag, both out of laziness and out of ignorance for its real purpose. I blame this on a few facts:

  • Internet Explorer makes the alt text appear on mouse hover. It often misleads newbies into believing this is the purpose of the alt text (and claiming that it doesn't work in Firefox). They will thus avoid using it if they don't want it to show on hover. Besides, this will make some people call the title attribute on anchors (links) "alt text" because it appears when you hover over the link. Some of these people will even use alt instead of title in links!
  • Internet Explorer also has a poor support of the alt text for its primary purpose: replacing images that are not displayed. Instead of just plain replacing the image with its proper text, like there had been no image at all, it displays part of the text with a border around it, and an "x" in the corner. This can make part of it unreadable.
  • A lot of website creators ignore pretty much everything of web standards and accessibility, thus never thinking that blind people might eventually come to their site, or that they could benefit from search engines by using this little attribute.

Styling The Title Tag

The <title> tag simply displays the title of your website, more specifically of the page currently being viewed. It is plain text, present for practical reasons. It is particularly useful when several windows or tabs are open. I speak out of experience.

Considering that it will be looked upon by visitors only for a couple of seconds at a time, just to check what page they are one, there is no need to "style" it. By styling, I mean any of the following practices:

  • Putting spaces between letters, by using several &nbsp; or, worse even, the incorrect &nbsp with no semi-colon at the end, causing the browser to display &nbsp several times. This greatly reduces readability and sometimes pushes words so far to the right that you can't even read the title at all.
  • Using special characters such as ~, brackets or unnecessary parentheses. Special characters, such as · (HTML entity &middot; can be useful to separate the different parts of the title (see below), but it is pointless to use 20 of them in a row.
  • Using JavaScript to animate the title, making it move, change, etc. This is annoying and attracts attention to something that shouldn't be an attention-catcher.

All of this becomes quite annoying when bookmarking. How am I supposed to know the subject of your page if all I can see is a bunch of spaces followed by the capital letters D A R, with the space in between? Of course, I can edit the title when bookmarking, but that is for non-lazy people, and there are few among web surfers. Besides, you should be the one thinking of your visitors' happiness, not the other way around.

The title tag is also used by search engines. Its content have very important priority when it comes to analyzing your website for keywords. Of course, search engines cannot erase spaces to stick words back together and understand what you're talking about. You can easily have clean titles, as follows:

  • Your site's name, written plainly.
  • The name of the indiviual page, also written plainly. Placing it before the site name can increase readability and ease bookmarking.

An example (beside my own page titles): "Downloads · Wallpapers · Cute-Fluffy-Rabbit.com".

"Automated" and dynamic titles, for example titles generated by WordPress, are also useful. They will usually get the individual title of your page along with your site title.

Fake Thumbnails

HTML's <img> tag supports two attributes known as width and height. I personally never use them, I don't see the point. That's another story, however. What I'm talking about here is people who use these two attributes to create a "thumbnail". For example, instead of displaying your 12 full-sized 1024x768 wallpapers on the page, you can resize them to be 300x225.

Most people do it correctly, and it becomes useful. I can see the image in a smaller version and choose to view the full version of those that attract me. So what is the wrong way? Let's say that the image wallpaper.jpg is a 1024x768 (pixels) image. I want to show a thumbnail, and I do it like this:

<img src="wallpaper.jpg" width="300" height="225" alt="flower wallpaper thumbnail" />

What happens then? Yes, on screen I see a 300x225 image. But the full-sized image still needs to be loaded. For a single image, it might not make much of a difference. However, if you have dozens of images and/or a lot of visitors, the difference can grow to be much bigger, taking up your bandwidth. Also, you might notice that "thumbnails" resized using the width and height attribute tend to be of a very low quality, much lower than thumbnails created with a graphic program.