The HTML5 Logo: What Do You Think?

Advertisement

This has been an interesting week for the web design community, to say the least. The W3C revealed a new HTML5 logo1 to help designers and developers ‘tell the world’ that they’re using HTML5. The logo was designed2 by Ocupop design agency, and it’s licensed under Creative Commons Attribution 3.0, a permissive license that allows ‘remixing’ of the licensed work. The logo has been made available on stickers3 and t-shirts4, and there’s a gallery5 already promoting examples of the logo in use.

HTML5 Logo6

The logo’s official site includes a “badge builder” that customizes its orientation and allows you to add supplementary icons to indicate support for the different technologies that have become associated with HTML5.

Various examples of the new HTML5 Logo

According to the W3C Blog7, the purpose of the logo is as follows:

We intend for it to be an all-purpose banner for HTML5, CSS, SVG, WOFF, and other technologies that constitute an open web platform. The logo does not have a specific meaning; it is not meant to imply conformance or validity, for example. The logo represents “the Web platform” in a very general sense.

That all-encompassing definition has met with some opposition from Jeremy Keith8. According to Keith, while he does approve of the logo’s design, he disagrees with the blurring of the lines that separate the web technologies that the logo is supposed to represent. Keith doesn’t have a problem with the media using the term “HTML5″ to cover this broad area, but he feels it’s not appropriate to push this kind of terminology in the web development industry.

In support of the definition, Ocupop Creative Director Michael Nieling said in a statement9 that “HTML5 needs a consistent, standardized visual vocabulary to serve as a framework for conversations, presentations, and explanations.”

Keith’s concerns are valid. The logo will certainly strengthen the awareness of HTML5 (which is something we all want), but it’s difficult to accept that something like WOFF10, which is a web font format and has nothing to do with the HTML5 spec, will fall under the “HTML5″ umbrella. Similarly, CSS3 does not belong in that scope. But interestingly, you’ll notice in that quote from the W3C blog post that the “all-purpose banner” includes “CSS” — so it’s not just the new stuff in CSS3, it’s all of CSS. I can’t see many people being too happy about this.

And if that wasn’t enough, before the web design community had a chance to exhale, the WHATWG Blog published a post entitled “HTML is the new HTML5″11, announcing two changes: (1) The HTML specification will be known simply as “HTML” (dropping the “5”); and (2) The spec will be considered a “living standard”12, not just a draft, dropping use of the “snapshot” model of development.

What Do You Think?

This article doesn’t intend to offer too much of an opinion on these matters, as it’s still early. But we know many in the industry want to voice their thoughts, so we’re encouraging you to offer your comments on the logo, its stated purpose, and the further developments on the term “HTML5” announced on the WHATWG blog. It certainly has been an important week in web development, so we’d love to get your thoughts on all of this.

UPDATE Jan. 25/2011:

Evidently, late last week, just before this article was published, the FAQ was updated13, in response14 to the15 furor16:

Now its meaning excludes the non-HTML5 technologies, leaving those for the supplementary icons. The FAQ says:

This logo represents HTML5, the cornerstone for modern Web applications.

Footnotes

  1. 1 http://www.w3.org/html/logo/
  2. 2 http://ocupop.com/html5
  3. 3 http://www.w3.org/html/logo/#swag
  4. 4 http://html5shirt.com/
  5. 5 http://www.w3.org/html/logo/#the-gallery
  6. 6 http://www.w3.org/html/logo/
  7. 7 http://www.w3.org/QA/2011/01/an_html5_logo.html
  8. 8 http://adactio.com/journal/4289/
  9. 9 http://mashable.com/2011/01/18/html5-gets-an-official-logo-from-w3c/
  10. 10 http://en.wikipedia.org/wiki/Web_Open_Font_Format
  11. 11 http://blog.whatwg.org/html-is-the-new-html5
  12. 12 http://wiki.whatwg.org/wiki/FAQ#What_does_.22Living_Standard.22_mean.3F
  13. 13 http://www.w3.org/html/logo/faq#logo-represent
  14. 14 http://schepers.cc/insidevoice
  15. 15 https://twitter.com/adactio/status/28224023695466496
  16. 16 http://tantek.com/2011/020/b1/new-w3c-html5-logo

↑ Back to top Tweet itShare on Facebook

Louis Lazaris is a freelance web developer and author based in Toronto, Canada. He blogs about front-end code on Impressive Webs and curates Web Tools Weekly, a weekly newsletter for front-end developers.

Advertisement
  1. 1

    Looks like an American propaganda posters which were once :)

    0
  2. 52

    I dont get the point. Why does an HTML need a logo?

    3
  3. 103

    Adrian Tschubarov

    January 22, 2011 6:04 am

    I think it is too old looking. Retro futuristic, 50’s like. It looks good, but does not kill me. Well executed, in 2 or 3 month it will look so natural to us that it will start looking good anyway. Like the Coca-Cola logo.

    0
  4. 154

    It looks like a shield. Shield means protection. What does HTML5 protect from? I thought it is a presentation language.

    2
  5. 205

    I love the logo, being a logo designer, but I think it’s pointless to show this on a website. Why?

    First of all, the audience that knows the meaning of this logo will probably only be the designers and developers of websites. Joe the Client isn’t interested in this and that should always be the target-group of designers and developers to make sites for!

    Second, HTML5 is not being supported by all the existing webbrowsers (the big 5), and I think it’s looking strange to put a HTML5 logo on your site, when still 30% of all users of internet use IE (see: http://www.w3schools.com/browsers/browsers_stats.asp). To be honest it’s quite ridiculous to see a HTML5 logo when a site doesn’t work as intended or doesn’t work at all. For IE-users the logo could easily get a new meaning: ‘ban this site’, cause I can’t watch it properly!

    And third point is that we’re going back to the ’90 with the (generally thought – read an earlier article here on Smashingmag) stupid labels like ‘best viewed on IE’ or other non-browser-compatibility thingies.

    So no, although I love the logo, I think web designers and developers should stick to making web sites accessible .. and let’s face it: HTML5 still isn’t working on all browsers.

    In short, this logo means that the designer or developer was too lazy to make the site accessible in ALL browsers!

    Cheers & Ciao ..

    3
  6. 256

    To all the commenters asking what the shield protects us from…
    …SCNR: Flash exploits :P

    I like it but hope nobody uses the mini badges. Are they a trick to make curious people click?

    -1
  7. 307

    The design of the logo is nice, but reminds me more of a hood ornament, or as other have said the transformers/superman logo. Does not scream “web” by any means. The orange color scheme also seems out of place, and to me would only look good on a few color schemes. Throw it over a black background and suddenly your site looks like Halloween. The black version is a bit better, but to me is still too bold. To me, icons like this should be a more muted color, and secondary to the content on the website. If I’m going to be puttin badges on my site, I want them to be neutral colors, and a shape that isn’t so obtrusive. The overall shape of the shield seems like it would be hard to use in a footer with the conjunction of plain text, etc. The typeface looks art-deco to me, not very futuristic. The accompanying icons are very confusing, and I’m a designer – should be ultra-confusing for the public. This icon seems like something a designer or developer should put on their portfolio – not something the general public will be seeing.

    -1
  8. 358

    The main concept of new technologies is: simple – usefull – direct.
    That logo i god for a SUPER_HERO (The bad Flash is Gone…. her comes HTML5.. rescue you….).
    Don´t work fine..

    -1
  9. 409

    Great logo, but will users care what technologies (or better, yet – should they) the site is built on?

    0
  10. 460

    Great logo :-) Byt, If you want some parody -> http://graphism.fr/dj-les-parodies-du-logo-pour-le-html5

    0
  11. 511

    We thought it’s unfair that HTML5 got all the fun, leaving it’s equal partner – the CSS3 – neclegted and unstyled, so we created it’s own logo. Naturally, partners often do have similar design style. :) You can see it here: http://dribbble.com/shots/102587-CSS3-Logo?offset=1

    -1
  12. 562

    Reminds me of a military badge. Not the kind of logo I like to see for html 5.

    0
  13. 613

    I like the Logo and i’m using it almost on my website, but in my opinion the style could my more modern.
    Michael
    PS: sry for my bad english, i’m german :)

    -2
  14. 664

    What an ugly logo!

    1
  15. 715

    Nice!!!

    -2
  16. 766

    logo is nice but personally i think do we need logo for only html5 stuff .. then why not for css3 .. or up coming technologies ..
    if we want to have.. this could be more simple. may be just conceptual thing. completely different colors shapes .. maybe just type modification would work ..
    i think this is gimmick to promote html5 against flash .. see color is almost same .. lite red .. instead of cherry red see logo of flash cs5 and this one .. just 3d concept is same..
    no hard feelings but its just my opinion :)

    1
  17. 817

    logo reminds me of the transformers, also it looks kinda retro.
    But it looks cool!!

    -1
  18. 868

    It’s very nice! It seems to me a protective shield: the protective shield of the Web! Moreover, it’s a good idea combine it with other technologies…

    -1
  19. 919

    I dont care, I will never use this logo anyway, ever!

    5
  20. 970

    embarassing.
    like it nicerß
    teenage dreams of being strong.
    what about taking yourself and simple technique less serious?

    -1
  21. 1021

    I think it’s a sweet logo, but wouldn’t it be more fitting to announce that the logo would evolve over time? This logo seems so settled. For example, this week we could remove the 5 and replace it with a question mark or Prince’s old symbol. Also, some additional supplementary logos showing which browsers are compatible would be nice, and we should also have cool HTML5 slogans, like ‘Validations? We don’t need no stinking validations!’ or ‘Remember the fierce moral urgency of XHTML … fooled you!’ or ‘If it doesn’t run on an iPhone, shame, shame, shame!’.

    In all seriousness though, a logo won’t help make adoption of the great features for HTML5 a reality. Usefulness will, and usefulness will be determined by the interrelated issues of set standards and uniform browser adoption. The logo really is a nice design, but HTML5 seems to me to be great ideas on a shaky foundation. I hope they shore up the foundation soon.

    -1
  22. 1072

    Not bad. Now I just need a place to put it. I can totally see the long one in the second row with all the little icons with a toggle effect. Opening up the list of features on click.

    -1
  23. 1123

    Looks very super heroish, I kind of like it. I don’t think it looks as professional as it could be, because it looks kind of cartoonish, but I think that’s kinda cool ;)

    -1
  24. 1174

    I think its a great logo, the color red-orange really put on front the whole concept, the shape is fantastic, really look like a shield or something like very dominant, the type for the 5 is awsome but the HTML word doesnt really fit for this shape I think.

    so I give it a 8/10 for this logo. not the best but very beautiful

    -1
  25. 1225

    When I first saw this on the front page, without reading the HTML, I thought it was a new logo for Smashing Magazine..

    0
  26. 1276

    I think the logo realy realy sucks! Putting it on your website implies you are in favour of kinda military style coats …

    Such a crap it is frustrating. Reminds me in the proud “made on a mac” or “best viewed in Netscape Navigator 4.0″ or such, as it is just as pointles imho.

    0
  27. 1327

    it’s abt. time to brand the technology..WTG..woo hoo BUT the Logo could be a lot better.Why don’t you take submissions and pick the best one and send it over to W3c council idiots?

    -1
  28. 1378

    i can make a better logo than that in less than 10 minutes.

    -1
  29. 1480

    to bad they’re dropping the 5 from HTML 5. And just making rolling development.

    -1
  30. 1531

    Why do we need a logo? It’s unnecessary to tell the world how you have built the frOnt end….or anything for that matter. Both clients and users just want it to work and work well. It should be irrelevant to them the technology used. If they are thinking about technology behind a website, then as designers and developers we have failed.

    -1
    • 1582

      @Maak bow

      “…Both clients and users just want it to work and work well. It should be irrelevant to them the technology used. If they are thinking about technology behind a website, then as designers and developers we have failed..”

      Not true! Some of my clients demand that specific technologies be used on some projects. And when that’s what they want, that’s what they get. Just because a client thinks about the technology, does not mean the designer or developer failed.

      0
      • 1633

        Yea, the client may think about tech, but that doesn’t say anything. Sure, if he demands you save everything UTF-8 without BOM, no one would argue against (I guess). But does that imply it is a good Idea to have a starwars’ish logo on your site, claiming it is UTF-8 without BOM ?

        -1
  31. 1735

    I think it’s not bad, but not good enough to be the new “Web Standard”. They’ve could make something better, I think.

    -1
  32. 1786

    pretty horrid

    0
  33. 1837

    My first impression was that this logo looks like it should be representing something related to soccer, which is to say that this is neither a good nor a bad thing.

    -2
  34. 1888

    “5” or “S”? :)

    Not a good logo when it’s made small. And realistically, a readable size will take just too much real estate.

    Good logo design is not just how appealing things look. It’s also about, usability, readability, descriptiveness, functionality, etc.

    This logo is not readily sizable. When shrinking it down to usable formats, the readability and detail is lost.

    Perhaps this logo should have been released to the community before making it the official logo?

    My opinion, it just looks like an image of a shield was taken from a comic book and the number 5 typed onto it, with an unusual font.

    5 can surly refer to the HTML 5 version. The only issue for me really (in terms of descriptiveness)… The shield refers to????

    The logo itself is not awful (just because it’s not my taste, that does not make it terrible or bad), but I really think it’s not good enough for a web standard.

    1
    • 1939

      >> Perhaps this logo should have been released to the community before making it the official logo?

      It’s not the official logo. See my comment here from above.

      This “release” is basically what you just said: A release to the community to see if we approve of it, and then they will decide from there (although in reality, it would be extremely unlikely that they would just scrap it and start again — although that can happen with enough public outrage).

      -1
  35. 1990

    I read somewhere the logo is to hard 4 the new web. I agree.

    -1
  36. 2041

    The logo is designed to look like a cube in perspective, with eye-level at the top.
    Moving down the image, the perspective shows the shape of a cube (sort-of).

    However the horizontal lines in the 5 don’t follow that perspective. This results in something that looks terribly wrong.

    Add the fact that end-users don’t even know what html is and also the fact that html5 is a moving target, and you get something unnecessary that looks weird.

    0
    • 2092

      Add the fact that end-users don’t even know what html is and also the fact that html5 is a moving target, and you get something unnecessary that looks weird.

      Yea, that’s something I’d agree with. though, perspective cube … Not.

      -1
      • 2143

        Yeah, I only read the comments and the shield stuff after posting. I guess it goes to show the shield is really screwed up because I didn’t see it before. All I saw was a weird cube.

        -1
  37. 2194

    I do agree that the different technologies should be separated. Overall HTML 5 becoming a living draft is great for us developers, because the browsers will adapt on the go. This looks very promising.

    -1
  38. 2245

    Alex Kahl @probefahrer

    January 22, 2011 3:20 pm

    I absolutely love the Logo – even if it looks a bit like a Virus Scanner Signet :-)

    -1
  39. 2296

    Truly ugly. The shadows and highlights look terrible when viewed as a small icon. A simple plain background would work better.
    The typeface is also very unpleasant.

    1
  40. 2347

    I’m surprised that you’ve posted those logos as JPGs. I can see compression artifacts trying to jump out of the picture and eat my eyes… I didn’t expect that here, at Smashing’s.

    0
  41. 2398

    IMHO HTML should NOT have a logo.
    Its just HTML, and all…

    1
  42. 2449

    It does seem like a great idea to have a logo dedicated to html5 and perhaps that will spawn designers of old and new to re-evaluate how they code and design (there is alot of messy code and designs out there). I think could help enthusiasts to get out of there comfort zone of basic html and xhtml.

    As for the logo itself, I like the simplicity but I kind of wish it was more “futuristic”? I don’t know but in all, it is a good idea.

    -1
  43. 2500

    Should be a HTML5 canvas version tbh.

    -1
  44. 2551

    the mad professor

    January 22, 2011 8:36 pm

    great idea….
    love html5, hate the logo…such an ugly design.

    0
  45. 2602

    Nice Logo!

    -1
  46. 2653

    It is a logo – get over it :)

    GW

    -1
  47. 2704

    overall i like the logo and what i appreciate the most is its not done in a web 2.0 style. the quote “The logo does not have a specific meaning; it is not meant to imply conformance or validity, for example.” i have a problem with; if you wanted to communicate nothing or nothing particular when why not just go with “HTML5″ in helvetica black/white?

    a shield translates to “strength” or “protection”, its a masculine shape. it combined with orange especially demands attention and can seem as a symbol of warning or danger. orange is a bold color. it may be the biggest attention-whore of any hue, meaning no matter where you place it or how small, your eye will find it and the problem is that it can become an annoying distraction.

    3
  48. 2806

    Here’s my first revision for the logo, (quick mockup, comments welcome):
    http://twitpic.com/3sm87n

    -4
  49. 2857

    the log fails so many rules and at small size is hopeless, the W3C and WHATWG have created a nightmare by dropping the html 5 name, and will now go with a moving target that they will not even issue a snapshot of until 2013, give us a break, just how we going to keep up with compliance to standards on a moving target. HTML 5 is like salt on an open wound that will not heal. Get over this game and set a standard and move on with it. lets face it we are at the mercy of a bunch of cray cray’s and a hopeless standard future ; )

    0
  50. 2908

    nice, strongly model

    -1

↑ Back to top