Two little html touches

August 6, 2006 11:43 PM

Two little html touches can really help make complex FPPs much better. I am convinced that more people would use them if they knew how. Any chance of mentioning these to prospective posters on the "New Post Page," if not actually incorporating them into the MeFi menus?
posted by blahblahblah to Feature Requests at 11:43 PM (40 comments total)

Any chance of talking about these touches in your MeTa post?
posted by scarabic at 11:46 PM on August 6, 2006 [1 favorite]

The first "little HTML touch" is the use of Title Tags (see the first link in this Meta). The second one, however, I'm not sure I understand.
posted by jonson at 11:54 PM on August 6, 2006

Sorry, should have been clearer, rather than trying to be clever. They are both simply uses of the title tag, but to different effect.

Namely: using the "abbr title" tag, which allows text to be explained upon a mouseover, in the format: abbr title="mouseover text". Second is the use of the "title" tag in the link itself, which follows the html address in a link, and allows for an explaination of where a link will go on mouseover, like this.

There may be more elegant ways to do both things, but the effects are very useful, and would help improve FPP posts.
posted by blahblahblah at 12:00 AM on August 7, 2006

I should add, the use of title tags would be subject to the usual Great and Ever-Evolving Cultural Norms of MetaFilter, obviously. But, some possible uses for consideration:
-> Skip the wikipedia "^" links by including a brief expanation of potential confusing terms using "abbr title"
-> Mark video formats using the title tag, rather than including [.wmv] or whatever in the text
-> Indicate username/password/bugmetnot combos using the title tag in the relevant link.
-> Allow snarky editorial comments about Bush or religion or whatever to be included, without disrupting the entire FPP.
posted by blahblahblah at 12:07 AM on August 7, 2006

They are nice touches. I only learned about title tags the other day funnily enough. But I'm slow, with a full complement of lazy. So thanks. That's 2 new things this week. Time for a lie down. (Maybe a very basic html drill or list should be on the posting page.....or not)
posted by peacay at 12:08 AM on August 7, 2006

How about some html how-tos for the lazy?
posted by scarabic at 12:10 AM on August 7, 2006

Adding extra information is always good, but please don't replace [.wmv]-style indicators and such with them. Titles and Abbrs are nice when you see a term or link and think "huh?", because you can then mouseover and find out more. Having to mouseover every link (and wait for the popup to appear for title) and checking the message before clicking it if you don't want to download large files for instance is a pain, compared to just being able to scan the text.
posted by fvw at 12:25 AM on August 7, 2006

<a href="http://example.com" title="text which will be in the hover mouseover">normal text of your link</a&gt

<abbr title="definition of the abbreviation that will be in the hover mouseover">the abbreviated term</abbr&gt
posted by Rhomboid at 12:40 AM on August 7, 2006 [1 favorite]

crap. &gt should be >
posted by Rhomboid at 12:41 AM on August 7, 2006

goodnewsfortheinsane also makes use of the trusty [more inside], which makes many a mefite happy.

I've got a dark past full of obscure and overly linked posts with no title tags and no supporting information, so as penance, I like to help out when I can.
posted by shoepal at 12:50 AM on August 7, 2006

The <abbr> thing is something I took an age to find on that link (and then only by searching the source for the page) as in Safari at least it looks exactly like normal text until it's mouseovered. Is there an accepted way to highlight text you want to apply <abbr> to?
posted by edd at 1:41 AM on August 7, 2006

Acronym works, also, instead of abbr. hth
posted by blacklite at 1:48 AM on August 7, 2006

The problem though is using <abbr> tags on things that are not abreviations violates 'semantic markup'.
posted by delmoi at 3:17 AM on August 7, 2006

The problem though is using tags on things that are not abreviations violates 'semantic markup'.

Is blahblahblah suggesting that? Not that I'm a crazed markup fetishist, but putting any old text inside abbr or acronym tags just to squeeze more information into a post seems a bit off.

as in Safari at least it looks exactly like normal text until it's mouseovered. Is there an accepted way to highlight text you want to apply to?

Some (most?) browsers display the text with a dotted line under it, but you also see folk styling the tag in italics, or both. Odd that Safari doesn't do anything at all.

If you want to make sure the text is italicised and underlined, you could do something like this:

<abbr title="Ask MetaFilter" style="font-style:italic;border-bottom:1px dotted #000;">AskMe</abbr>

which would show up like this:

AskMe

But it would be better if mathowie could add something similar to the MetaFilter stylesheets to make up for Safari's silliness. (If only because users of the plain text theme won't see the underline in the example above...)
posted by jack_mo at 3:47 AM on August 7, 2006

Oops, I totally cocked that up. But you get the idea....
posted by jack_mo at 3:51 AM on August 7, 2006

Or maybe the style tag gets stripped?

I'll shut up now.
posted by jack_mo at 3:53 AM on August 7, 2006

Well, technically they're "attributes", not "tags".
posted by madman at 4:14 AM on August 7, 2006

Is blahblahblah suggesting that?

Well, it is exactly how he used it in the post. In fact, in the post, he didn't even use it for a questionably broad definition of the word "abbreviation". He just put information that should have been in-the-clear behind an oblique wall. Both of the first two comments make the case better than I could that this would be a catastrophe of the highest magnitude not very helpful.

If you want to make sure the text is italicised and underlined, you could do something like this:

Or, if it was a good idea, it's something that could be easily added to the site stylesheet.
posted by Plutor at 4:22 AM on August 7, 2006

STFU
posted by quonsar at 4:29 AM on August 7, 2006 [1 favorite]

abbreviation tags mean that screen readers will read the linked word out loud, IIRC, so if you want to use them correctly, use them with abbreviations. Title tags are often useful, though I'm still of the opinion that folks should really turn on the status bar if that level of detail is important to them. We have a lot of people who already use title tags in their FPPs to both good and bad effect.
posted by jessamyn (staff) at 5:05 AM on August 7, 2006

Googling suggests that once upon a time Safari liked to italicise abbr-icised text. I'm not sure when this changed. It does imply that they've deliberately decided to do nothing rather than something though.
posted by edd at 5:07 AM on August 7, 2006

Using abbr for things that aren't abbreviations is stupid. Just write things in brackets (like this) and you avoid writing bad HTML and annoying people who have to mouse-over your crap.
posted by reklaw at 5:37 AM on August 7, 2006

abbreviation tags mean that screen readers will read the linked word out loud, IIRC

While a common myth, this is untrue.

Safari's visual treatment of abbr tags with title attributes can be changed with a single line of CSS.

Using abbr for things that aren't abbreviations is stupid.

Indeed, but "abbreviation" is a broad term. For example. Not all abbreviations are acronyms.
posted by scottreynen at 5:53 AM on August 7, 2006

Honestly, I think that if you're putting so many links in your post that you don't have space to explain what they are, you know, *in* your post, you should reconsider whether they're truly necessary or relevent.
posted by jacquilynne at 6:21 AM on August 7, 2006

I think this is a bad idea.
posted by blue_beetle at 6:54 AM on August 7, 2006

I hereby swear a spit-filled blood oath to use title wherever and whenever I possibly can.
posted by Blazecock Pileon at 7:02 AM on August 7, 2006

I didn't know about the "semantic markup" problem with using abbr, here I thought it was just a useful tool to solve some of the other issues that annoyed the community. Is there a way to achieve the same effect without invoking the anger of the HTML gods?
posted by blahblahblah at 7:34 AM on August 7, 2006

Is there a way to achieve the same effect without invoking the anger of the HTML gods?

clear, careful editing.*

*also excellent for appeasing any number of other irascible gods.
posted by carsonb at 7:44 AM on August 7, 2006

Avoiding cryptic, look-mom-no-explanations style posts would be better than little html touches.
posted by signal at 8:01 AM on August 7, 2006

I agree with signal.
posted by bob sarabia at 9:34 AM on August 7, 2006

Me too.
posted by languagehat at 11:12 AM on August 7, 2006

The abbr tag was a nice new trick, but when I tried it, I realized that it doesn't show up in IE (6.02). Can anyone see it in Explorer?
posted by Termite at 12:40 PM on August 7, 2006

I can't, Termite. My work browser is IE5 on a PC, which apparently ignores the abbr. The title attribute is very nice, though.
posted by diddlegnome at 5:48 PM on August 7, 2006

It's not that IE ignores it, it's that there is no explicit rule in metafilter's stylesheet for the tag and so the browser defaults to whatever its stock vaule is, which for IE appears to be nothing. If mathowie added a rule to the stylesheet then it should work similarly in every browser.
posted by Rhomboid at 5:56 PM on August 7, 2006

Title tags are often useful, though I'm still of the opinion that folks should really turn on the status bar if that level of detail is important to them. - jessamyn

I have the status bar on, and I use it frequently. It's great for some things, like alerting me to what type of file the link is directing to (pdf, wav, etc). But it's often completely useless for giving any clue of what the content on the page will be. This youtube-heavy post is a perfect example. The status bar tells me that I'm going to youtube.com. This is marginally useful. But reading youtube.com/watch?v=W7vu2Rhg6 doesn't give me any hint as to what content will be at that page. (This is not a problem limited to youtube links, this was just the most readily available example.) Shoepal's suggestion in that thread goes a long way to clarifying. It's got more information than the status bar allows.

Also, I'm in IE 6.0 when at work, and it doesn't display anything for abbr tags. So while the idea of it is nice, it's a lot less useful when multiple browsers don't support it.
posted by raedyn at 8:05 AM on August 8, 2006

"abbr title" and "title" merely detract from the power and simplicity of "button".
posted by gramschmidt at 1:56 PM on August 8, 2006 [1 favorite]

If you want to use this, which is of debatable benefit, use span, not abbr or acronym (unless you really are marking up abbreviations or acronyms).

The title attribute can be added to nearly anything in HTML; it is not a “tag” and it is not tied to abbr or acronym.
posted by joeclark at 2:04 PM on August 8, 2006

What if the following text was put in the posting tips:

"Please don't create posts that link to sites without any explanation of what those links mean. It is not clever or interesting, and just creates more work for everyone."
posted by mecran01 at 2:16 PM on August 8, 2006

Why do I feel compelled to push buttons I'm presented with?

Somewhere in the middle of Alaska at an unmanned outpost, a light is flick on and of and on and off...
posted by raedyn at 2:34 PM on August 8, 2006

It actually goes to a light in a port-a-potty near a construction site in southern Ontario. Please stop annoying Six Nations representatives, raedyn.
posted by gramschmidt at 8:08 PM on August 8, 2006