Blogs about html 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.

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.

Fantastic Tabs.

This X/HTML and CSS technique differentiates the current page or section from others in a navigation bar, using a single stylesheet and without requiring any server side code. In the iframe below, "Home", "About" and "Contact" are different pages, each sharing the same CSS file. Click the different tabs and note that the current tab remains highlighted during navigation.

Read more about it in my article here.

Firefox Extensions for Developers.

Firefox is my number one tool for web development. I could live without Dreamweaver, but not Firefox. In fact, syntax coloring in the source code viewer is the original reason I started using Firefox a few years ago. Once I discovered all of the marvelous add-ons and tab-based browsing, I switched from IE permanently. Here are many of the add-ons that I use for web development.

• There's the Web Developer toolbar, and Firebug of course. But you already know about those, don't you?
• View Source Chart is one of the most undervalued add-ons out there. Not only are the collapsible code blocks indispensable for figuring out what's going on with foreign code, but the Source Chart will show you the results of any JavaScript executing on the page. That's right - you get the source code; post JavaScript render.
• FireFTP - a fully capable FTP client, which can store settings for multiple. What more do you need?
• JS View gives you a list of all the external CSS and JavaScript files that are pulled in by a web page. This is a very effective tool for inspecting code, or figuring out what resources your pages actually rely on.
• Live HTTP Headers displays header information for webpages. That's the sneaky, secret webpage stuff like redirects, form submission info or status codes like 200 OK.
• YSlow will analyze webpages and recommend speed improvements. It requires Firebug, but all you developers have that installed, right?

Clearfix (with an IE7 solution).

If you begin working with CSS for your web page layouts instead of tables (and you really should), you will encounter problems with floated elements. The most mind blowing issue is when you have an element floated to the left or right, but that floating element escapes OUT of the element that contains it. This behavior is, in fact correct, since a floated element is removed from the normal flow of the document, and hence, any elements containing it. However it really can play hell with your web pages - so here's my preferred solution.

This paragraph, with a white border contains a very tall image that is floated to the right of the paragraph, while text flows around on the left side. However, you can see here that the image very rudely busts out of the paragraph element.

There are a variety of ways to correct this, but the most robust method I've found is using Clearfix by PositionIsEverything. First, add a clearfix class to your main stylesheet with the following style declarations.

Then assign the clearfix class to each element from which floated items are escaping. Here's the code for the corrected paragraph:

This is the same image and paragraph as above, except that I've added the clearfix class to the paragraph. Now, the paragraph expands to contain any floated elements.

I find the clearfix class to be a very elegant solution. It fixes the element with the issue (not neighboring elements), and it's very robust and reuseable. All you need to do is add a clearfix class to each element that needs to expand to contain a floated element.

There's just two teensy little problems with the solution thus far - Internet Explorer 6 and Internet Explorer 7. They don't support the :after selector, so a bit more code, inside conditional comments, is required.

That is how to corral escaping floated elements using clearfix, including an IE7 solution.

Photograph originally from APOD.