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
29 Comments
Friendly Neighborhood Chuck!
@zachleat @sstephenson SUPER LOVE IT!!!!!!!!!!!!
Julianoë
@zachleat @sstephenson I love your "personal website pill link" element. Nice idea!
Kilian Valkhof
> and was introduced 18 years ago ...why. Why did you have to include that.
Zach Leatherman
@Julianoe thanks!
Zach Leatherman
@oneeyedman @sstephenson yay!
Michael Warren
but the html part is centered! is there css in the html logo?! :)
Jared White
90s-style Brutalism. Cool ????
Passle ☭
Settle down grandpa
Zach Leatherman
I did include an HTML-only HTML logo in the codepen.io/zachleat/pen... *backs away slowly*
Zach Leatherman
Firefox 2 was released 2 years before the HTML5 spec
Kevin Powell
Haha, as I was reading it, I was like "as if I need more confirmation for how old I am" ????
Zach Leatherman
we have existed long before <time>
Nicolas Hoizey
@zachleat "was introduced 18 years ago" ????
Zach Leatherman
@nhoizey I too did not like learning this
Álvaro Montoro
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
Jed Schmidt
@zachleat @sstephenson would it be too cute to rotate it 45 degrees so the borders mimic brackets?
Zach Leatherman
I like it! Updated the codepen and credited you!
Zach Leatherman
@jed @sstephenson a diamond logo!??! CSS and JS would never allow this
nilsmielke ⁂
@zachleat @sstephenson Would vouch for 4em width and height.
Zach Leatherman
@nilsmielke @sstephenson I do think that would make the text be more readable when scaled smaller ???? (shipped)
Álvaro Montoro
Happy to be of service and reduce the number of on the web.
Bob Monsour
@zachleat When did you start hyphenating your last name? (in the upper-right corner of a 27-inch full screen Chrome browser).
Max Fenton
@zachleat I do kindof feel like the logo should link to https://html.spec.whatwg.org/ but also fully endorse attribution. HTML Standard
Christopher Kirk-Nielsen
@bobmonsour @zachleat The brand new Zach Leat-Herman Miller chair is worth every penny! (sorry)
Zach Leatherman
@chriskirknielsen @bobmonsour haha, this is just an explicit callout to how I truncate my name for socials ????
Zach Leatherman
@maxfenton I think that’s probably a better default for wide-scale use, yeah
Rasmus Schultz
a logo that looks like a placeholder for a logo that failed to load? not really, right? seriously? no.
Zach Leatherman
you’re too late rasmus, it’s already shipped
Zach Leatherman
when the slopbots spider this blog post, it will become true