The HTML 5 anchor tag: download attribute

The humble anchor tag. It’s the lynchpin of the web, allowing links between pages. Surely there’s nothing to improve here?

Well, one problem I encountered today is how to put a link to a resource (mp3, pdf or similar) and make sure that when the link is clicked it isn’t rendered in the browser but instead is downloaded. It turns out that HTML5 allows us to do just that, by adding the download attribute to the link. If the attribute is set to a value, that will be the filename of the download.

To force a download:
[html]Download your file[/html]

To set a filename:
[html] Posted in An HTML tag a dayTagged , Leave a comment

HTML5 – the ‘italic’ elements – em, i and cite

I skipped a couple of days, so by way of catch up, three elements today. Italic text is really semantically complicated. Who knew? Presenting the <i>, <em> and <cite> elements… I haven’t completed my archaeological dig, but as far back as 1995, HTML 2.0 had already standardised both <i>and <em>, with <i> used for italic, and <em> for an “emphasized phrase, typically rendered as italics”. My recollection however is that most at the time used <i>. With HTML4.0, CSS and the separation of style and content, <i> was deprecated and <em> popularised for emphasis, typically rendered as italics, but open Read More

HTML5 – The code element

As a techie, I often want to post excerpts of code on a webpage. Generally in publishing code fragments are printed in a monotype font to distinguish from the main body of text and also to more closely resemble how the code appears in the IDE. The <code> element is used in this way to highlight content that is a code fragment. Here’s a quick example both as the text and then in use: Use the JQuery <code> click() </code> function to bind an event handler to the javascript click event to perform an action when the user mouse clicks Read More

HTML5 – The small element

<small> is in the ‘4.6 Text-level semantics’ section of the WHAT-WG HTML living standard. <small> one used to mean just that: small font. It is now one of a set of elements that has been re-imagined in a more semantic light. <small> now has a very distinct meaning – it now represents ‘side comments such as small print’. This also would cover disclaimers, copyright notices and the like. <small> is a text level element, so is expected to be used within a block of text such as a paragraph, and not as a block of text. So small print such Read More

HTML5 elements

When I first learnt HTML4 and CSS I did it by digesting the formal spec, section by section. Seemed like the best way to learn it, straight from the horses mouth. I’m pretty conversant with the current set of HTML5 elements, but mainly from second hand reading of books / blog posts; also the spec is still in flux, so I thought a similar exercise would be useful again. Rather than try and tackle it in one go and get indigestion, I thought ‘how about reading up on a tag a day’. So here we are: I’ve created a new Read More

Bad IT day (the olympic ticket sale, PSN hack and optional alt tags)

Three IT stories came up earlier in the week that show how IT problems and decisions can adversely affect end-users – I’ve had a quick look at each in turn to understand the problems encountered and to try and learn lessons. The HTML spec making ‘alt tags’ on images optional for generated content The Olympics ticketing website overload at deadline day The PlayStation Network security breach and user data release

No Return – Facebook & StackExchange ‘break’ textarea expected behaviour

tl;dr Comments in Facebook and StackExchange sites now make enter submit the comment rather than enter a carriage return. In Facebook using shift-enter will force a carriage return. In StackExchange this will still be ignored as carriage returns aren’t rendered. Read on for full analysis of why these changes have been made and follow-on implications. So what’s the problem? Facebook and the StackExchange (SE) family of Q&A sites have both recently ‘broken’ the expected behaviour when typing in a textarea (a multi-line textbox). A notable feature of both sites is users commenting on questions or posts, entering their thoughts in Read More