Hacker News new | past | comments | ask | show | jobs | submit login
W3C HTML5 Logo Unveiled (w3.org)
370 points by hakim on Jan 18, 2011 | hide | past | web | favorite | 106 comments

Wow, I was prepared to mock it after seeing that w3.org actually had to design something, but it's rather good.

According to http://www.underconsideration.com/brandnew/archives/html5_va... the logo was designed by "Honolulu, HI-based Ocupop." (http://ocupop.com)

Was hoping someone would uncover the designer. Ocupop has more info > http://ocupop.com/html5

I had the same reaction. Pre-click: Hate dialing up to DEFCON 1, Post-click: huh, not too bad -- back to the morning coffee.

"Hate dialing up to DEFCON 1"

At first, I thought you were talking about DefCon, the convention, which really confused me.

Then, I realized you were talking about defense condition.

Agreed. I think it is pretty good overall, and can see potentially using it in my own projects. However, I don't think that the design of the technology class icons are particularly well execute. I feel like they suffer from an attempt to match the angles and styling of the logo too closely and would have rather seen more easily recognizable elements used to represent those concepts.

Must be a polarizer then.

I don't know why, but it puts a smile on my face. I guess, the logo shows some confidence previously unassociated with boring standard bodies.

Maybe it reminds you of Moses from South Park?


No way... the new HTML5 logo reminds me of a 2d paper cutout version of the Master Control Program.

Moses from South Park is the Master Control Program ;)


Yup, I immediately thought of that when I saw the logo. Did anyone scroll down further to the "Badge Builder 5000"?

Anyway, only people in the developers 'echo chamber' will have any idea what this means. Most people have no idea the difference between html4, javascript, flash or silverlight, and probably don't care.

Reminds me of transformers (the Autobots insignia)

I have to say that I find the icons to be really, really ridiculous.

It doesn't look like something someone hired from outside did, and the HTML5 logo looks like the header on a Tutsplus vector tutorial.

Most of the different icons have very poor symbolic value, and look really unintelligible.

They could do a lot worse, so that's always something.

I re-checked the URL two or three times to convince myself that this is not an amazingly done HTML5 troll-site ! I just don't associate such imagery with the W3C ...

Wow. I actually doubled-checked the location bar to see if this was the real deal or just some designer take on it.

It's a really great logo, definitely "with the times" with the bold, sharp lines and flat colors. I'm not sure I'll be putting it on any websites, since I don't think most users care or understand markup versioning, but grats to w3c for doing something that doesn't look like it came out of a committee of phds and marketroids.

Maybe you won't put it on any main page but I suggest you do on your "about" page or what have you.

I can't be the only user in the world who has seen an interesting "tech" thing and subsequently learned more from a website.

It can't hurt!


Not yet. W3C introduced this logo in January 2011 with the goal of building community support. W3C has not yet taken it up in any official capacity. If, as W3C hopes, the community embraces the logo, W3C will adopt it as its own official logo for HTML5 in the first quarter of 2011."

Was this a REAL response by them? If not, satire at it's best! I hope it wasn't, but wouldn't be surprised if it is.

I'm not certain I like it.

Think about its purpose; it needs to work with a huge range of styles, each of which will have specific and varied audiences.

The choices made (collegiate typeface / bright orange) are quite bold; I don't think it lends itself to sympathetically supporting a broad range of differing styles of design.

Also, when this is used, it's likely to be quite small - the gap between the tail of the '5' and its upper curve is slight. I think it will have a tendency to resemble a '6' at smaller resolutions.

Maybe I'm being too negative, but on top of all this I don't think it looks visually appealing or balanced. I don't think the proportions (forced perspective / surrounding gap vs. typeface weight) are pleasing to look at.

But then again, maybe once we see it everywhere, it's ubiquity will create new associations and familiarity will win out.

Also, when this is used, it's likely to be quite small - the gap between the tail of the '5' and its upper curve is slight. I think it will have a tendency to resemble a '6' at smaller resolutions.

Someone realized this. If you look at the favicon, they've dropped the tail.

Ah, well, I think that impacts on consistency.

The smaller version of the logo should be the primary use-case imo.

It's very common to have structural changes in letters at different sizes in order to maintain readability, yet no one complains about consistency. Why?

Because being consistent is very deliberately not supposed to require being identical. So long as the visual identity is maintained, and I think it is, then small changes are welcomed.

Most logos / marks need to be compatible with a broad range of media formats. Any system generally needs to be flexible - whilst remaining true to its original concept.

If the mark needs to be altered to work in a particular format, I think that could show a lack of foresight on the part of the designers. I'm playing devil's advocate though.

I think a very simple HTML + black shield border + black 5, could provide a useful additional mark; which might prove less obtrusive.


"It's very common to have structural changes in letters at different sizes in order to maintain readability, yet no one complains about consistency. Why?"

I don't know of any common examples of logos which make similar structural changes - but I'd be very happy to be proven wrong.

They are distributing black and white versions like you mention. Moreover these can be easily colorized to subtly blend with a design. The ease of this transformation does show foresight. The real issue is instead the boldness of the shield and font choices, but that fits the use case of the logo which is pride in technology and standards compliance. Not every website must use the logo, obviously. All said and done, very, very few will no matter how popular the logo is.

I'm on a really poor connection, so I'll do research later, but the difference between display and body variants in fonts comes to mind immediately. Knowing the two distinct use cases will highlight very different properties of the font's design, the letterforms are varied. The differences can be fairly large, however it is always clear that the two fonts are from the same family.

"They are distributing black and white versions like you mention. Moreover these can be easily colorized to subtly blend with a design. The ease of this transformation does show foresight."

I see your point .. setting a typeface involves decisions re. kerning and many fonts use 'hinting' to ensure they can be read well at varying sizes, and some display faces are altered to suit headline text or specific use cases - but I think most logos have aims which are more specific than a typeface.

If people are free to alter the colours of a logo to suit a design, and the rules for doing so aren't defining clearly - before long a logo isn't able to fulfil it's purpose, because the unifying elements of the design become unclear.

That's not to say that a logo has to be the same everywhere - a successful identity system can break the rules, but if it does so, it needs to be very consistent in the way those rules are broken. I think agencies like Wolf Olins provide a good example of this kind of thinking.

I don't think the the adaptation of the HTML5 logo for the smaller favicon format is a feature - it seems like an afterthought.

The choices I see are:

     (1) Do not correct the 5 and cause people to misidentify the logo at small sizes since it looks like a 6 then

     (2) Correct the 5 at the cost of an almost imperceptible change in small instantiations of the logo

     (3) Redesign the whole thing to use a font that is distinctive at all sizes
Between (1) and (2), I feel that (2) is always the winner. (3) appears to beat them both, but it means prioritizing distinction at small sizes at the same level as style, text color, weight, and any number of higher level and arguably more important factors. I feel like this exact tradeoff was done by the designer and their choice of (2) very well founded.

Wolf Olins is a particularly good example of the fact that brand is far larger than logo. I'm not even a particular fan of this new HTML5 brand, I feel like it overemphasizes and romanticizes a tool, but I won't get caught arguing that it's not comprehensive, or strongly suggested by all of the proposed instantiations on the website, or to weak to survive the likely numerous changes it'll suffer should it be widely adopted.

I agree about the three options - and I think (3) would have been the best outcome - because whenever this logo is used, it will most probably be shown as relatively small badge.

For example - this blog (http://almaer.com/blog/) is listed as an example of the logo in action on the launch page.

I think this page is a good example of my point; at this size, the logo suffers from the '5-becoming-6' problem - it doesn't actually communicate its message successfully at the most basic level.


I've had a think about this in a bit more detail - and the more I think about it, the less impressed I am.

I think the whole concept should have been based around producing a mark that can identify whether a product supports HTML5 technologies.

I don't think the logo should have been produced to place on a site (or teeshirt) to show allegiance to the cause - I think it should have been created along the lines of the DVD, USB, HD or Blueray industry support logos.

An identity that helps promote HTML5 as a consumer technology - and shows a consumer at a glance, whether the product they are about to download or buy is capable enough to adhere to the upcoming spec.

But maybe that's what this is? Still, I'm a bit doubtful about whether it achieves these aims.

it doesn't actually communicate its message successfully at the most basic level.

As a marketer, I agree.

Yes, the color orange is that loud, exuberant, hilarious friend you take on a pub crawl but never to church.

yeah, I agree. I LIKE it, but for a W3C logo? A standard? It's a bit much.

I agree. We should go back to the W3C's existing visual design, which I've always found to be beautiful.

In addition, in my case at least, it's causing eye-strain.

Is that how HTMTL5 websites are supposed to look like? With the cluttered layout, the various fonts and sizes, the flashy colours and the interactive content I find this page incredibly difficult to parse. It's hard for me to extract the important informations from the text. Is it really about the new logo? What's the deal with the "HTML5 semantics" on the middle? I know nothing of web development, so I have no idea what this means.

I could also question the need of... 2^8 variations of the same logo (the "build a logo" thingy).

EDIT: fixed typo

The class semantics section appears to be related to the other logos that the w3 has created for them.

Personally, I think its extraneous information. If you came away with knowledge of what the logo looks like (and you should since it took up fully 2/3rds of the first page), then you're set.

As for the rest of your criticism:

> I know nothing of web development, so I have no idea what this means.

Although HTML originally was created to be human readable, and better yet--writable by ordinary people---that isn't how history played out. Hardly anyone writes their websites in bare HTML anymore.

For a time, it seemed that HTML instead would be automatically generated by machines--either a CMS or Dreamweaver/Frontpage and its ilk. This 'dream weaver' age brought us XHTML and its XML inspired draconian parsing requirements.

But slowly, a cadre of individuals was growing who did write HTML by hand and documented the fine differences between browsers, and put pressure upon their makers to change them. These folks were a sect that didn't exist before (and perhaps couldn't have existed in the 90s low-bandwidth websites)...they are web designers.

HTML5, logo and all, looks like the w3's way of trying to capture the attention of web designers because at the moment they have little to no credibility with that group.

I see, when I read the page I thought the intent was to market HTML5 "to the masses". It reminded me of the "use firefox" campains. I guess I'm just not the target audience. Thank you for your insight.

EDIT: I stand by my point regarding the layout though. I think a website promoting HTML5 should try to keep it clear. Trying to mix an informative content with an HTML5 demo page might not be the best idea.

I'd say the new logo is definitely aimed to appease web designers, but I don't think it's fair to say that the W3C has "little to no credibility with [web designers]". Many still have pained memories of designing for older IE and understand the work the W3C has done to usefully eliminate the various fine differences.

More recently there's been a lot more positive feeling toward Safari and Chrome for pushing the implementation of new technologies forward, but it's worth noting that there would probably be a lot less confluence in the new technologies if not for the work the W3C and WaSP did.

Even if outside of that logo they both look really boring.

You forgot to mention a future filled with unblockable canvas advertisements filling up 70-80% of the content on every page, eating up huge swaths of CPU time.

Looks like the Autobot insignia.

Is this a declaration of solidarity against the evil forces of the Flashicons?

More like a take on the Superman insignia.

my thoughts exactly. i like it.

I'm sorry, but this is laughable.

Do people put icons in their iOS apps advertising the use of CoreAnimation? Do they put some kind of Silverlight or Flash badge on their web sites done with those technologies?

It's just a set of useful technologies. Why all the branding hoo-hah?

CoreAnimation no, Flash no, Silverlight yes. Of course, even if there weren't a Silverlight branding badge, the Microsoft updater that starts every time you visit a page that uses it would remind you.


I don't think that word means what you think it means...

I really like it. It looks acceptably corporate, but it has a hint of the whole 'unicorns are awesome!' early-adopter-webdev aesthetic that will put a smile on the face of the people who actually use html5 day to day, and evangelise for it.

Sort of like dog whistle politics but used for good :)

Without considering the context, the logo itself is pretty good. I like the badge/custom badge and related components. Overall though, I don't like it. I don't think it's a fitting logo (the superman/superhero comparisons are what come to mind to me as well).

The logo treatments and website seem like a contrived effort design a logo to whatever the designers believe is the "HTML5 Design Aesthetic." Sure, rich content and all, but HTML5 (and related technologies, like this logo is supposed to imply) shouldn't be represented by over contemporary design.

Interestingly, the logo is not the "official" logo. On paper, it's just the community logo - and it will only officially be adopted if it gets enough grassroots support.

Is this W3C's "official" logo for HTML5?

Not yet. W3C introduced this logo in January 2011 with the goal of building community support. W3C has not yet taken it up in any official capacity. If, as W3C hopes, the community embraces the logo, W3C will adopt it as its own official logo for HTML5 in the first quarter of 2011.

Reminds me of Transformers

HTML5 logo ~= Autobot Logo http://t.co/p8lQ9xp

Looks like a stretch to me...

That's because it's obviously a Decepticon and not an Autobot: http://media.photobucket.com/image/decepticon/Decepticoncaus....


Nice article by Jeremy Keith on why this logo creates and propagates confusion between HTML5 and CSS3:


How many type foundries do you think would be trumpeting their fonts' inclusion in the HTML5 logo?

One of the many reasons I love Hoefler & Frere Jones.

Gotham + Mercury + Knockout, all from @h_fj, make the HTML-5 logo. http://www.w3.org/html/logo/ #next #stop, #webfonts http://twitter.com/H_FJ/status/27369279905071104

I am not sure I see how useful it is. I think people who would care about HTML5 are already aware of it and the ones who don't will probably not be influenced by the logo. What remains seems to just be some kind of nerdy bragging thing: collect them all!

It reminds me of the "Netscape Now!" button campaign from the early web. The logo and badges looks nice tough.

Logo's available in SVG - a reminder that I have no idea how to use SVG.

Anyone know who made it?

Times New Roman headers on a design firm's site? Yikes.

Am I the only one that finds the aliasing created by slightly tilted lines a design flaw? It was meant to be displayed digitally, and the designer should have avoided aliasing. http://en.wikipedia.org/wiki/Spatial_anti-aliasing

It's very apparent in the small version they want you to plaster on your site: http://www.w3.org/html/logo/badge/html5-badge-h-css3-semanti...

It's super strange that this page itself is HTML5. Doesn't W3C have a policy of only publishing documents using standards already in the "Recommendation" stage?

What irks me more is that they made another one of those one-page scroll-till-your-eyes-bleed sites to show the logo off. I don't know where this new "trend" is coming from, but I find it really tiresome already.

I couldn't find anything about this policy, but it does seem to be a common practice. Even the HTML5 spec is almost-valid HTML 4.01.

However, I did find other exceptions. For example, the CSS3 Media Queries spec uses the @bottom-right and @bottom-left page selectors, which are introduced by the CSS3 Paged Media module (Working Draft): http://www.w3.org/TR/css3-mediaqueries/default.css

Keep in mind that HTML5, the language, was designed to be compatible with existing browsers, already; a core part of the effort is to completely standardize all the edge case behavior, etc., related to simply parsing HTML. So there’s no real risk there. See also: Progressive enhancement.

I like it. How long until it's implemented using CSS3?

About 4 hours? Didn't take that long though. Enjoy.


The background-image property is supported since old plain CSS1.

I do like the impact of the logo, but am I the only one who thinks it's a bit too "military?"

That looks nothing like any military logo I've ever seen. Is there some logo in particular it reminds you of?

It seems the logo is an image (http://www.w3.org/html/logo/img/html5-topper.png). How long until someone can draw it using purely HTML5?

This looks like something you'd see on a Transformer, not a professional logo for a new web standard. I think it's good for what it is, unfortunately that "what it is" isn't what should represent HTML5.

It is finally out. I guess we will be living with that for some time. I do not mean to be grumpy but something with a bit more curves would be more appealing or representative of the new design era.

And the IE folks on Twitter are using it as their picture:


I think we can expect full compliance.

I'm surprised, the active states of the icons seem to be buggy in the latest chrome for Mac: http://cl.ly/0B0f0N3B1K2z3F2H3e0k

That's awesome and vastly superior to other w3c logos.

I expect to see this changing in phone booths in the near future.

Interesting. Nowhere near as bad as I had expected, a little too alter-ego for my tastes though.

You probably can't trademark a five-pointed star in a circle, but that part of the logo immediately got me thinking of Daring Fireball.

This actually makes me more excited about HTML5.

That, and learning that Netflix on the PS3 is a HTML5/WebKit implementation. I'm sold.

The icon for "Device Access" looks very similar to an apple. Does a square apple mean anything? :)

Autobots, autobots, autobots!!! you love it cause it's a rip off of your favorite cartoon!

'S' on an orange background. A new logo for smashing magazine. No? I kinda like it though.

Reddit doesn't seem to like it. And HN seems to like it. Why so much difference ?

I find it looks quite ugly honestly. The logos on the bottom are much better.

Looks like HTML 6.

I would like a wider gap in the 5, too. Interestingly, you get your wish if you use the “vertical” badge generator.

To my eyes, it looks too american-style.

What no Favicon? or did I miss it?

You missed the favicon. Here is a link: http://www.w3.org/html/logo/favicon.ico

HTML5 Badges: The E-Peen of 2011.

It looked like a RSS icon to me.

Why does it look like Klingon?

"THE HTML5 SHIRT — BUY IT! Every Man, Woman and Child can show their HTML5 Pride!"

As long as you wear a XL or smaller.

was there an html4 logo? why do we need an html5 logo?

Because it's cool, and we can. Haters gonna hate.

but what does it mean? No user will know/care.

I guess it's just like putting a badge on your website that says your site passes some html verification test.

It's really just to peer pressure other developers (and maybe the Internet Explorer team) into adopting the standards.

unfortunately - yes: http://validator.w3.org/images/valid_icons/valid-html40.gif

It was used blindingly by most people regardless of whether the page was valid or whether it was used on HTML, normally alongside "Made on a Mac".

w3c copied SuperMan, where is that damn sue button :|


I expected the logo to be in CSS3 :-(

It looks lot like Superman's Logo (The one that's on his shirt)

I'm not sure if I love the standalone logo, but I am loving those shirts. Reasons why the shirt is awesome:

1) It's not black. (I have too many damn black tech shirts at this point in my life).

2) Sales profits go to development of the HTML5 suite. (A good cause!)

3) As you say, superman. And who doesn't want to be a super hero?

Ordering mine now.

Was anyone else expecting the thing to be fully CSS rather than a .jpg?!

That would be awesome. An incredibly awkward contortion of CSS is always a better way to render a logo than, you know, pixels.

I'm sure you got it - but my point was that I was expecting them to use all 'HTML 5' to render their HTML 5 logo...

Not that I am condoning it, I was just expecting it.

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact