How I use the insert tag

Years ago, I read an article about carefully managing how you present work-in-progress to clients. The gist of the article was that if you build the front end first, any client being shown a demo will assume that the work is complete. They’ll see all the links, form controls, sliders and what-not and will presume that behind every one is perfectly functional, tested code.

The author suggested that instead of having a series of perfectly on-brand controls, we should use scrappy images of scamps — both as placeholders and as a visual representation of how complete the project was.

It’s a lovely idea, but not one I’ve ever tried out. However, there is one aspect of this approach which has been useful during content load. In this phase of any project, it’s extremely rare that all assets are delivered at the same time. For numerous reasons, often content is delivered in phases and some content arrives in draft form (this is understandable — often it’s easier for content authors to understand what needs to be written if they can see real-world examples).

Often content can include instructions to the developer which cannot be acted on immediately. As developers, we’re often tempted to add in a dummy link, and move on. But these notes should be captured somewhere and reflected in the code. If only there was a tag for this sort of thing.

Guess what? There is. The ins element (oh wait - the title of this post gave this away). I quite like HTM5 Doctor's explanation of the intended use of the ins tag:

  • Record changes to an official document, such as meeting minutes or a law
  • Note changes to an article — in addition to journalistic corrections, this helps to maintain editorial integrity and avoid charges of “rewriting history”
  • Indicate the changes between two versions of a document (a diff), for example to indicate editorial changes
  • Indicate a signficant [sic] addition or removal of content that people accessing the document would benefit from knowing about
Oli Studholme

Now I love Tim Berners-Lee’s vision of the web as all of the scientific reports ever (not a direct quote), but in my (counts fingers) sixteen years as a professional web developer up until this moment, I’ve never had a legitimate use for the insert tag (the typo I reproduced in the content taken from HTML5 Doctor [sic] is the first time, but it was stripped out by Medium’s WYSIWYG).

I’ve been using the ins tag (and before that, the s tag) to highlight issues to be addressed in the content for years now but recently, I thought I'd bring it up a notch. The purpose of the tag is for the client to really notice that part of the page is unfinished. Before CSS3, I modelled the look on a highlighter pen - stick a bright pink background, change the text colour to black and perhaps add a slightly darker pink border round the whole thing. Done.

But recently, I wondered if a Post-It note would catch the eye and suggest unfinished to the client, in a similar way as the lost blog post I alluded to, in the opening paragraph.

Yes, I’ve put MS Comic Sans in that font stack. I told you I wanted it to be eye-catching.

Obviously, no ins tag should reach the live site. And a search through the codebase will quickly reveal what outstanding issues are left.