NSFW tag in HTML 5

A “Not Safe for Work” Tag has been proposed for HTML 5:

One of the most common descriptive notes people have to write using text when they post links or images to blogs, comments or anywhere in HTML is to say “this link is not safe for work” or simply “NSFW”. By adding the <NSFW> tag, this could be made much simpler and standardized. Browsers could then have an option to automatically hide all <NSFW> content. A tag is preferred to an attribute since it could then also be used around content and not just links.

Examples:
<nsfw><a href=”http://www.example.com”>Pics here!</a></nsfw>
<nsfw><img src=”badkitten.jpg”></nsfw>

(Via Bruce Lawson)

Drew McLellan of The Web Standards Project thinks it’s a nice idea that won’t work:

@brucel we looked into #nsfw in microformats. It’s an unworkable minefield. #

it’s used when linking to something that you might want to save until you get home. e.g. http://ampleboobies.info (NSFW) #

So a browser could conceivably be configured not to follow links or display content tagged nsfw. Sounds a good idea, but unworkable. #

The use of tags (rather than CSS and JavaScript) to hide or show content is an intriguing and controversial aspect of HTML 5. It’s intriguing because using a standard tag—instead of writing custom CSS and JavaScript that someone else may someday have to maintain—potentially simplifies web development and maintenance, bringing advanced techniques of content presentation to more sites for less money. It’s controversial because it sticks presentation and behavior back in markup, after we all just spent a decade separating site structure and semantics from behavior and presentation.

We’re going to be following these developments and trying to make buzzword-free sense of them for you.

[tags]standards, webstandards, HTML, HTML5, tags, NSFW, W3C[/tags]

101 thoughts on “NSFW tag in HTML 5”

  1. I’d argue that <nsfw> is semantic and not presentational. After all, you’re basing the presentation of that content on it’s semantics and it’s still the job of CSS to present it. I’d imagine the actual mechanism would simply be a custom style-sheet in-browser that corporations can install to hide <nsfw> content – just as they can to control anything else right now.

    It’s a neat idea, but i doubt it’s going to work as it relies of content distributors making judgement calls.

  2. These super-descriptive tags are ridiculous, and while there certainly is ample future in HTML and XML based formats with separate presentation stylesheets, HTML5 is already starting to feel dated.

    If the problem is screen readers or other machines and their ability to accurately distinguish what type of content it’s currently reading, then there has to be a better way. A rel=”nsfw” attribute springs to mind. We do not need more tags. We need more CSS.

  3. Like you said, putting behaviour and presentation back into the markup. This just can’t be a good thing, since once again you would have to rely on browsers to have the functionality built in to deal with this.
    What sort of behaviour/settings would we expect from browsers if this goes ahead? By default hiding/showing content based on markup of a descriptor type tag does not sound like fun :P
    OK – stopping now. Don’t want to rant.
    BTW – you wouldn’t want to forget a closing tag.

  4. An utterly, utterly stupid idea. NSFW in the UK, or in Iran? Or in Alabama, or Amsterdam?

    NSFW editing hot pr0n monthly, or editing cutekittensforkids,com ?

  5. An attribute, or as Darcy says rel=”NSFW”, would be more sensible. I feel that giving this function its own element is overkill, it is an attribute of the content after all.

  6. I think the idea is intriguing but I tend to agree with Joen. Do we really need more tags? What will we start to do next? Have rating tags? and so on?? I think it can get out of hand and fast and then we’ll be back where we started. Only this time with bloated semantic tags instead of bloated presentational ones.

  7. I’ve been fending off people all day who are telling me that my idea is a bad one. Firstly, it’s not my idea and I’m firmly with Drew et al: define “work”, for a start. I don’t think anyone’s really taking it seriously.

    Like Matt Wilcox, though, I don’t think it would be a presentational tag; it’s describing semantics, and browsers could deal with that in a number of ways; hide it, or never allow the lnks to be followed, or never ever cache or add it to the history or hundreds of other ways.

    The big problem is that the semantics aren’t unambiguous. there are doubtless workplaces where Drew’s jokey example URL -ampleboobies.info would actually be unsafe. If, however, you work in the porn industry, I imagine that few things are deemed unsafe for work.

    There are also cultural norms. My own website is blocked by the Omani government, apparently (as well as a British university).

    “The use of tags (rather than CSS and JavaScript) to hide or show content is an intriguing and controversial aspect of HTML 5″. The “details” element does exactly that. It’s basically a toggle-able show/ hide element to give more details in forms/ web apps. I like it, personally, as it makes it easier to write such sections. It’ll almost certainly be abused, though.

  8. Agree with not have to many of these purpose driven tags, else we’ll keep coming up with different tags for different situations and make html very nasty.
    Having a nsfw attribute or using the rel attribute sounds like a much neater solution.

  9. One question – what makes something NSFW?

    Using an explicit NSFW element implies that an explicit value judgement has been made (by the content creator), but what might be NSFW in a buckled-down workplace in the US “Bible Belt” might be considered quite SFW (or even unworthy of mention) in a young, irreverent metropolitan office.

    To be of any use you’d have to establish context – Boobies! would be different to Hardcore porn

    Unless there’s a standard as to what is and what isn’t “safe” the tag has no semantic meaning or real-world applicability.

    It’s an interesting concept, but I fear that this is trying to apply a universal semantic meaning to an entirely subjective concept and therefore fundamentally flawed.

  10. Intriguing problem. But I’d argue that nsfw is perfectly semantical, for the same reason as Matt is saying it is.

    The problem lies more within the semantics of NSFW itself. What is and what isn’t suitable? This differs so much from culture to culture. A heading is a heading and a stressed word is a stressed word, but what is nsfw and what is not, is just too non-international to be ever accepted as a standard.

  11. Doesn’t make sense as an element, might make sense as an attribute, though I’d then rather an all-encompassing solution such as sensitivity=”nsfw”*. NSFW is describing a characteristic of the content, not the content itself (as , etc. do). As a parallel, a paranoid organisation wouldn't deny the tag in an intranet (it would break everything), but they may deny tags which have href attributes which point to external sites; the same would be done with sensitivity="something".

    * and even then, I'm in agreement with Andy Mabbett about what individuals/regions regard as sensitivity as both readers and content authors.

  12. As Andy Mabbett & Xavez have pointed out, NSFW is a very subjective classification, so a real implementation would probably need much more detail along the lines of PICS (whatever happened to that, BTW?). Seems like a possible microformat, though.

  13. I dont think a nsfw content owner would tagged their content if the browser will be able to hide it.. Who want to hide nsfw content, people love it! And their site got ‘digg’ed becoz of it! :-D

  14. While “NSFW” indeed characterizes the content’s meaning and not its presentation, it is unquestionably always up to the reader, and not to the content publisher, to judge between what is safe and what is not.

    So: it’s not a semantic element. It’s a social one, and would thus be as meaningful and ambiguous as a FUNNY or an INSIGHTFUL tag.

  15. You could make the tag take account of specific local mores with some additional attributes, like country, religion, and subject matter.

    Examples:
    cn=”it”, Pictures of Berlusconi’s villa

    rel=”cat”, Friday’s fish offer

    !cn=”nl” (NSWF anywhere but holland)

    nsfchurch cn=”us” dewey=”576″ to stop creationists accidentally seeing anything about evolution.

  16. This is just the sort of discussion that makes me wish that ICRA metadata had caught on by now.

    There are a number of scenarios in which rel="nsfw" would be inadequate, most notably griefing. So limiting the scope to THAT is out of the question.

    Additionally nsfw sucks as a token, since its contents are based ultimately on Saxon-derived vocabulary. (I do grant that it’s catchy.)

    A universal attribute paired in time with a new HTTP header would be a far better choice, and would have the added benefit of making it easier to flag false filtering positives.

    I point out this last because it is in content providers’ best interest to flag their content either accurately or not at all, especially if Tier 1 network providers make accurate content guidelines part of their TOS. The alternative would be to put one’s visitors at risk for sacking, divorce, or what-have-you.

    As it stands, someone who wants to keep their browsing habits private has two choices: set up multiple profiles (Firefox) or system accounts (everybody else), or wipe browsing history at the end of each session.

    Additionally, there’s value in knowing that a link points to narrowly classified content and simultaneously being assured that its destination URI can be put aside for later, which brings the rel attribute back into play.

    Since I’ve no doubt that this topic is totally about SEX, I suggest that a content guidance attribute might look like this:

    <body cg="18+,us,a">…

    The first fragment would be a sensible age guideline, quite probably based on a legal definition in the state named by its ISO 639-1 code in the second fragment. The third fragment would classify (through the use of one of a range of letters or numbers) the underlying reason for the classification.

    The alternative — specifying an element to indicate that content is classified, without providing any additional data — is easier to implement and use, but more difficult to apply to a useful scope.

    A universal attribute approach is not without its pitfalls, some of which are suggested below (and are no less significant in the case of an nsfw element):

    …It would be an ongoing challenge to restrain law enforcement from insisting that classified content browsing history not be removable.

    …Simple guideline values would be inadequate for jurisdictions with notably more or less permissive laws, such as Utah.

    …If a visitor wanted to put aside a link to classified content for a later visit from a different network, they’d be forced to send it to the cloud.

    …The best application of such a system would require that a database of classifications be maintained — and that the authoritative issuers of those classifications would need to be determined. This would place additional burdens on browser vendors, as a system that checks with a central authority would have a new heap of vulnerabilities that criminals (and in this case, conservative governments) could exploit.

  17. 1) As we’ve already seen with the MPAA, there are real problems surrounding who decides what NSFW means. This approach relies on content authors (who as it’s been said will be reluctant to participate). So what happens next is network admins install software to sprinkle the tags into the incoming stream via public blacklists and within 20 minutes you’ve got pictures of the Iraqi war dead labeled NSFW. Free and open exchange of information, remember? It’s a good idea.

    2) The notion that we’ve slain the separation-of-content-and-presentation beast is absurd (and we should be spending our limited resources there until we have. The only reason I’m able to “properly” style a navigation relies on adding background images to both the <li> and <a> tags (if I need a 3rd I have to add a <span>) Nevermind the padding and margin BS. The W3C can feel free to tackle NSFW right after I’m able to properly center content horizontally and vertically without adding an additional <div> and/or wanting to kill someone and/or sacrificing a goat to the browser gods.

  18. @Jon Williams: I think the whole idea of the proposal (however serious) is to utilise the fact that people do, already flag things as NSFW, and a structured way of doing this may be beneficial. This isn’t necessarily putting the onus on the original content authors to classify their work, but on those that choose to refer to it. In some senses, this is more workable – my previous statement about the subjectivity of such a tag fails to take context into account. If I receive a ‘NSFW’ classification from my mother, there’s a different meaning there than one I receive from a close contemporary.

    I’m not saying any of this is workable, though, just that there might be an interesting discussion here somewhere. And I hear your frustrations with vertical centering! :)

  19. Putting aside for the moment the fact that I need to GMOB…

    Eventually, governments will get around to policing the Web, if those responsible for building it do not themselves account for the issue of social redeemability in the course of formulating best practice. (Cf. Australia’s abortive attempt at filtering legislation.)

    Something like this would hand a golden opportunity to the nanny-staters; however, I would rather see that future than one in which they work that much harder to legislate something comparable.

    Think of it in terms of a game. You have proscriptives and libertines; you have self-flagged content, or not.

    In the case of self-flagged content, you have incremental solutions and a target-rich environment for the proscriptives, all at a low opportunity cost for liberties.

    In the case of no flagged content, you give the proscriptives one obvious cause for a fight that has one obvious victory condition, and just as much effort required for libertines to push back — and a far greater loss to the user community if the proscriptives win. Ours might not be the generation in which the proscriptives reach critical mass, but can we say that for the next?

    it also occurs to me that this proposal offers a modality for silencing those zarking talking ads. (Man, when the revolution comes…)

  20. @Five Minute Argument: Fair enough, but this shouldn’t even be in the W3Cs top 100 issues. They’ve got way bigger fish to fry. It’s probably much easier to address however, and I certainly appreciate the allure of low hanging (and potentially sexy!) fruit.

  21. Pingback: Planet HTML5
  22. I actually thought this was a joke post when I spotted it in my feed reader. It came through shortly after the [sarcasm] tag on twitter…

    If we were to take this seriously, there would be a proliferation of tags covering pretty much every topic you could think of: [automobile] for links/content about cars?

    Is it any wonder the spec isn’t going to be ratified until our sun goes supernova and we’ve all evolved into intelligent shades of the colour purple?

    /sigh

  23. Too many tags, perhaps, but is not bringing presentation back into the content.

    The tag is describing the content alone, and is far more content-oriented than tags like or , which are linked to where the content should be displayed rather than what the content is about.

    Part of the content vs. presentation argument has gotten confused with a specific content vs. vague content argument. Is really a description of content at all? Isn’t it actually a description of layout? Paragraphs should sit apart from other paragraphs, and have margins and body-text styling, etc.

    Interesting thought experiment, though!

  24. Let me try that again, but less dumb, hopefully.

    Too many tags, perhaps, but is not bringing presentation back into the content.

    The tag is describing the content alone, and is far more content-oriented than tags like or , which are linked to where the content should be displayed rather than what the content is about.

    Part of the content vs. presentation argument has gotten confused with a specific content vs. vague content argument. Is really a description of content at all? Isn’t it actually a description of layout? Paragraphs should sit apart from other paragraphs, and have margins and body-text styling, etc.

    Interesting thought experiment.

  25. A NSFW element would be bloat. The only real problem it solves is hiding parts of a page from someone’s boss. A better solution than bloating the HTML5 spec is for people not to do excessive browsing to questionable content if they have a boss that watches over their shoulder.

    Furthermore, I don’t see the sites with the most questionable content that care the least about web standards (porn sites) caring at all to markup things as NSFW.

    A NSFW element is bloat and should be supplanted with responsible action on the part of the browser. It’s my job to design and markup sites, not make sure you don’t get fired by your boss for looking at offensive or pornographic content.

  26. I’m not sure if this should be taken seriously but I think it’s better addressed with the rel="nsfw" approach. This solution actually makes it easier to support across browsers and markup languages, and more importantly, it removes the need to add something to HTML5.

  27. Aside from the other arguments (too much specificity), one problem for a NSFW tag would be the age we live in (the one we will live in later). An extreme stretch perhaps, but imagine if we had the web in bygone days when [singWithMe] a glimpse of stockings, was looked on as something shocking, Now heaven knows, Anything goes [/singWithMe]. So content ‘correctly’ marked up today in HTML5 with NSFW would become incorrect simply due to changing times.

  28. I’d think we would need a as a nsfw-replacement, with a for attribute in the sfw that could tie it back to the nsfw via the nsfw-id.

    As much as I wish nsfw content didn’t exist, there’s too many scoundrels on the web for that to be anything other than wishful thinking.

    But this begs the question, why stop here? We’ve yet to see the likes of:

    I’m sure I’ve left some out…
    -Scott

  29. I’d think we would need a as a nsfw-replacement, with a for attribute in the sfw that could tie it back to the nsfw via the nsfw-id.

    As much as I wish nsfw content didn’t exist, there’s too many scoundrels on the web for that to be anything other than wishful thinking.

    But this begs the question, why stop here? We’ve yet to see the likes of:

    I’m sure I’ve left some out… <g>
    -Scott

  30. I’d think we would need a as a nsfw-replacement, with a for attribute in the sfw that could tie it back to the nsfw via the nsfw-id.

    As much as I wish nsfw content didn’t exist, there’s too many scoundrels on the web for that to be anything other than wishful thinking.

    But this begs the question, why stop here? We’ve yet to see the likes of:

    <sarcasm>
    <rant>
    <vent>
    <joke>
    <spoiler>
    <opinion>
    <politics>
    <content>

    I’m sure I’ve left some out… <g>
    -Scott

  31. A NSFW-tag? April 1st, hm? A new tag just to impose bigoted american moral standard to the source code and the whole world? Unbelievable!

  32. I can’t believe the [nsfw] tag is a serious proposal. It just goes to show that the web development community needs to grow up. It’s not as if the W3C doesn’t have more pressing matters to work on.
    Apart from that: whether or not some content is safe for work is not a fact, it’s an opinion. And that’s why it’s not semantically correct. A picture that’s toally acceptable for me to look at may be unsafe or controversial to somebody else. And it’s not up to the website author to decide; it’s up to the visitor (or their boss!).

  33. Pingback: DreaMule Espanhã
  34. I’d imagine it would be simple enough to add a PHP session variable, have people log into the site with the “I’m at work!” option, and code your pages to substitute your NSFW content with a NSFW link (or remove it completely).

    A more Ajaxian method would be to use rel=”nsfw” and javascript the element to death.

    I suppose the HTML5 element would mainly be for the ease of use — Notice that something you wrote or uploaded is NSFW, and mark it as such.
    Without <NSFW>, it’s still easy enough to notice your content and to put it on a separate page, and then link to that with a “NSFW” link. It’s not all too difficult, I suppose.

    </longreplytoapostthatwasmostlytongueincheekanyway>

  35. Pingback: menéame mobile
  36. Pingback: News Feeds - ADSFA
  37. Pingback: 127.0.0.1
  38. My first thought is obviously that the concept of something that’s NSFW is relative and individual to each person. It might be a helpful aid, but far from foolproof.

    Secondly, I don’t think I’d be too happy about the ‘nannying’ of my web surfing, but I suppose I could set whether to use the tags or not, at the browser level. Of course some workplace IT departments would control these settings…

    Finally though, I’d say the the tag would be better as a ‘rel’ attribute, rather than a standalone tag. As a developer, I’d consider the extra tag to be a unnecessary bloat to my code.

  39. It’s just one case of content-labelling. Why not use PICS or any existing system (oh, because they’ve failed, that’s why :)

    Really, it’s not going to work. You won’t be able to insert tag or relation attribute in a forum post or comment like this.

    The best that can be done is browser extension that checks domains against blacklist, looks for keywords around the link and in the linked document.

  40. Pingback: NSFW tag in HTML 5
  41. Ahah this would definitly ROCK.
    Problem is, browsers have troubles following standard directives as of now, and I wouldn’t be much of a surprise if it displayed some sort of phallic shape while the boss passes by because “Support for this tag is not one or our primary objectives”

  42. Why not just have browsers set a default visibility state or something like that for the CSS class “NSFW”?

    Not safe for work link here

    If the website designer doesn’t want to override the default setting, they don’t have to. If they want to, they can.

  43. This is plain crazy. How can a standard possibly incorporate a tag for an idea that is completely subjective? I can argue what is NSFW all day; I can’t argue about a blockquote not being a blockquote. What a dumb idea.

  44. Why people even consider you an authoritive source for anything when you start making suggestions as stupid as this is completely beyond me.

  45. You are an idiot. You are a second generation idiot.

    You fucking completely ignore anything about semantics, and just generalise the whole thing as ‘using tags to show things, not css’ as ‘an interesting thing’.

    You are an idiot.

  46. This is not part of HTML5. It is not part of the spec, it is not being discussed on the mailing lists. It is just some shmoe’s submission to a bug tracker which isn’t even the appropriate place for HTML5 proposals.

  47. NSFW is always used in context. The context is a web site that has primarily content that is reasonably viewed on a public space like a desk at work. The site author may have occasional content that is not suitable in that context. The site author can make reasonable judgements about their own audience which make a NSFW declaration relatively easy to judge. This isn’t censorship or cultural insensitivity, it’s just a convenience offered by site authors to their readers.

    So, NSFW has a legititimate use, the only question is whether it should form part of HTML 5. Given the very narrow use, probably not.

  48. I think the tag itself should have an attribute to explain the type of content, IE, Nudity, Blood, etc.

  49. It’s an amusing idea, but don’t we already have this with the content rating meta tag? And nobody uses it.

  50. An “authorize” tag could be used not only for NSFW content, but for other sensitive images or anything that would require either a deliberate user action or a browser setting before being displayed.

  51. Pingback: ٶ_Most NSFW site
  52. I somehow feel like the “right way” would be an expansion of the pics-label metadata property rather than a whole new tag, especially when “NSFW” means so many different things to so many different people. Then again, pics-label is only barely a standard itself, with a swamp of four different rating systems theoretically supported… either way, revisiting the topic seems like a good idea. I’m certainly not against an NSFW tag for the reasons stated in this blog, though. Such a tag wouldn’t “stick presentation and behavior back in markup” any more than <em> does; it merely indicates a change in the content rating of the stuff inside, and leaves it up to the browser and CSS (with, of course, a commonly agreed-upon default) as to how to handle it.

  53. Here’s an example of the above idea, using a nonexistant content rating system involving graphic or explicit use of shoes and socks:

    <rating href="http://www.example.com/rsname" name="sh" value="0">
    <rating href="http://www.example.com/rsname" name="so" value="1">
    This sentence is offensive due to having socks in it.
    </rating>
    </rating>

    The disadvantage to this approach is that it requires an href to the rating system for each advisory you want to set. So another option is to roll them all up into one tag and embed the pics-label rating, similar to the modern style attribute.
    <rating href="http://www.example.com/rsname" rating="sh 0 so 1">This sentence is offensive due to having socks in it.</rating>

    Still ugly, but not quite AS ugly. Of course, if W3C were to standardize on a rating schema, it could be reduced simply to <rating sh="0" so="1">This sentence is offensive due to having socks in it.</rating> but since there are several content rating systems already in wide usage that seems unlikely somehow.

  54. Actually, the more I think about this, the more I think it’s a fantastic idea. Since pics-label is agnostic to the rating system itself, a similarly generic
    <nsfw> tag (or, as in my to-be-moderated example above, <rating> tag) could even be used for things such as “spoilers” – which many, many websites have had to add custom, non-standard markup to selectively hide or show.

Comments are closed.