Plain text web links in blogger.com comments

Elizabeth left a comment asking about this general issue and I thought rather than publish the comment where she made it, instead I'd just do a new post on the topic for whatever it may be worth to the general public. She asked:

If I can pick your brain once more, DimSkip: would you be kind (and patient) enough to explain to me how you make those pretty blue links with the articles' titles, or relevant phrases, that take you directly to their sites?

No problem. It’s actually quite simple and involves something rather ominously known as HyperText Markup Language, or HTML (though that's neither here nor there). All you really have to know is that if you manually enter this...

<a href="http://dimskip.blogspot.com">DimSkip's Universe</a>

...it produces this...

DimSkip's Universe

...when the comment is published.

The <a href=""></a> HTML tags just specify that it's a clickable link being defined. Obviously the quoted part after href= is the target web address for the clicking party to visit. And the plain text between <a href=""> and </a> is your text that the viewer will see as the clickable link.

The color is not something you can specify—not in a mere comment anyway where you are only allowed to do some very limited and basic HTML stuff—but is simply a matter of each blog's settings as specified in the underlying blog template.

Personally, I like to format link text as bold too just to make it stand out that much more from any regular text surrounding it:

<a href="http://dimskip.blogspot.com"><b>DimSkip's Universe</b></a>

Here's what that link looks like when I put it in the middle of one of my patented longwinded rambling paragraphs of plain text, like so: DimSkip's Universe. I just think it looks a little better that way, but it doesn't matter. Folks can judge for themselves what they like or if they even want to bother with this method in the first place. Personally, I think the slight bit of extra effort is worth it for the improved look and ease of use for the blog reader.

Replace the <b></b> tags with <i></i> tags and you'll get italics.

You can use the <b></b> and <i></i> tags together too, but you just have to remember to keep the nesting of all HTML tags in proper order. If you have an opening <b> tag followed by an opening <i> tag, they must be closed in the reverse order, </i> then </b>, all the while keeping both sets of tags within the <a href=""></a> tags. (I'm assuming we're still talking about just formatting links here, but the <b></b> and <i></i> tags are not confined to being used just within <a href=""></a> link tags, of course, they can be used with any text.) You can't have an opening tag of one type followed by a closing tag of a different type or the HTML gods will be angry and reject your offering.

The biggest mistake I tend to make occasionally is that I'll put the <a href=""> opening tag in place, do the plain text part and the closing </a> tag, then completely forget to cut-n-paste the http address from the target web page (which I have open in another window) to between the quotation marks. For some reason the HTML gods don't seem to mind that (as long as the closing </a> tag is there somewhere) and it will be accepted if submitted for publication. But the link obviously won't work right either (it seems to default to some generic irrelevant link instead).

It really is very easy once you know how it's done and especially after you've done it a couple times to get the hang of it.

I like doing links this way because I can control exactly how they appear. It also avoids the issue of how overly long http addresses may display if you put them in as they are for folks to manually copy and paste to their own browser address bars. With this HTML method of specifying a plain text link if the clickable text wraps to a new line, so does the link with no problem.

TinyURL (as I know you're familiar with, Elizabeth) also works for avoiding lengthy http address issues, but anyone clicking (or copying and pasting) such a link can't tell what page they may be going to until they actually get to it (or unless the TinyURLer used the preview mode). The HTML method lets folks just hover their mouse pointers (no need to click if they don't wanna) over such a link to view the target http address in their status bar at the bottom of the IE window (assuming that they're even using IE and the status bar is set to display, of course). If the link looks reasonably innocuous, then they can click on through with a certain amount of safety assurance.

There's actually a little more you can do when coding links the HTML way, but within blogger.com blog comments, that's really all you can get away with as the extra frills are verboten. However, if you're doing links in one of your own blog posts you can add target="new" after the href= (note—before the >) in the opening link tag. That will specify that you want the clicked link to open in a brand new browser window, leaving the reader's current browser window stationed right where it is on your own blog. (And to add the target="new" you have to switch to the "Edit HTML" box when composing your post. I'm used to the basic HTML stuff, so I just compose posts that way all the time, but I suspect that's highly unusual.)

Anyone interested should feel free to try some experiments with this HTML link stuff in the comments section here utilizing the "preview" button (so you don't have to wait for my approval, but can view your attempt immediately). Remember that if you mess anything up too bad, blogger.com probably won't even accept the submission, preview or actual, instead essentially telling you to try again with some hint as to what went wrong. And if your comment is accepted for preview, but still doesn't appear correctly (or the way you expected) on the page, well, you can just try to correct whatever seems to be at issue and re-preview. If you want to actually submit your experimental comment(s) for real (and for posterity), that's up to you, of course. Feel free.
___________________

UPDATE—January 19: I added an FYI link to this post right in my commenting guideline. Seemed like a good idea. However, I would have liked to use the target="new" option so a commenter could just flip between the commenting page and the link help as needed, but blogger won't let me do that there (just like it doesn't allow it for commenters either).

Oh well. I still think it's worth the convenience of having the link there. Readers can always go back to the commenting page, then right-click the FYI link to select "Open in New Window," effectively achieving the same result.

---

As a minor footnote to this, I learned exactly what I had to do to get those HTML tags to appear in this post as they are, i.e. without being interpreted according to their normal HTML meanings. I kind of thought I knew how to do it before I started, but it turned out to work not quite as I expected. Some brief experimentation let me hit on the proper way to use the <code></code>tags to achieve the effect, though it was a bit more cumbersome than I'd hoped. Anyway, I learned a little something new myself.