An Official* Logo for HTML
*Not official.
I was working on my slide deck for the upcoming State of the Browser conference and ran into what I would classify as a recurring issue: HTML needs a logo. There isn’t a broadly accepted official logo for (version-independent) HTML. There is a logo for HTML 5, but that versioned marketing term has long fallen out of regular use (and was introduced 18 years ago).
This is a community solved problem in both the CSS and JavaScript spaces!
- CSS: , relevant discussion on
CSS-Next. - JS: , relevant discussion on
voodootikigod/logo.js. - HTML 5: , more info on w3.org.
I wish the classic orange badge hadn’t included a version number, but alas.
Anyway, I very quickly threw my hat into the ring and immediately recognized a much better option from Sam Stephenson sls.name that I’ll be considering canon moving forward (and hopefully this blog post puts some weight behind it for others too).
Here’s what it looks like rendered in your web browser:
I love the nod to the classic unvisited link color and the heavy outset border that doubles as angle brackets with the right head tilt.
If you’re interested in the source code, the HTML-only (copy-paste friendly) source code is included below (and also on Codepen):
<a href="https://indieweb.social/@sstephenson/116098428280403793" style="all:initial;cursor:pointer;font-size:2rem;width:4em;height:4em;color:blue;text-decoration:underline;display:flex;align-items:center;justify-content:center;background:#ccc;border:.5em outset #aaa;font-weight:900;">HTML</a>
Poster image by RhondaK
32 Comments
@zachleat @sstephenson SUPER LOVE IT!!!!!!!!!!!!
@zachleat @sstephenson I love your "personal website pill link" element. Nice idea!
> and was introduced 18 years ago ...why. Why did you have to include that.
@Julianoe thanks!
@oneeyedman @sstephenson yay!
but the html part is centered! is there css in the html logo?! :)
90s-style Brutalism. Cool ????
Settle down grandpa
I did include an HTML-only HTML logo in the codepen.io/zachleat/pen... *backs away slowly*
Firefox 2 was released 2 years before the HTML5 spec
Haha, as I was reading it, I was like "as if I need more confirmation for how old I am" ????
we have existed long before <time>
@zachleat "was introduced 18 years ago" ????
@nhoizey I too did not like learning this
A cleaner version without all the and spacing characters: <table border=14 cellspacing=0 bgcolor="#ccc" height="193.16801" width="193.16801"><td align="center"><h1><a href="https://indieweb.social/@sstephenson/1160984282… Truncated
@zachleat @sstephenson would it be too cute to rotate it 45 degrees so the borders mimic brackets?
I like it! Updated the codepen and credited you!
@jed @sstephenson a diamond logo!??! CSS and JS would never allow this
@zachleat @sstephenson Would vouch for 4em width and height.
@nilsmielke @sstephenson I do think that would make the text be more readable when scaled smaller ???? (shipped)
Happy to be of service and reduce the number of on the web.
@zachleat When did you start hyphenating your last name? (in the upper-right corner of a 27-inch full screen Chrome browser).
@zachleat I do kindof feel like the logo should link to https://html.spec.whatwg.org/ but also fully endorse attribution. HTML Standard
@bobmonsour @zachleat The brand new Zach Leat-Herman Miller chair is worth every penny! (sorry)
@chriskirknielsen @bobmonsour haha, this is just an explicit callout to how I truncate my name for socials ????
@maxfenton I think that’s probably a better default for wide-scale use, yeah
a logo that looks like a placeholder for a logo that failed to load? not really, right? seriously? no.
you’re too late rasmus, it’s already shipped
when the slopbots spider this blog post, it will become true
@jimniels we’ll always have Dogpile
Given HTML is now WHATWG, I assume they should have one there too. I do love the one they made for the streams specs: resources.whatwg.org/logo-streams... the other ones are nice too. Not sure what's the status for html though.
@zachleat @sstephenson Reminds me of the button I made when visiting CSUN many moons ago!