Blogs about web-design from Pew Pew Laser Blog

Title Vs. Alt.

Here are my tips to understanding the intentions and key differences between the alt and title attributes for <img /> tags.

Alt:

The alt attribute is intended to be used instead of the image, rather than in addition to the image. It should describe all of the objects in the image. (Though technically incorrect, alt attributes are sometimes known as alt tags.)

The alt attribute is the text that should appear if the image doesn't load, or if visitor can't see image. The alt text may also appear in the image's place while the image is loading.

Include alt attributes for all images. For decorative images such as bullets or spacers, use an empty alt attribute (alt=""). (Of course, decorative images really ought to be part of styling, not content.) Don't use alt attributes for keyword stuffing.

IE6 will show the alt attribute when a visitor hovers over an image. Google uses an image's alt attribute when indexing images.

Title:

An image's title attribute should be used for additional, non-essential information.

In most browsers (IE7 and above, Firefox, Safari, et cetera), the title attribute will appear when the visitor hovers over the image.

Note that the title attribute can be used on many tags, not just images. For example, one good use of the title attribute is to add descriptive text about the destination on anchors / links.

getElementsByClass.

You know about getElementById(), and getElementsByTagName(), but what about getting elements by class?

Yes, there is a native JavaScript function getElementsByClassName(). It is supported by FF3+, Safari 4+, Chrome 4+, Opera 10+, but not IE6, IE7, or IE8.

Here's a simple way to take action on all elements with a given class:

For the HTML shown, the JavaScript creates an array of all elements with a given tag name. A for loop checks the class of each element in the array, and performs some action on that element if its class matches. (If your class occurs on multiple types of elements, just specify "*" for the class name. )

This is a pretty good solution for just a few lines of code. For much more flexibility a just a few lines of code more, Dustin Diaz has written his own getElementsByClass function.

Tales of Shame.

I have heard a few tales of the shame of Internet Explorer 6, the web browser famously despised by web developers (even its own creator). Submitted for your approval, here are a couple of those tales:

• Six years passed between the release of Internet Explorer 6 (2001) and the next version, IE7 (2007). Why so long? I was told that after IE6 was released, Microsoft decided that browser wars were won. The development team disbanded. I recently mentioned this story to an actual longtime Microsoft employee, who said "that sounds about right".
• An large technical organization has some critical business applications which only work in IE6. They will be upgrading all their workstations to Windows 7, which includes Internet Explorer 8, but not IE6. The solution? Instead of upgrading the legacy web application, this organization will provide virtual WinXp machines with IE6.

On URIs.

To call an asset (such as an image, stylesheet or JavaScript) from same directory as the current page, then start the URI with the filename. Example:

To call something from the same domain as the current page, then start the URI with / and include the directory structure. Example:

To use the same protocol as the existing page, start the URI with //, and include the entire directory structure. <script src="//library/the-script.js"></script> This is useful for when you need to call assets via HTTPS, but only when your page itself has been delivered to the browser via HTTPS.

To pull in an asset from anywhere in the world wide web, just use the fully qualified URI.

Selecting Children in the DOM.

Sometimes, it's necessary to use JavaScript to walk through the HTML elements on a page. The function childNodes() function (as well as firstChild, lastChild, and previousSibling) seems like a great great way to to this. Unfortunately, it'll produce vastly different results in different browsers.

Firefox evaluates any white space in the element as a text node, so if your HTML is like this: <div id="theDiv"> <a href="http://www.wired.com" id="theA">Wired</a> </div> then firstChild will be the line break. Other browsers will return the anchor element as the firstChild. Blech.

Instead, use getElementsByTagName("*"), which will get only tags. For the above HTML, this JavaScript will get the link value: theAnchor = document.getElementById("theDiv").getElementsByTagName("*")[0]; theHref = theAnchor.getAttribute("href"); Since the first element inside theDiv is the anchor.