Chain-link-image2

Part 4 – Creating Web Links

Writing for the web naturally entails offering links to various other resources. As you probably expect, Markdown offers a couple of simple ways of including web links in your posts. Although it’s slightly more complicated than indicating italics or boldface, it’s much less fussy than the actual HTML coding.

Inline Web Links

A simple web link has 2 or 3 parts:

  1. The visible text or name of the website,
  2. The URL address.
  3. Optionally, other text to associate with the link.

The basic format to use is:

[some text here](http://www.webaddress.com)

So, a link to my blog could be written:

[Frugal Guidance 2](http://andybrandt531.com)

which will show as a clickable link:

Frugal Guidance 2

Remember:

  1. The first part of the reference is the text you want the reader to see. It is enclosed in square brackets ( [ & ] ).
  2. The second part is enclosed in normal parentheses.
  3. Enter the full URL within the parentheses, including the “http://”.
  4. There must not be a space between the two sections.

This creates the actual HTML code:

<p><a href="http://andybrandt531.com">Frugal Guidance 2</a></p>

You can add a title to the web link by typing it within quotes after the URL, like so:

[my blog](http://andybrandt531.com "Frugal Guidance 2")

Just add a space and a quotation after the URL, still within the parentheses.

which appears as:

my blog

As you can see, this reference doesn’t show the name of my blog until you hover your mouse over the link and a small box pops up highlighting the name of my blog (or whatever you put into the quotes).

You can get a bit creative with these links:
While Frugal Guidance 2 is celebrating it's 2-year anniversary, come visit [my blog](http://andybrandt531.com "click here before March 8th and get a 15% discount")

This will show up as:

While Frugal Guidance 2 is celebrating it's 2-year anniversary, come visit my blog.

When your reader hovers his or her mouse over the link, the surprise message pops up. Obviously, this might not work as well on a touch screen.

If you want the popup to show the actual URL (normally invisible in the post), simply repeat the link inside quotes:

If you want to visit the shrine of the original Markdown site, visit [Daring Fireball's Markdown Dingus](http://daringfireball.net/projects/markdown/dingus "http://daringfireball.net/projects/markdown/dingus").

This will show up as:

If you want to visit the shrine of the original Markdown site, visit Daring Fireball’s Markdown Dingus.

Hovering over the link shows the address in a popup. This technique can also be used to attempt to “spoof” an address (show an address other than the one the link is to). You must never, never do this if you want to be seen as a reliable, ethical blogger! (There are probably better ways to spoof addresses to be less detectable, anyway. I wouldn’t know.)

Just the Link Itself

If all you want to show is a live URL link, with no descriptors, text or popups, there’s a different way to do that. Just enclose the address between angle brackets ( < and > ) like so:

<http://andybrandt531.com>

which shows as:

http://andybrandt531.com

It’s simple, easy, and maybe just a little bit boring since it doesn’t say anything about the link. It just gives the address. Sometimes that’s all you need, though.

Reference Style Web Links

The third style of live links is just a bit more complicated, but has its own advantages.

Reference links show a title and a reference mark of some sort, which allows you to type in the actual address anywhere else in the document. The format is:

[some text here][ID info]

and somewhere else in the document you enter:

[ID info]: www.webaddress.com "optional text here"

Note that each part of the reference now uses square brackets (not angle brackets and not parentheses). When done properly, the second part is invisible to the reader, only the author can see it.

This style of writing links is useful if:

  • you have a lot of links in your post ,
  • you want to make your draft post easier to read and proofread (since the URLs aren’t interspersed with the readable text),
  • you have several links to the same site, you only have to type the full URL once. (Handy if you have to edit it later, too.),
  • while in the heat of writing, you can write the title as you go, bang a return or two, and enter the beginning of the reference line as a reminder to look it up later without breaking your thought process.

For example, I can type this:

Some of my favorite zenware writing tools are [FocusWriter][1], [WriteMonkey][2], [OmmWriter Dana][3], and [Beenokle's ZenWriter][4].

[1]: http://gottcode.org/focuswriter/
[2]:  http://writemonkey.com/
[3]: http://www.ommwriter.com/en/
[4]: http://www.beenokle.com/zenwriter.html

And it will read as:

Some of my favorite zenware writing tools are FocusWriter, WriteMonkey, OmmWriter Dana, and Beenokle’s ZenWriter

Note:

  • You don’t need to use numbers for the footnote-like reference, any text will do,
  • You only need square brackets,
  • Remember the colon ( : ) in the reference list (the space seems to be optional),
  • The reference list can be any place in the document (beginning, end or middle),
  • The reference list can be in one location or distributed throughout the post, depending on your organization style and tidiness,
  • The reference list won’t show to the reader.

This sample sentence will show up in HTML as:

<p>Some of my favorite zenware writing tools are <a href="http://gottcode.org/focuswriter/">FocusWriter</a>, <a href="http://writemonkey.com/">WriteMonkey</a>, <a href="http://www.ommwriter.com/en/">OmmWriter Dana</a>, and <a href="http://www.beenokle.com/zenwriter.html">Beenokle's ZenWriter</a></p>

As mentioned, you can use any type of reference in a list, it need not be numbers.

Here’s another example:

My favorite online newspapers are [The New York Times][nyt], [The Washington Post][wapo], [The Los Angeles Times][lat], and the [Honolulu Star Advertiser][hsa].

[nyt]: http://www.nytimes.com/
[wapo]: http://www.washingtonpost.com/
[lat]: http://www.latimes.com/
[hsa]: http://www.staradvertiser.com/ "my aspirational location"

To the reader, this will appear as:

My favorite online newspapers are The New York Times, The Washington Post, The Los Angeles Times, and the Honolulu Star Advertiser.

By the way, these text references are not case sensitive, so you could use [nyt], [NYT], or [Nyt] interchangeably.

If you were to write this in HTML, you would have to enter:

<p>My favorite online newspapers are <a href="http://www.nytimes.com/">The New York Times</a>, <a href="http://www.washingtonpost.com/">The Washington Post</a>, <a href="http://www.latimes.com/">The Los Angeles Times</a>, and the <a href="http://www.staradvertiser.com/" title="my aspirational location">Honolulu Star Advertiser</a>.</p>

You can see how writing, editing and proofreading links is much simpler in Markdown than in HTML.

Many writers will use these referential links if they want the draft copy to be easier to read (and perhaps get a better idea of actual word count).

Using Implicit Links in Reference Style Web Links

Above, you saw how to use numbers and letters to reference your links while creating these reference style web links.

There is a slightly abbreviated style that uses “implied” links, using the text in the title as the actual reference. This is easier to show than to describe:

My favorite online newspapers are [The New York Times][], [The Washington Post][], and [The Los Angeles Times][].

[The New York Times]: http://www.nytimes.com/
[The Washington Post]: http://www.washingtonpost.com/
[The Los Angeles Times]: http://www.latimes.com/

As you can see:

  • The title is enclosed in brackets, as in the previous styles,
  • The title is followed by a set of square brackets with no content between them, not even a space.
  • The reference list is created by putting the original title in the first set of brackets, followed by a colon,
  • The web address follows, as in the other examples.
  • There is no “footnote” mark, number or text used with this technique, it’s “implied” instead.
  • Generally, this makes for more typing, but it’s your choice.

Image Links

First, some thoughts on images, blogs and modern display requirements

Image links are, in my opinion, much less useful than the web links we’ve been discussing. Indeed, WordPress and many other blog platforms have their own image database for adding images to the blog, making these links unnecessary.

However, some of the newer, simpler blogging platforms (for example, Ghost) do not keep an image database. They do have other ways of storing images with the blog, and many use a simple drag-and-drop method of adding images to a post.

Also, to use an image link, the image must already be on the web. You cannot store a photo on your hard drive and expect it to show up on demand on your blog whenever somebody looks at it. If somebody later moves or deletes the source image, it won’t show up on your blog.

Another limitation is that basic Markdown does not allow you to specify the dimensions of the image.

Remember, also, that just because an image is on the web you cannot automatically assume it is in the public domain. Just because you can add a link to an image for your blog, doesn’t mean that it’s legal to do so.

Also, with responsive design now popular, your blog software may be automatically adjusting content to be read on anything from a small smart phone (or possibly even a watch) to a mega-sized high resolution monitor. The needs are not always intuitive: you might need a larger, high resolution image for an iPhone with Retina display than you need for a laptop with standard resolution! Having a single, web-based image as your source may make the display worse.

Having said all that, image links might be useful in a couple of cases:

  1. When the image is already on the web and easy to access with no copyright restrictions.
  2. When your blogging tool requires you to store your images in Dropbox, Box, Google Drive, iCloud or a photo or media storage location in an open directory.

Inline Image Links

Just as with web links, there are Inline Image Links and Reference-Style Links.

The format for an inline link is:

![some readable text here](http://path/to/imagename.jpg)

or

![some readable text here](http://path/to/imagename.jpg "Optional title")

Bakari Chavanu, in his MakeUseOf article on Markdown, Learning Markdown: Write For The Web, Faster offers this example:

![MUO logo](http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2006/07/muosquares.png)

Note what Bakari’s done here. Start with the Exclamation Point, then a title or text in square brackets followed by the web address enclosed in parentheses. The URL ends, finally, with the name of the graphic, in this case a PNG file. No spaces anywhere except in the title.

When you finish typing, your Markdown editor should show the mentioned MakeUseOf logo (if you have an internet connection):

MUO logo

The actual HTML code is just a bit more complex than the Markdown syntax:

<p><img src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2006/07/muosquares.png" alt="MUO logo" title="" /></p>

Reference-Style Image Link

The format has two separated parts, just as in web links:

The text part is in the format:

![readable text here][id]

Then, somewhere else in the document:

[id]: http://url/to/the/image.jpg "Optional title"

Again, the advantages of using the reference style image links are:

  • They’re easier to read and proof.
  • You can enter the web address once and use it as many times as you like.

Email addresses

To embed a live email address into a web post, put the address within angle brackets, like so:

<andybrandt@mysteryemailprovider.net>

Which will give you a clickable email link:

andybrandt@mysteryemailprovider.net

As a security feature, Markdown will also add extra HTML code to the address so that it does not appear as an email address to email-address-hunting spam bots.

For example, the above (fake) email address ends up with the HTML code:

<p><a href=”&#x6D;&#97;&#105;&#x6C;&#x74;o:&#97;&#110;&#x64;y&#98;&#x72;&#x61;&#x6E;
&#x64;&#x74;&#64;&#109;&#x79;&#x73;&#x74;&#x65;&#x72;&#121;&#101;&#109;&#x61;
&#x69;&#x6C;&#112;&#114;&#111;&#x76;i&#x64;&#101;&#x72;&#46;&#x6E;e&#116;”>&#97
&#110;&#x64;y&#98;&#x72;&#x61;&#x6E;&#x64;&#x74;&#64;&#109;&#x79;&#x73;&#x74;
&#x65;&#x72;&#121;&#101;&#109;&#x61;&#x69;&#x6C;&#112;&#114;&#111;&#x76;i&#x64
;&#101;&#x72;&#46;&#x6E;e&#116;</a></p>

Don’t expect this to always hide the actual email address, though, and carefully consider whether you want to put your or somebody else’s email on the web.

In our next post, we’ll explain how to quote actual code in “Part 5: Blockquotes, Backticks, Backslashes and Bare Knuckles.” See the other parts of this series:

Markdown for Bloggers – Why Use Markdown? (part one)
Markdown for Bloggers – Basic Formatting (part two)
Markdown for Bloggers – Headlines & Lists (part three)
Markdown for Bloggers – Quoting Text and Code (part five)
The Monster List of Markdown Tools (part six)

Credits:

Chain link title photo is from “Ship’s Chain” by Bill Longshaw and FreeDigitalPhotos.net, edited by the author with Topaz Labs Impression.

The inline image link sample was of the MakeUseOf logo. The example is from Bakari Chavanu, in his article on Markdown, Learning Markdown: Write For The Web, Faster

Frugal Guidance 2 - http://andybrandt531.com