XHTML Tags and Attributes Benefit Bloggers (Don’t Ignore Them!)
Basic Text Formatting
There are certain attributes which, if you are used to using WordPress or another quality CMS of some sort, you should know about. Bolding (strong) and emphasizing text (em) is prevalent, and shouldn’t really be surprising anymore. There are a couple of concepts which may be fresh, though.
“Del” and “Ins”
These two tags are handy when it comes to modifying what you’ve written later. Blogging carries with it a number of etiquettes, best practices if you will: one of them is not changing what you’ve written without disclosing what you’ve changed. In some cases this is done with an editorial note or even a second post. But there is a better way.
XHTML provides a method for showing changes made using semantic markup. These two tags, del and ins probably aren’t included in your default WordPress editor, so you’ll have to add them manually to use them. (To do this, select Code instead of Visual when editing your pages.)
Anything that’s deleted, add
<del> </del>around the text that you’re removing. This will (by default) strike through the text. This is pretty universally accepted as meaning “I removed this text”. Adding
<ins> </ins>around text, however, will by default underline text instead of striking it out. These two tags used together could easily communicate what an additional paragraph could.An example:
Here’s something I’m really embarrassed to have written. This is what I wanted to have said.
Treating Hyperlinks Well
There are two attributes which could prove beneficial when adding links. The first, most prevalent is the title attribute. The title attribute is displayed as a description which displays over the linked text when the text is hovered over. Provide a helpful description for where the link goes, especially if your linking text doesn’t describe it.
WordPress provides a title input box when linking up text in the visual editor, so this one is probably used more often than the next item I’m going to bring up. But admittedly I don’t always use the title attribute, especially if the text linking is very descriptive. Anyone have strong opinions on that?
The rel attribute is a bit more elusive in the blogging world, particularly (I think) because it isn’t well understood. Basically the rel attribute goes inside of links in order to denote the relationship of the target document with the linking document. You’d be most familiar with seeing rel in the links for stylesheets, like this:
<link href="stylesheetlocation.css" media="screen" rel="Stylesheet" type="text/css" />But rel can also be used in other ways. If you are linking to a blogging partner, for instance, you might put in:
rel="colleague"And this would say that the page the link is pointing at has a certain relationship with the page that’s sending the link. Really, think of each URL as a person. Your URL is you, theirs is them. There are other ways of using rel, but my purpose here is mainly to draw your attention to it. Read more about Microformats and XFN for more information about the rel tag.
Making Images Clear
Actually, it’s not about the images. It’s about the visitors. Some visitors may need some assistance with “seeing” your images (think of screen readers) without actually seeing them. The alt tag can help with that. It might look like this:
<img src="ryan.jpg" alt="A photo of Ryan" />Now there’s an important note to consider about the alt attribute for images. It is not supposed to add anything to the image. All it is supposed to do is act as a replacement for the image if the image isn’t there. Check the W3C on the topic.
Pack Your Quotes
When I say pack, I mean with useful information. For instance, each and every quote can (and should) contain a cite attribute. The cite gives credit to the thing being cited, whether it’s a person or a website. The only trick is: you don’t get to see/enjoy the cite attribute’s content unless you View Source.
So why add in cite?
Well, think of it like a package you may one day open. Because at some point (I believe) there will be a standard way of unveiling the cite attribute. Currently the only way I’ve ever experienced that was any good at all involves a few lines of Javascript (there are Plugins for WordPress) that extracts the cite attribute and drops it in after the quoted element. That’s all fine and good, but I trust better options are coming.
An example:
<blockquote cite="Ryan Imel">
So very few actually drop in the cite attribute. I'm about to say this, in real life.
</blockquote>So very few actually drop in the cite attribute. But one day you’ll all see the benefit, and then you’ll regret it. One day you’ll all see…
In Conclusion
Hopefully that whet your appetite for powerful semantic markup a bit. If you need more, check out the W3C. It’s not attractive or fun to browse all the time, but it’s worth a look over now and then to see what’s out there. I would also suggest book from Friends of ED for more on smart semantic web practices.
Michael from Pro Blog Design | August 10th, 2007 at 4:51 pm #
Great post - A lot of underused tags that you’ve mentioned there.
I don’t use many of them on a regular basis tbh, because if you have 10 links/quotes in a post, then you’re adding on a good 10 minutes for the sake of information which at this point in time, isn’t overly useful.
The exception to that would be on a blogroll when the rel attribute is very useful. (And I always add the alt tag. It’s certainly worthwhile.)
Jeff | August 10th, 2007 at 7:36 pm #
Good info of some helpful tips. I’ll have to start incorporating some of this in my blog. I’m new to the blogging community so I appreciate the help!
TextAdSearch | August 11th, 2007 at 2:33 am #
Some tags I never knew you could use like that. Are there any benefits to using del ,ins and rel?
Michael from Pro Blog Design | August 11th, 2007 at 10:15 am #
Textadsearch, just my opinions, but:
del - Sort of. I think it’s very limited though. It’s fine if you are making corrections, but what if you’re making amendments, changing wording etc.? Do you stroke out the original word? As a reader, that would be more annoying that helpful…
ins - I don’t like it because the underline makes it look like a hyperlink.
rel is the one that I think really could be useful in the future. For instance, search engines try to work out relationships between websites based on the number of links. Well, with the rel attribute, you can say more about those links. You can say if they are friends, contacts, people you know in real life etc. and the search engines could then use that information to further gauge the value of individual links.
Ryan Imel (Post Author) | August 13th, 2007 at 1:52 pm #
@Michael: I would agree on the time issue. It can be time consuming. If I’m in a crunch, I’ll only add titles to my links if there isn’t much describing the link in the context of the link.
@Jeff: I’m glad you found these tips useful!
@TextAdSearch: del and ins are, I believe, very wise to use as they are semantically correct. Structurally, things which are deleted (or removed) should be wrapped in del, and things which are added should be wrapped with ins. I would hope you would want to do things right. Other than that I don’t see direct benefits for you.
And re’s time is coming. Still building momentum.
@Michael, again: Re:del - I would say discretion plays a key role in that situation. If it’s not useful, no worries. But keep it in mind, because you never know when del will be perfect for a certain situation…
Re: ins - You can style it any way you like with CSS.
Re: rel - I agree completely.
Michael from Pro Blog Design | August 13th, 2007 at 3:58 pm #
Thanks for the reply ryan.
re: ins - That’s true, but as soon as you style it to look differently from the standard, what use is it to the readers? Unless there is a standardized way of showing inserted content, they won’t realise that it is inserted content. They’ll just assume you’ve formatted that bit of text for some reason.
I agree with you about del though. There are certainly some obvious cases whereby del could be used. (Most of all, when an actual reader points out a spelling mistake; you want to correct it, but not necessarily remove all evidence of the mistake.
)
Dave Starr --- ROI Guy | August 14th, 2007 at 10:00 pm #
Very nice. I learned a lot. A great many bloggers (and sadly some theme designers) seem totally ignorant of the fact that HTML is the language that enabled the Web.
I’m particularly interested in the “cite” option for blockquotes, because it has long irritated me that there isn’t a decent way to properly quote as there is in all but the most rudimentary word processors. With good word processors, such a Word, Open Office, etc. one can make documents in a scholarly, “stylebook” complinat fashion, it’s amazing that so little along this line is available in the blogging world.
Plugin designers, looking fior a new project? Instead of “yet another Stumbled Upon or Dogg button, enable writers with the mechanics of decent writing.
Ryan Imel (Post Author) | August 15th, 2007 at 7:53 am #
@Dave: You make a good point. I would say the main reason for the lack of support, specifically for bloggers, is twofold: first, blogging has risen up (relatively) quickly and without warning, and secondly the standards game is very slow. It can take years for a single improvement to finally make it onto browsers so we can use it.
I especially like the cite attribute too, and it will be nice when we see it come out of hiding. There are some javascript solutions to pulling that information out (in a good way) as well as a few WordPress Plugins. I’ll have to cover some of those options in an upcoming post, aye?