An HTML5 Logo


W3C unveiled a logo for HTML5 today. HTML5 in the broad sense covers many different technologies at varying degrees of standardization and adoption. Commercial sites have begun to take advantage of some of the technology, and we are excited that this logo will help raise awareness about HTML5 and W3C. Please check out the logo home page for information about free stickers. We are also selling T-shirts and part of the proceeds will support the HTML5 test suite effort.

A number of people have already asked me “What does the logo represent?” 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.

The logo is available under a permissive license (Creative Commons 3.0 By) so that you can make it fit into your own designs. I hope you find the logo useful and invite you to share your creative applications of it with us on this thread.

As a special treat, I’d like to introduce Michael Nieling, the Creative Director at Ocupop, the design firm that developed the logo with us.

Ian Jacobs (IJ): I think the W3C community would be interested in hearing your perspectives on the design.

Michael Nieling (MN): As with most productive design conversations, this one started with a desire for clearer communication. As you’re aware, the term HTML5 has taken on a life of its own; there has been significant confusion and debate both within the developer community and in the public at large as to what exactly HTML5 is when the term is used outside of simply referring to the spec itself. This variability in perception is what inspired the project – a group of developers and HTML5 evangelists came to us and posed the question, ‘How can we better communicate all of the technologies and potential that HTML5 represents?’ …and the resounding answer was, the standard needs a standard. That is, HTML5 needs a consistent, standardized visual vocabulary to serve as a framework for conversations, presentations, and explanations moving forward.

IJ: W3C has also used the phrase “open web platform” to refer to the larger set of technologies. We had begun a logo design effort internally for the set of technologies, but put it on hold towards the end of 2010. How did you start your design process?

MN: In addition to lots of research, interviews, and seemingly never-ending web comment threads, we started giving casual presentations – to companies, colleagues, friends, and our moms – and learned what worked and what didn’t when talking about HTML5. We went through rounds of review discussing the semantics of the movement, we developed a taxonomy that you currently see manifested as the ‘technology classes’ on the logo website; in short, we started, as I mentioned earlier, by defining the communication framework, the vocabulary. Once we had a foundation in place there, we began work in earnest on the logo – starting with a thorough design brief based on all of the above.

IJ: The HTML badge is the foundation for the framework. What inspired that image?

MN: On our agency website we have a more visual description of the evolution of the mark, but I can give you the narrative form here. We start any logo development project with really a pretty standard design process – we research, build a brief, amass keywords, create concept boards, and then we get to sketching. In the concept board phase of the project, a few focal points really stood out to us – stars, sea stars, and archways.

Stars were first on the list as your run-of-the-mill, hand-drawn star has five points and there’s definitely a depth meaning in stars as they relate to the power and potential of HTML5. Stars led us to sea stars: mascot-as-logo is a proven communication tool used in this space before – it lends personality and life to what might otherwise be perceived as dull and technical. Additionally, sea stars are a keystone species – though a quick Wikipedia search would surely provide better background, keystone species hold entire ecosystems together, they shape the world around them, and without them, things start to fall apart. Lastly, ‘keystone species’ led us to the concept of the keystone in an arch – again, though every stone in the arch adds strength to the structure, the arch will not stand without the stabilizing effect of the keystone.

So, hundreds of star, archway and adorable sea star sketches later, we really focused in on the shape of the keystone and (in what seems an obvious evolution) it’s incarnation as a crest, badge or shield. Not only is a keystone is a great metaphor for how HTML5 stands at the center of this current technology movement, but the final design started to take shape simultaneously as a coat of arms and badge of honor we felt captured the spirit and substance of the open web platform and the community surrounding it.

IJ: How do you build confidence that a logo you have designed will have the desired impact?

MN: Paul Rand was quoted at some point saying that great logos have ‘the pleasure of recognition and the promise of meaning.’ At first glance, people immediately see the number five, the badge, the power, and the excitement of this logo and the movement as a whole – they get that ‘pleasure of recognition’ – they get it immediately. Then the shape, the shading and very real latent meanings we talked about earlier also come through. That promise of meaning, that potential that the open web platform and the ‘new’ HTML5-driven web offers, that’s there too – but the point Rand was making was also about the ability of a logo to take on meaning, to evolve – the designer can only do so much, the consumer of the logo makes the final call…and as you and I talked about at the very beginning of this interview, I am confident that we’ve provided a very clear and effective baseline of vocabulary for HTML5, the syntax and ultimate meaning is up to the community.

IJ: Thank you for sharing your thoughts about your work. I’d also like to thank Seth Ladd, who was instrumental in making this project happen.

Michael Nieling is a designer, educator, father and dog owner, he is the Creative Director at Honolulu-based Ocupop (www.ocupop.com) and also teaches logo design at MIAD.

30 thoughts on “An HTML5 Logo

  1. do you prefer the comunity to hotlink the image from the W3 servers or do we host them on our own ?

    1. Hi jpvincent,

      We’re set up either way. The badge builder suggests a hot link, but you may wish to download to improve your own performance. If our servers start to suffer, we will probably actively encourage people to host their own. And the link back to w3.org is always appreciated!

  2. A lot of people are asking, but it doesn’t seemed to be answered anywhere – like the FAQ on the HTML5 logo page.

    Does the W3C intend for developers to refer to technologies like CSS3, SVG and WOFF as “HTML5”.

    A nice clear yes or no would really help answer this once and for all.

    1. Hi Remy,

      W3C has mostly been using “Open Web Platform” to refer to the broad set of technologies, and “HTML5” to refer to that specification.

      However, the world has latched onto the shorter “HTML5” for the broad set. This logo aligns with that now common usage. I know it can be confusing. I expect context will often help clarify what the speaker intended.

      W3C will continue to use “Open Web Platform” as well, and we may have a corresponding logo.


      _ Ian

  3. The “5” shield alone might not be too militant, but what’s the deal with using the rank insignia for a sergeant as the icon for “semantics”, another military badge-looking thingy for “style” and below the shield a star in a circle reminiscent of what one might see on a military vehicle?

    1. Hi Henri,

      We’ve received a couple of similar comments on the bars. When I asked Michael the designer about the rationale, he replied that the imagery was chosen to capture the meticulous nature of semantics. I replied that sometimes data can be messy, and this imagery may strike people the wrong way. After a few rounds of discussion, we decided to leave it for broader comment. I’m tracking your observation and others on this thread. Thanks!

      _ Ian

  4. Hm, it seems to be a neat idea, but if it is going to represent HTML 5, then make it representative of the HTML 5 technologies.

    Why not distribute it as SVG and why not even put the “5” in MathML?

  5. I think Remy raises a good point, and whilst the answer was reasonably in depth I’m not sure it clears it up. If W3C are referring to it all as an “Open Web Platform” then surely it’s an OWP logo, and HTML5 should be one of the smaller logos too, along with CSS3 etc?

    Otherwise are we not just continuing to aid the confusion?

    1. I have also wanted an OWP logo, and a CSS logo, and so on, and for them to all fit together. I don’t think the logo set alone will change widespread usage of the term “HTML5” but I do want to make available a set of logos that people are comfortable using in various contexts.

  6. Ian,

    I agree with Henri: the shield, badge, stripes and star evoke the military. In a different era this might simply be WWII nostalgia. Today, with the US occupying two countries, it seems inappropriate, and carries a faint but unmistakeable whiff of imperial police state, especially when displayed in the vertical orientation.

    Its too late, I’m sure to change the main 5 shield icon, but please lighten up on mini badges that go with it: they’re kind of creepy!

    1. HI David,

      I hear your comment and take note of it; I’ll be discussing this and the other main issues people have raised (such as “muddying”) with my colleagues. I look forward to a reply next week.

      One note: w3c is an international organization, not a US organization.

  7. +1 on Henri & David’s comments. I’m not too troubled by the shield alone, but w/ the mini-badges definitely strikes the wrong tone.

  8. One note: w3c is an international organization, not a US organization.

    Exactly. You’ve got headquarters in the US and graphic designers in the US, but members and “customers” all over the world. So logos that look like US WWII nostalgia (particularly, to me, the star in the circle) at a time when the US military is active abroad might be sending the wrong message!

  9. I totally agree with David Flanagan. This logo is absolutely uggly and would be perfect for a comics heros between Superman and Captain America. Who has had this brilliant idea? Poor, poor, poor HTML5.

  10. Although I like the logo for the HTML5 specification itself, I think that adopting it as representative of everything is awful for the already confusing state of the open web technologies. ‘Open Web Platform’ to me sounds much more elegant and places HTML5 within the same ranks as all the others. With the proper support from the right people, companies, and developers, the use of ‘HTML5’ as a catch-all term for everything can still be prevented, without diminishing from the awesomeness of HTML5 itself.

  11. So CSS3 is not part of HTML5?
    As for the logo, I just see something that looks like it belongs in a kids’ cartoon.

  12. deveria escogerse el logo mediante el voto de todos los ke estamos conectados a la red … saludos ;)

  13. I am going to have to agree that this looks way too militant. And even worse, at first glance this feels like every security or anti-virus logo out there, and I am certain that is the emotional response that will be associated with this mark. Which, if the point of having a logo for HTML5 is to bring awareness to more people in order to push a fast adoption of this new tech, then the designer failed to do his job and this logo fails to uphold its task.

    It also just serves to confuse that HTML5 is synonymous with the OWP idea. Why is CSS and semantics listed in the same sub-listing under HTML5? And then, is CSS, WOFF, and SVG the same technology or are they distinctly different technologies? This logo just serves to further confuse this point making future client, designer, and developers relationships very confusing as each will have differing understandings of what HTML5 exactly is.

    I would think that the 5 symbol without the shield under an OWP logo would have made for a clearer campaign. It would make way more sense if HTML5 was listed as one of the ‘technology classes.’ Not to mention an OWP marketing campaign would be an easier concept for the general public to grasp, and thus be more successful. Unless you’re trying to sell this to the already on-board web development community?

    Don’t get me wrong I think it’s a great idea to create awareness and easily spreadable propaganda to hasten the acceptance of the HTML5 spec and adoption by major browsers, But this looks as though it’s going to get misunderstood and ultimately ignored having the reverse effect. I want to like it, really I do, but the blurring of the lines makes it too hard.

  14. Seems to me it’s the first time in history a HTML specification gets its own logo. To be honest, I don’t really get the point of that … no, wait!

    If there’s now a logo for HTML 5, why there isn’t any logo for HTML 4.0? And where’s the logo for HTML 4.01? What’s about HTTP? Why no logo for HTTPS? And someone could invent a logo for XHTML 2.0. Okay, there is no such thing like XHTML 2.0 but it could have its own logo. Just do it! Yeah. We also need a FTP logo quick! And one for SMTP! Oh, and POP and IMAP and IRC need logos, too! Have I mentioned NNTP yet? XML also needs a logo because… errr… it needs it!

    But don’t let us ever talk about the HTML standards itself. Who needs standards? Standards are boring. We must talk about logos! That’s really important!

  15. In In Short a good concept, and even shorter, Terrible Implementation!

    OWP is marketable and HTML5 is marketable under that, but to use the two as a synonymous tool, is pointless, useless, misleading, and un-supportable by most developers.

    CSS3 Brilliant!!!
    WOFF Brilliant!!!
    WebGL Potentially Brilliant!!!
    XHTML Brilliant!!!(Wheres 2.0???)
    HTML5 Utter terible backpaddle, What’s the use of a standards organisation with no backbone and no ability to make decissions, essintailly it’s left up to the browser vendors to implement what they want!!!)

  16. I found logo for “Class: Semantics” missing in zip file for SVG Icon Set of Technology Classes. Can you please check and update the file.

  17. We have made a modest effort to create a HTML5 Reference Poster; we hope that this poster makes it easier to use HTML, for professionals with varied experience levels. As a thankful gesture to W3C, we have used the HTML5’s new logo.

  18. I like this new-style-logo but I also liked the old-style-logo’s
    I am rebuilding my sites now to conform with the html5-specs and put on your new logo but:
    In remembrance of the good?-old-days i have made a mouse-over-event that shows the old-style-logo that’s hidden beneath the new one (I have redesigned an old-style-logo to look like it used to…), see the top corner of my experimental html5-site: http://www.suyderland.com/html5/html5.htm#

  19. Shame on technology typo, seems like HTML5 is all about the logo, banner and slogan. Just like a new generation of day-dreamer kids, who watch spider-man 24/7 and consider themselves a tech-hero who play (so called)nextgen videogames faster than monitor’s refresh-rate.

    Sorry but unlike HTML5 slogan, I can’t see the FUTURE in my BROWSER(S), none of them, not even Chromium.

Comments are closed.