We Keep Coding

what are data-* HTML attributes?

I've recently found on one of the sites opening tag like this:
<script data-ip="93.1xx.3.2x" data-backuri="something.com">
And I couldn't find any information about it. What are those tags used for?

data-* attributes are custom HTML attributes.
Basically, there are standard HTML attributes like style, src, width, height, class... and these have a special meaning to browsers and are 'reserved'.
However, custom attributes have no special meaning generally and are only special to the owner's application. They can be used to simplify an application's logic.
Using data- before your attribute name ensures that future standard attributes will not use your current attribute. For example, imagine today you are using a sound attribute but then the HTML standard adds a sound attribute meaning something other than what you meant. Had you used data-sound, you would have been fine because there would be no conflict. The specification says no future standard browser attributes will start with data-.
See jquery get HTML 5 Data Attributes with hyphens and Case Sensitivity for some useful info on why we use data-* attributes.
Also, see MDN docs for some useful information.

Using the # inside a CSS id declaration

Normally i would only use alphanumeric with - and _ in any html class or id attribute, but i wondered whether it was possible it include a # in the middle of an attribute, e.g:
<div id = "my_css_id_#f4ed11">
I wont't be a targeting this through CSS, this is purely for javasrcipt.
NOTE The reason I am asking it not because I want to do this, but because of some related PHP code done by someone it would make this part of the project easier.
Thanks

Sure you can. It’s valid as per HTML5.
You’ll simply need to escape the character in a selector (for use in CSS or JavaScript). For the # character, it’s quite simple; you can just use \#.
Here’s a tool that will tell you how to escape any character in a CSS/JS selector: http://mothereff.in/css-escapes#0foo%23bar From that page:
<script>
// document.getElementById or similar
document.getElementById('foo#bar');
// document.querySelector or similar
$('#foo\\#bar');
</script>
P.S. On the subject of weird characters in ID or class values: http://mathiasbynens.be/notes/html5-id-class

I wouldn't recommend doing that. It would be difficult to access an element with ID #...#... via CSS or even Javascript as you noted since # is so overloaded in programming/coding.
It sounds like you want to store some piece of data. You are aware that W3C standards allow attributes that begin with data- right?
For instance, you could keep a piece of data associated with an element as such:
<p data-name="John Jones">I like alliteration.</p>
This article details data attributes effectively.
http://ejohn.org/blog/html-5-data-attributes/

It would be best to do trial and error and see if it works. But, in terms of pseudo-selectors, there should be no problem with have the # symbol. To select you would use:
$("#my_css_id_#f4ed11")

What are some good reasons for not using custom tag attributes such <a my_att='...'>

I'm doing this mainly to store data inside tags as I echo it out of php, and then using jQuery to $(..).attr('my_att') to retrieve it.
It hasn't caused any problems so far, but are there good reasons (other than it's not valid) why we shouldn't do this?

Because you can use valid custom attributes instead:
<div data-customer-id="3" class="customer"> [...] </div>
If you prefix your attributes with data- they are valid HTML. The reason for not just writing your own attributes is that they can wind up inheriting meaning in the future. Obviously this is unlikely for some cases (like "customer-name"), but using the prefix is safter.
Another added benefit is that you are very clear about your intentions; another developer isn't going to come by and think you meant to write kind="text" rather than type="text" when you were trying to mark the model associated with a particular input field.

I prefer to do that sort of thing as HTML5 data attributes.
Then you can use jQuery.data() to get at the attributes if you're in a browser that doesn't support data attributes natively.
For example:
<a href="#" id="MyLink" data-address="1600 Pennsylvania Ave, Washington, DC">
My Address
</a>
Then I can do $('#MyLink').data('address') to get the value back.

I see mainly two reasons to avoid using custom attributes :
1° If the browser is really strict about the HTML standard, he can simply refuse to show a page which don't comply to the DTD or worse, crash trying to display your page.
2° The browser can choose to strip unknown attribute from the element.
Sure, actually, no browser do either of these things, but who can say what new implementations will do in the future ?
Standards are developed for a reason, and it's always a good idea to follow them. Especially when HTML5 let you create custom attributes so easily.

Javascript syntax highlighter that plays nicely with Markdown

I've looked at a few Javascript programs to add syntax highlighting to code blocks on a page, but they all the ones I've found require setting an attribute on the code block to tell it what language is being used. I am generating the HTML with Markdown, so I have no way of setting these attributes, are there any that will do this automatically and will not need an attribute to be set?
The only way I can think of this working is with a shebang line;
#!/usr/bin/ruby
def foo(bar)
bar
end
And it will know it's Ruby, and maybe even not display the shebang line (having a shebang for a one or two line fragment will get tiring).
I wont be needing it to do any very obscure languages, but it would be great if I could easily write new definitions.
Thanks.

Google Prettifier should do the job. StackOverflow uses it, too (with the markup generated by Markdown). It determines the language automatically.

It's my understanding that the Markdown spec allows for the presence of actual markup as a fallback:
For any markup that is not covered by
Markdown's syntax, you simply use HTML
itself. There's no need to preface it
or delimit it to indicate that you're
switching from Markdown to HTML; you
just use the tags.
The only restrictions are that
block-level HTML elements -- e.g.
<div>, <table>, <pre>, <p>, etc. --
must be separated from surrounding
content by blank lines, and the start
and end tags of the block should not
be indented with tabs or spaces.
So, if you've got a syntax highlighter you really like that doesn't auto-detect, you could simply throw a literal <code> block with the appropriate attribute into your Markdown. I don't think it particularly violates the goals of Markdown, either... it's a fairly straightforward and readable indicator.
It also might not be that hard to roll your own script that executes first after the DOM is ready, finds code blocks, and inserts appropriate attributes for the syntax highlighter of your choice into them depending on a few heuristics that you devise for their contents, but if there's a library out there that already does it, obviously that has some advantages. :)

<img> Attributes

I've got some java script code that implements a kind of slide show. It uses a series of img tags as a table to control its actions. I probably used some code I found some where as a basis. Anyway, the img tags contain a data-img attribute which I can't find in any definition of the img tag. Now I find I need to add more data to the img tags. So my questions are:
1) Is the data-img actually a real attribute or something adhoc?
2) Can I invent yet more attributes?
3) What is the danger of using such attributes?

1) It's valid in HTML 5; it is an invalid attribute (that will, as far as I know, still work in all browsers, it but will break validation) in HTML 4
2) As far as I am aware, you can add arbitrary attributes and query them in Javascript, but chances are those attributes will not survive certain DOM manipulation and other operations where the browser creates markup - it's possible the invalid attributes will simply be dropped
3) Your pages will no longer validate.
Background: Custom attributes - Yay or nay?

Depends on implementation.
YES, its often quite useful to do so.
If created in #2, not really, no, they are part of the DOM at that point, i know of no browser that removes attributes.

They are a valid HTML5 attributes.
If you need to add and get that data only with javascript for client side without communicating with the server side you can implement a store and retrieve mechanism similar to the one used by Mootools.
It doesn't pollute the DOM and store also javascript objects.