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

  • 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

  • @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"

  • […] This post was mentioned on Twitter by bruce lawson, Remy Sharp, Rich_Clark, wilfred nas, Oli Studholme and others. Oli Studholme said: Can’t believe @hixie & the rest of the #HTML5 cabal tried to sneak this in last minute without any feedback! http://01i.jp/9tbjWz Very fishy […]

  • Andrew Yates says:

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

  • […] NSFW-element i HTML5 (Not Safe For Work alltså) […]

  • Andy Mabbett says:

    Sadly, that’s been suggested before (as a microformat), by people who were not joking:

    http://www.mail-archive.com/search?q=nsfw&l=microformats-discuss%40microformats.org

  • […] – Nouvelle balise pour le langage HTML 5, après la vidéo, le NSFW (Not Safe For Work) qui n’… […]

  • 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!

  • […] balise NSFW (Not Safe For Work) qui fait son apparition dans […]

  • Tom says:

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

  • @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

  • […] 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.

  • […] Elementet NSFW (Not Safe For Work) med i […]

  • 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.