The nsfw element

by .

This post was of course an April Fool's Day joke. The element has, however, been suggested and rejected in the past, so maybe it's not as odd as you think.

Among the new semantic elements for section, footer, header, and the like, HTML5 also adds an element that can contain any other element and describes it as Not Safe For Work (commonly abbreviated to “nsfw”).

Browsers can be configured by parents or workplace sysadmins never to show content marked as <nsfw>, thereby shielding faint-hearted people from obscenity and protecting employers from employees downloading things they shouldn’t.

It’s not just a presentational element, although it does carry with it the default CSS:

nsfw { display: none; }

The user agent is forbidden from downloading any of the resources contained within the element if the browser’s <nsfw> setting is “on”.

It works like this:

<nsfw>
 <figure>
 <video src="chickens.ogv" autoplay>
 </video>
 <figcaption>Huge cockerel: two chicks, one coop.</figcaption>
 </figure>
</nsfw>

The entire figure is taken out of the document flow with no indication to the user that something is missing (which could tempt teenagers to circumvent the browser setting). Although the video is set to autoplay, it will never even be downloaded, meaning nothing compromising will be in the user’s cache.

The new element was suggested by Ian Hickson, the editor of the HTML5 spec and Google employee: “Google builds a separate index for those who search using Google SafeSearch. Given that 72.3% of the Web is not safe for work but we currently have to analyse that using machines, semantically marked-up porn and foul language will dramatically reduce the time it takes to build our index, enhance its accuracy and, most importantly, protect little children.”

So far, it is not implemented in any browser, although in its recent IE9 announcement, Microsoft confirmed that IE9 and its Bing search engine will use a Microsoft-only extension <xxx> instead of the standard <nsfw>.

31 Responses on the article “The nsfw element”

Remy Sharp says

Ahhh – surely they haven’t completely thought this through. A site dedicated to, say
playing your video: Two Chickens and One Coop, would be entirely unsafe for
reviewing at work, and therefore they would need a complementary <sfw> element.
I think since the whole site would typically be wrapped in a <nsfw> it would need it. At
least that or they’ll have to lead the entire web site with a <p> tag that allows the browsers to
fall back to a single statement that explains that the site isn’t safe for work.

Originally they suggest this element a few months back, but it turned
out that it was just a random suggestion, rather than being included in the spec. At
least this is a serious attempt to address the issue of how much real content isn’t
safe for work on the web. Not sure how I feel about it all, but at least it’s being discussed.

David Hund says

“Two chicks, one coop” LOL ;-P

Mathias Bynens says

How to differentiate between soft- and hardcore?

Andrex says

The best one yet from any website. Good job guys.

Lea Verou says

This was the only April Fools’ joke that was actually a joke (i.e. it made me laugh)

Good job!

mahen says

Happy April Fool Day. See the one at Opera

Oli Studholme says

@Mathais Bynens — thank you for raising a very important point. When using the <nsfw> element it’s very important for accessibility that we use the correct WAI ARIA roles. You can find a comprehensive list on the W3 Accessibility Task Force site, but they include role="boobies", role="t&a" and role="danglybits". Remember proper access to this content is very important!

One final gotcha is that the ampersand in role="t&a" should be correctly encoded, like so: role="t&amp;a"

Andrew Yates says

Only April fools joke that has made me laugh today. Well done! :)

Mike Robinson says

This content has been marked as not safe for work. Reason: Mammary glands.

John says

Haha exellent job!

Jason says

*golf clap*

Sebkun!! says

That’s not a very constructive comment but : “Ha Ha !! Very Funny !!”

BTW, would be awesome if it were true to have some or elements… :)

Scott says

Another excellent April Fools joke. So far this, Thinkgeek.com, and the Pew Research article about “79% of Americans just ‘Don’t Get It’” are my favorites this year. Bravo!

Tom says

With some animation, it could be quite an interesting element. Will it work in IE6? :)

Richard Clark says

@Tom, you know HTML5 “paves the cowpaths” so of course it will….

Brian Lang says

When will the browsers support this tag? I can’t wait to use it… ;)

Robby Valles says

We’re announcing support for this today at MySpace

April 1: The Internet’s Only Holiday says

[...] Initiative Alarm Clock. * 4ColorRebellion redesigns its site. Hello, 1995! * HTML5 to feature NSFW element. * Some YouTube videos are available in TEXTp resolution, replacing everything with colored [...]

JW says

You say that 72.3% of the Web is not safe for work, so wouldn’t it be easier to just make a “sfw” tag, which would have to be added to only 28% of all websites, instead of the other way around? I mean, if we want HTML 5 to be adopted any time soon, we need to take these things into account!

swedegeek says

To address the comment from @Mathias Bynens, presumably there would need to be a core=”hard|soft” attribute available with this tag.

This tag should also allow my bots to more efficiently scan for sites I should at least add to my bookmarks, if not as new targets for my, err… content… scraping scripts.

That reminds me, my 2TB disk is nearly full.

NIels Matthijs says

I hate it when I get these articles a day late through my rss feed :p

Andrew Vit says

Fun! In other news, <meta name=”rating”> has been around for a while. I can’t find any definitive specs on what values are recognized though.