13

When linking to an image using the Markdown Syntax

![alt text][1]

The alt text gets added as the "alt" attribute on the img tag, which is correct. It would be nice if it could also be added as the "title" tag, so that tooltips work.

Sadly I have no good usage example for it. I wish I could claim that some textmode browsers or browsers for people with disabilities don't support alt and use title instead to give this request some credibility, but I think ultimately I ask for XKCD-Fun.

But well, asking can't hurt :)

Improve this question
2
  • So many would have "alt text" as the tooltip it would be noise and not fun for a screenreader.
    – random
    Commented Jan 17, 2010 at 9:59
  • 1
    @random, isn't that the other way around? Screen readers use the alt text, which indeed is too often "enter image description here" (previously "alt text").
    – Arjan
    Commented Dec 6, 2011 at 8:29

3 Answers 3

Reset to default
21

You just use ![I like MSO!](https://i.sstatic.net/HQ44r.png "Meta Stack Overflow")?

I like MSO!

XKCD is the funzorz! - G-Spot

From the Markdown help for Images:

Images

...
Just like links, images work with reference syntax and titles:

This page is ![valid XHTML][checkmark].

[checkmark]: http://w3.org/Icons/valid-xhtml10
             "What are you smiling at?"

...

and that for Links:

Advanced Links

Links can have a title attribute, which will show up on hover. Title attributes can also be added; they are helpful if the link itself is not descriptive enough to tell users where they're going.

Here's a [poorly-named link](http://www.google.com/ "Google").
Never write "[click here][^2]".
Visit [us][web].

[^2]: http://www.w3.org/QA/Tips/noClickHere
     (Advice against the phrase "click here")
[web]: https://meta.stackoverflow.com/ "Meta Stack Overflow"

Even if none of these were available, you could always use HTML:

<img src="http://sstatic.net/mso/img/logo.png" alt="I <3 MSO!" title="Meta Stack Overflow" />
Improve this answer
4
  • I didn't know that. Cool :)
    – Michael Stum
    Commented Jan 17, 2010 at 12:56
  • Cool indeed, did I miss it or was it documented somewhere?? +1
    – o.k.w
    Commented Jan 17, 2010 at 13:03
  • 1
    I saw it here on meta. Or maybe on the markdown FAQ. Can't remember. It's been a while introducing subliminal messages to images.
    – perbert
    Commented Jan 17, 2010 at 13:06
  • Note that attribute order matters for the <img> tag on Stack Exchange (unlike standard HTML).
    – duozmo
    Commented Nov 17, 2015 at 23:18
3

Well, alt and title are meant to serve different purposes. I'll leave the debate elsewhere.

If you want to describe an image in your post, you can just type it out in the content. If you want to have a text to tell the users what the image is (for whatever reason the image didn't load or still loading), it should be something shorter and more concise so that it appears where the image is.

However somehow many just use the title as the same as alt (which I suppose is the intention of the OP). Having a seperate markdown for title seems too troublesome.

Like this anyone? ![alt text][title][1]

Here's an example of what I will do:

SO-Meta Logo
Above is the lovely logo of Stack Overflow Meta <-- this one is to describe the image

SO-Meta Logo https://i.stack.imgur.commmm/HQ44r.png
Above is the lovely logo of Stack Overflow Meta <--Intentionally left broken to see the alt text

Improve this answer
9
  • 2
    Hmm, I can't even see the alt text on the broken image (Chrome, Mac). Come to think of it, I don't think I ever have seen alt text in Chrome.
    – Kyle Cronin
    Commented Jan 17, 2010 at 11:48
  • 1
    Broken image works fine as an example on Opera.
    – random
    Commented Jan 17, 2010 at 11:52
  • 1
    @Kyle: You are right! I tried shortening the alt text, still no show. A webkit engine issue perhaps?
    – o.k.w
    Commented Jan 17, 2010 at 11:53
  • I'd say so, as Safari doesn't display it either.
    – Kyle Cronin
    Commented Jan 17, 2010 at 11:56
  • Yea, similarly for Chrome/Safari on Windows.
    – o.k.w
    Commented Jan 17, 2010 at 12:15
  • Alt-text doesn't work in Chrome on Linux either.
    – Brad Gilbert
    Commented Jan 17, 2010 at 15:27
  • I guess I'm missing the point, but the examples do not match the ![alt text][title][1] scheme, do they? Or are you suggesting a new Markdown format?
    – Arjan
    Commented Jan 17, 2010 at 17:59
  • @Arjan: I'm just suggesting but 'circular reference' answered perfectly.
    – o.k.w
    Commented Jan 17, 2010 at 22:48
  • @Kyle, as for your first comment: that is caused by not specifying a height, making it use some defaults that are too small. (It seems to default to the line height?) See the Formatting Sandbox.
    – Arjan
    Commented Dec 6, 2011 at 8:10
0

oh, the great schism between alt="" and title="". I remember ranting about this on Twitter a while back, but I can't find it now.

The main difference as I recall is that IE treats title as mouseover text, and I don't think any other browsers do..?

http://www.cs.tut.fi/~jkorpela/html/alt.html#tooltip

Improve this answer
4
  • 2
    Firefox will also display the contents of the title attribute on mouseover. Or is that not what you mean?
    – Stephan202
    Commented Jan 17, 2010 at 10:25
  • 3
    Chrome also displays the title attribute on mouseover.
    – Kyle Cronin
    Commented Jan 17, 2010 at 11:51
  • 7
    title is usually displayed on mouseover. IE also displays alt on mouseover, which isn't the intention of alt and isn't done by other browsers.
    – sth
    Commented Jan 17, 2010 at 16:59
  • (@Jeff, you posted this 2 years ago. I guess your opinion/understanding has changed by now...?)
    – Arjan
    Commented Dec 6, 2011 at 10:32

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .