UPDATE: The idea expressed below has been significantly improved and a brief spec document and example is now available. You might, however, still want to read what follows before proceeding to the aforementioned link.
Almost two years ago, in an attempt to combat the rising problem of comment spam, Google unveiled a new HTML attribute:
rel="nofollow"
By including that attribute in hyperlinks, website administrators direct search engines not to give any credit to the linked content. The attribute is generally applied by most blog software to comment and trackback content before it is posted. This obviously minimizes the incentive for comment spamming as a means of improving a site’s PageRank status.
In the same spirit, I am now proposing a new attribute:
rel="nsfw"
NSFW is an abbreviation often used to indicate that content is “not safe for work.” This new attribute should be applied to tags to indicate that the content is potentially “not safe for work.”
The attribute has several exciting implications for content creators and site visitors:
- Content creators can now apply the attribute to hyperlinks. Visitors will be able to configure their browsers to warn them, or stop them, before continuing on to URIs flagged with the attribute. Additionally, search engines will be able to use the proportion of flagged links to a URI as a better means of filtering results.
- Content creators can now apply the attribute to image tags. Visitors will be able to configure their browsers to block display of images flagged with the attribute.
- Content creators can apply the attribute to paragraph tags, div tags, or any other block-level element. Doing so will indicate that the enclosed content is not safe for work. Visitors will be able to configure their browsers to block display of just the content enclosed by the flagged block-level element.
This isn’t about censorship. It is about making us all less likely to accidentally click on a goatse.cx link when our boss is standing behind us. It is also about making us feel more comfortable posting possibly objectionable content by giving visitors a means of easily filtering that content.
So who wants to write the first Firefox extension?
ADDITIONAL UPDATE: Looks like Chris Granade had the same idea a while back, but his blog post pretty much restricted the idea to hyperlinks instead of all HTML tags. Here is a Greasemonkey script written by Jeremy Dunck that will block links marked with rel=”nsfw”
We still need something more robust that will support other tags in some sensible way.
36 Comments
I fully support this idea.
It shouldn’t be too hard to write a FireFox extension which, as an early release, simply checks a link for the content of rel=”nsfw” and pops up a yes/no alert, questioning whether to launch the link.
I don’t even think you would need an extension. I bet this could be done in greasemonkey quite easily.
http://diveintogreasemonkey.org/patterns/match-attribute.html
amazing idea.. and let me know when that ff extension is deployed. ill be the first to dl it. or beta test it :)
That’s a nice idea. I hope you go to get some goed work on it. It’d be nise to get up on http://mailart.us
http://mailart.us
What a great idea! Just today I was trying to tell our young receptionist about cragslist.com and doffus me typed craiglist.com (NSFW)… well I was red faced as I tried to correct my mistake.
That one was my stupid spelling mistake, but what a great idea to have a firefox extension prevent me from clicking a link or opening a page that contains NSFW attributes.
I truly hope somebody writes that extension!
That’s a fantastic idea. I love it :)
While not an actual Firefox extension, I’ve written a very quick Greasemonkey script which will hide any page elements with rel=”nsfw”. You can view it here:
http://tylerhall.ws/nsfw.user.js
Doesn’t need to be an extension, just a GreaseMonkey script. I suppose you could make it an extension to fill out the features a bit more, but GM can handle it relatively quickly.
Wow… thats a very good idea…
BTW, You were Dugg. http://www.digg.com/programming/FreshIdeasTheNSFWHTML_Attribute (link SFW)
Meh. Some people will continue to be careless and click through dialogs in their way and most links that should be tagged still won’t be. (e.g. deliberate links to shock images)
And the only people who’ll use this are people who already mark link targets using plain old text (i.e. “NSFW”). Why not have an extension search for instances of that string in links?
I work at home so this isn’t a problem for me, but how many people will actually be able to configure their browsers at work? Most will be locked down with group policies, etc.
Fortunately at the last place I worked, I was administrator and my back was also facing a wall so no one could sneak attack me! :)
Maybe you could propose it to the folks from microformats: http://microformats.org/
I like your idea.
“NSFW” isn’t a relationship. The “rel” attribute is supposed to indicate a relationship of the linked-to content to the linking page, for instance rel=”license” would state that the link is to a license agreement for the page being viewed. Admittedly rel=”nofollow” is a slight abuse of this, it would be more accurate to say rel=”none”, but that one is water under the bridge. The rel attribute is also not allowed on non-link elements.
I think extending the semantics of HTML is a great idea. However, it’s smarter to do that in a way that stays within the constraints of valid HTML, and makes the metadata visible. Microformats.org is an organization promoting this approach.
One possible way to tag content as nsfw (or arbitrary other semantic tags that simply indicate a category, not a relationship) would be the xFolk microformat: http://microformats.org/wiki/xfolk
This really is a simple idea, one of those irritating ones. You know the ones I’m talking about, the ones that you wish that you yourself could have thought up. And so you did, sweet.
The CSS3 wildcard attribute selector can also add some wizzbang. If we ever get to implement it that is.
a [rel*="nsfw"]
This was an excellent idea. I have implemented this in a JS script. A write up can be found here: http://digg.com/programming/NSFWHTMLAttributeJSLibraryReadyfor_Download
As quoted from my Digg response: My class already accepts CLASS attributes equal to either “adult” or “nsfw” on div, p, and img tags. The only one that accepts REL is the a tag, which also accepts a class equal to “adult” or “nsfw”. Javascript was choking when I was feeding it invalid rel attributes ;)
I made another greasemonkey script based on the one linked above, and it works for links, images, and div/p tags. It could probably be tweaked for others also, but I wouldn’t be sure what to do with them :)
http://geekforhire.org/files/nsfwmodifiers.user.js
It needs attributes. I work in Europe where the definition of what is acceptable at work is wildly different than the lowest-common-deniminator version of acceptability in the U.S. What we see normally in, for example, Sony ads would not pass the censors in the U.S.A.
Genius! This should become a microformat! :P
rel=”nofollow” - wasn’t that a failure in combating spam?
While a good idea in theory, I can see it being overused and misused as a censorship tag. I can see in several years everything from hardcore porn to an instance of the word ‘crap’ being flagged with this. While I think it is important we know what we are getting ourselves in to when clicking on a link I think censorship is ultimatly wrong especially on the internet and use of this will go some way to assisting those wishing to censor content.
Unfortunately, paragraphs/divs within a page flagged “nsfw” will still be loaded and cached, even if you block its display, which can still be incriminating if IT investigates you for some reason.
Also, the attribute should be named something else — something that doesn’t imply quite so strongly that users will be surfing at work. There are other places you may want to block such material, and some employers may place stricter policies on Web use at work than implied by a “nsfw” tag.
Good idea though.
The key technical problem with this, and likely the reason that Chris Granade’s version limited the use to the tag, is that the rel attribute only exists for the tag. Try using it for images and layers; the page won’t validate because the attribute is not in the HTML spec.
I’d prefer an “obfuscate” tag, which could then be used to hide spoilers, unsafe images or anything else that users could then click to “reveal”. Heck, you could use it for quiz answers if you wanted.
I failed to properly escape the HTML in my previous post. Where it says “the tag,” it’s supposed to say “the <a> tag.” Here’s to the preview button.
I have a bad feeling this blog ate my last post.
(trying again with different URL) Wouldn’t you want it to use an attribute other than ‘rel’? Otherwise, you’re going to conflict with that ‘nofollow’ thing. It’d also be attribute spam to declare it valid on all HTML elements.
I’d assume the best way would be to do this via XHTML and XML namespaces where you’d have a ‘nsfw’ tag that contains whatever portion of the document you want to consider not safe for work. E.g.:
<nsfw:nsfw xmlns:nsfw=”http://www.variadic.org/nsfw”><a href=”http://www.gapinganus.se”>Yum!</a></nsfw:nsfw>
Browsers that don’t understand the tag would do ‘Must Ignore’ and display the content. Browsers that /do/ understand that namespace (or greasemonkey scripts, etc.) could render it differently, like not display it if at work.
I think you should use a class attribute instead. It’s made for this kind of things and is easily used in a stylesheet to mark/hide the content.
To show a red dashed border around any nsfw content: .nsfw { border: dashed 2px #f00}
Also suggested in the reddit thread: http://programming.reddit.com/info/wbmu/comments
Outstanding concept. May you be successful in pushing this concept forward. I personally know people that have been fired for accidental browsing “incidents”.
This was rejected as a microformat the last two times it was proposed. If you want a publicly visible indicator, use rel-tag. if you want to categorise your pages for browser-based filtering use PICS.
This isn’t really a new attribute or idea. “rel” has existed for quite a while, and a variety of values (including “nsfw”) have been used for it.
It’s an absolutely absurd idea. The web is a world wide medium. There is zero chance of gaining a world wide agreement on what is NSFW. In Saudi Arabia, for example, your swimsuit pictures probably qualify. In Los Angeles, they probably don’t. A picture of naked people having sex is probably NSFW if you work in a bank, but it might be part of your actual workflow if you work in the porn industry. This idea really is completely half-baked. Maybe I’m in a time warp and it is actally April 1st?
Weak as hell GreaseMonkey PoC at http://gearslips.net/deardiary/2006/12/30/nsfw-attribute-for-white-collar-slap-offs/.
TC, it doesn’t need world-wide approval - each author can decide for themselves what is NSFW.
While not a perfect solution, it’s definitely a step above no attempt whatsoever, IMO :)
This blog ate my last post, but I’ve implemented a NSFW solution that places the burden on the content provider. Asking every linker to note which links are NSFW is not the only way this could work. There’s a simple PoC for notifying a user that a visited site is NSFW using a META tag and GreaseMonkey at:
http://gearslips.net/deardiary/2006/12/30/nsfw-attribute-for-white-collar-slap-offs/
Hmm, my second post did not appear. I hope that “moderation” means just that - not “censorship”!
This approach to the issue has the obvious and very attractive benefit of being simple - and simple ideas are always the good ones. However, as others have pointed out, the rel attribute is only valid on Link and A tags. There are also issues of cultural diversity and language.
A bunch of us is working on a full solution in this area covering discovery of Web resources that will work on mobile devices, are fully accessible, have some sort of trustmark or quality seal and, my own area of interest, are or are not suitable for children.
Some links: W3C Content Label Incubator Group http://www.w3.org/2005/Incubator/wcl/Overview.html (we’re now seeking transition to the Recommendation Track)
Quatro project - making trustmarks machine readable. Includes annotated search tool and Firefox extension download option. http://www.quatro-project.org/
http://www.contentlabel.org/ - a new wiki/blog/community site dedicated to the subject. There’s a Firefox extension you can download from there too.
Rest assured - we’ll make it as simple as possible - but it will be compliant with HTML and other standards and cover a broad range of use cases beyond suitablility for work.
Why not just move all adult sites to a .adult domain, just as adult shops in cities are restricted in operating only in certain cities zones (well in South Africa anyway). Then a browser can warn you if you follow any link to a .adult domain. This will solve all “accidental” problems. No special hacks or coding needed.