Ohh, conditional comments. We had so many IE holdouts on our site, I think only around 2021 I removed the last IE specific fallbacks, and I think some conditional comments were a thing until 2020.
I’m not sure when I removed a bunch of `msapplication-` fields, but probably after 2021 ;)
I guess I can remove `apple-touch-` and `application-name` stuff next…
When I worked at agencies, it became clear to me that the audience for a company's website was not that company's customers or prospective partners or anything, it was that company's execs, who were often on IE two versions back from what was current. Thank goodness the earliest I ever had to support was 7.
I'd only add the Safari Pinned Tabs `meta` tag (https://developer.apple.com/library/archive/documentation/Ap...), which had you define a simple black and white SVG. This image would get used when a user pinned your tab in Safari, in color when active and black when inactive.
Ha, fantastic line that one. Transparent pngs caused so much unnecessary trouble in IE6, it was very annoying, and limited our options as graphic designers.
Hah, my thought as well, was a part of my standard page setup. And then using those transparent pngs to do rounded borders with 9 images nested within 9 divs!
Reminds me of how awkward HTML doctypes used to be. Nowadays it's very simple, but in the past? You had to refer to the URL of the doctype declaration on every page
This plus the X-UA-Compatible stuff mentioned in the article meant that for many people, the first few lines of code on a web page were something they probably copied from a tutorial or reference document every time, at least if they didn't have a CMS handy.
You only had to include a doctype if you needed to turn on strict XML rendering or do fun things with XSLT. It was great if you wanted to convert, say, TEI to something browsers could read.
You were always, since the days of HTML 1.0, able to use just <html> to open your document without a doctype. It would be in tag-soup mode, but for most documents (rather than applications) that was fine. Not only do you not need a doctype, but you don't even need a <head> statement... browsers will generate one if you leave it out.
> These meta tags (and some other, less frequently used ones) were used on Twitter when generating link embeds. However, the documentation and card validator are no longer accessible (previously at https://dev.twitter.com/cards/getting-started and https://cards-dev.twitter.com/validator respectively). X falls back to the widely respected Open Graph meta tags, making the Twitter-specific declarations largely useless. They should be removed in favour of Open Graph tags. Further, they should be removed because X is an awful site with poor moderation that is owned by a man who publicly performed a Nazi Sieg Heil salute and has directly contributed to the rise of fascism in the United States of America and globally, among other horrors.
Ok but I believe `twitter:card` has no OG equivalent and still works?
Well, that escalated quickly. If my client wants Twitter tags, I'll write those Twitter tags. If my client wants dancing hamsters, I'll add those dancing hamsters. I don't care who Elon Musk is and what he did. I don't know the guy, but I do know my wife and family and they want food on the table.
It's so refreshing to see courageous people bravely standing their ground who don't believe Heiling Hitler on international TV and publically humiliating and abusing their trans daughter online is a bridge too far. It's so unfair to criticize anyone for doing something you'd do too if given the platform and opportunity. Once you disown and kick your own child out of the street instead of accepting them for who they are, you'll have lower grocery bills just like you voted for.
I was also thinking about charsets, BOM (byte order marks) and other shenanigans that had to be correct in the top of the file for things to display as expected. At least it was a struggle for 13 year old me why sometimes æøå showed up completely broken, and sometimes not. Today it feels like a solved issue, all files are UTF-8 all the way and it just works.
Even the meta version is picky about where it goes. The whole declaration has to fit inside the first 1024 bytes. Easy to break with a giant comment at the top.
All you need is initial-scale=1, not width=device-width, which is redundant.
"You do not need to set every viewport property. If only a subset of the properties are set, then Safari on iOS infers the other values. For example, if you set the scale to 1.0, Safari assumes the width is device-width in portrait and device-height in landscape orientation." https://developer.apple.com/library/archive/documentation/Ap...
You don't need both, but you should have the width set. From that page:
> A page fails the audit unless all of these conditions are met:
> - The document's <head> contains a <meta name="viewport"> tag.
> - The viewport meta tag contains a content attribute.
> - The content attribute's value includes the text width=.
I researched and tested this extensively the other day. `<meta name="viewport" content="width=device-width">` is all you need. https://vale.rocks/micros/20260902-1350
The same will happen regardless in the case of content extending beyond the width of the viewport. With `initial-scale=1` it'll be a horizontal overflow, without it'll zoom out. I argue that the latter is preferable (https://vale.rocks/micros/20260908-1315) but either way should never reach users due to the usability fails and major accessibility issues.
I disagree vehemently. I couldn't disagree more. The text has to be readable. If you force the reader to zoom in order to read the text, your website is fundamentally broken.
Moreover, neither of these considerations apply to images: "you risk having content off-screen which cannot be focused by a keyboard" "A user is extremely unlikely to think to scroll horizontally to see the rest of a document"
"There is even great president for it with documents on the web" Typo: precedent.
> either way should never reach users
This seems practically unavoidable with images, especially screenshots for example. Device widths vary, image widths vary. There is no magical image width that fits every device width, unless the image is very narrow. Moreover, I try to avoid JavaScript altogether when possible, so I don't want custom JS image viewers all over the place.
When you brought these arguments up on Lobsters <https://lobste.rs/c/dsm1up> I said it wasn’t cut and dried but that my general feeling was of disagreeing with you. I’ve thought about it more since then, and firmed my position up: you should make sure that the presence of initial-scale=1 won’t affect anything (we agree on this point), but that if you make a mistake in this area, it’s much better to have it than not to (we disagree on this part). Of your five points:
Your first point is correct. It could be reasonable to omit initial-scale=1 during development, or have something that complains on width overflow.
Your second is unavoidable: omitting initial-scale introduces a worse failure (excessively small text).
Your third I disagree with: when overflow occurs it will almost always be obvious that you could scroll, because you’ll have text or image that runs to the inline-end edge of the viewport rather than being contained by a page margin as is universally practised.
Your fourth isn’t useful—by that argument all documents should be zoomed out until the entire thing fits on screen; but we don’t do that in general because having to manage the zoom to get a useful result is unpleasant, yet that’s what you’re advocating for.
Your fifth is irrelevant, I think entirely unrelated to initial-scale.
Thank you so much for this amazing resource. One of my projects is a hyper-compatible framework that builds websites that span the compatibility spectrum from Netscape 3.x to today's browsers, and this is very helpful.
Oh, that is so great to hear. Glad to provide it! While writing I was very much thinking about it from the perspective of stripping things out, rather than incorporating legacy code for legacy contexts. Really interesting to think about that line of usage.
I still generally avoid browser-specific hacks like these, aiming for lowest-common-denominator most-minimal HTML that still satisfies most browsers. However, now and then there's just no avoiding it.
I am continuously in awe of the Web's decentralized and open nature that allows something like this to happen-- for one reasonably complex file/application to be compatible with 30 years of co-evolving client software written by many different developers and teams, much of it no longer supported.
This was not a HTML snippet by itself, but I remember early 2000s almost every website had three small icons somewhere: Set as homepage, Add to favorites, Contact (an envelope/email icon). I think I never used them (I didn't use Favorites back then, don't know why), but it was nice to see that they were available.
Server side image maps predate javascript. They were in early versions of Mosaic.
Client side image maps and the script element were (AFAICT) both introduced in Netscape 2.
Even when scripting was introduced, you didn't necessarily have the ability to move elements around freely on the page. I think (but I'm not certain) that it wasn't until Netscape 4 era that you had enough layout primitives to implement the multi-layer positioning approach to custom clickable areas.
But only square hit targets then (until clip paths much later). Image maps supported polygons and circles. And position absolute is still a few years after image maps.
The only time I ever needed dreamweaver: I found an open source imagemap of the US states and I needed to scale it to match my background image of the US provided by an art director. Dreamweaver let me see all the <area>s easily. Maybe there was another way to do it. Fun fact: the art director wanted states to grow on hover, but acquiesced to having them change color when I pointed out how impossible it would be to click on Rhode Island if you'd hovered Massachusetts first. I don't even know how I would have done the grow effect, tbh.
Ha! Last year I did some preliminary research, and all contemporary sources I've found agreed that last public search engine stopped supporting meta keywords around 2018, IIUC. So good catch about Yandex, thanks for the headsup! Funny, how things get complicated :) This meta had very turbulent history in 2010s and refuses to die, apparently.
Well from the (incomplete, as turned out) info I gathered it turned out that it was never standardised to begin with (unlike meta description, for example), so it did not even have to be "deprecated". (Like it ever meant something in the real world…) I am definitely for any obsolete mischief, so it brings me joy hearing there is vernacular continuity!
(As for external search engines,FWIR, in its heyday some search engines briefly regarded it quite respectfully, but eventually due to SEO spam they either started to ignore it, or took it as a negative signal, allegedly. But as pointed out in sibling comment, it still survives in Yandex, what is quite surprising plot twist for me.)
"Many search engines do not consider such keywords, because this feature has historically been used unreliably and even misleadingly as a way to spam search engine results in a way that is not helpful for users."
HTML 4.01 says the following:
"This specification does not define a set of legal meta data properties. The meaning of a property and the set of legal values for that property should be defined in a reference lexicon called a profile. For example, a profile designed to help search engines index documents might define properties such as "author", "copyright", "keywords", etc."
Ha, I stay corrected! Crawling back under rock to re-read WHATWG and historical W3C docs to fill the voids…
Note to self: Apparently, I mentally froze around 2009, so I have some decades to catch on. It seems the breaking point was after 2009 Hixie's WONFIX for adding keywords [0], at a time when both `keywords` and `description` were both swept aside into "MetaExtensions" [1]. The turning point I clearly missed came in 2010 [2] and got resolved through [3].
Huh, a few of the examples/prose about RSD, pingback, and twitter tags follow the same heading order, and mention the same details with the same links.
Like, it's really no big deal I guess. You were always going to find out this info from sources compiled by other people. But at least don't do the "I'll change some words and call it mine" high school essay plagiarism technique. There was clearly real research done here as well, it's not like it would've been that much harder to write it yourself.
source:
> X (formerly Twitter) now falls back to Open Graph tags when twitter:* tags are absent, making the dedicated Twitter Card markup redundant for most use cases.
article:
> X falls back to the widely respected Open Graph meta tags, making the Twitter-specific declarations largely useless.
---
source:
> The Twitter Card Validator was retired and the original Twitter Developers documentation is no longer accessible.
article:
> However, the documentation and card validator are no longer accessible (previously at https://dev.twitter.com/cards/getting-started and https://cards-dev.twitter.com/validator respectively).
---
source:
> Twitter's Do Not Track support was effectively dropped following the platform's transition to X. The original Twitter privacy options documentation is no longer accessible, and the signal is not honored in practice.
article:
> Twitter also had a Do Not Track meta tag for opting out of tracking when using Twitter for Websites widgets. Again, the documentation (previously at https://dev.twitter.com/web/overview/privacy) is now inaccessible, and it seems the tag is no longer respected.
---
source:
> XML-RPC pingbacks have been widely disabled by default due to their use in DDoS amplification attacks. Use Webmention instead.
article:
> They functioned somewhat similarly to how WebMentions do. Unfortunately, pingbacks rather quickly became an avenue for spam and SEO-gaming, so fell out of fashion. Vulnerabilities allowing sites to be tied up in DDoS attacks also became widely exploited.
> Smart Tags was a system Microsoft introduced in Internet Explorer 6 which would automatically inject hyperlinks into pages.
Smart Tags was present in some beta versions of MSIE6, but was removed before release. The MSSmartTagsPreventParsing meta tag never did anything useful - by the time its use was widespread, the feature it controlled had already been killed.
This may or may not be relevant, but one thing about lower case generally:
If you're doing string matching via Casefold or NFKC_Casefold [a], characters from both the needle and the haystack are converted to lowercase (with exceptions for algorithm stability reasons) before being compared.
Why lower case and not upper case? Theoretically, the choice is arbitrary, but given the distribution of lower-case vs upper-case characters in most texts, you can use the fact that lower case occurs more often to optimize your algorithms by skipping the case conversion for most characters.
LoganDark | 23 hours ago
rhdunn | 21 hours ago
LoganDark | 14 hours ago
OuterVale | 21 hours ago
voidUpdate | 20 hours ago
robin_reala | 20 hours ago
Rendello | 6 hours ago
https://www.w3.org/International/articles/ruby/styling.en.ht...
Semaphor | 23 hours ago
I’m not sure when I removed a bunch of `msapplication-` fields, but probably after 2021 ;)
I guess I can remove `apple-touch-` and `application-name` stuff next…
icameron | 17 hours ago
1-more | 11 hours ago
cprecioso | 23 hours ago
RobotToaster | 22 hours ago
kijin | 21 hours ago
chuckadams | 16 hours ago
jszymborski | 20 hours ago
https://microformats.org/wiki/h-card
nness | 22 hours ago
bbx | 22 hours ago
matsemann | 22 hours ago
Edit: and down memory lane: the spacer.gif
kijin | 21 hours ago
aduty | 20 hours ago
DonnyV | 20 hours ago
justsomehnguy | 17 hours ago
intrasight | 22 hours ago
I do bemoan the loss of the <?xml-stylesheet?> processing instruction and the JavaScript XSLTProcessor API.
CM30 | 22 hours ago
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This plus the X-UA-Compatible stuff mentioned in the article meant that for many people, the first few lines of code on a web page were something they probably copied from a tutorial or reference document every time, at least if they didn't have a CMS handy.
TeMPOraL | 21 hours ago
edoceo | 20 hours ago
Telemakhos | 20 hours ago
You were always, since the days of HTML 1.0, able to use just <html> to open your document without a doctype. It would be in tag-soup mode, but for most documents (rather than applications) that was fine. Not only do you not need a doctype, but you don't even need a <head> statement... browsers will generate one if you leave it out.
zdragnar | 20 hours ago
Klonoar | 19 hours ago
netol | 22 hours ago
> These meta tags (and some other, less frequently used ones) were used on Twitter when generating link embeds. However, the documentation and card validator are no longer accessible (previously at https://dev.twitter.com/cards/getting-started and https://cards-dev.twitter.com/validator respectively). X falls back to the widely respected Open Graph meta tags, making the Twitter-specific declarations largely useless. They should be removed in favour of Open Graph tags. Further, they should be removed because X is an awful site with poor moderation that is owned by a man who publicly performed a Nazi Sieg Heil salute and has directly contributed to the rise of fascism in the United States of America and globally, among other horrors.
Ok but I believe `twitter:card` has no OG equivalent and still works?
tosti | 20 hours ago
Tepix | 20 hours ago
tosti | 20 hours ago
DonHopkins | 17 hours ago
tosti | 16 hours ago
DonHopkins | 15 hours ago
matsemann | 21 hours ago
https://www.w3.org/International/questions/qa-byte-order-mar...
skobes | 20 hours ago
tabwidth | 11 hours ago
lapcat | 21 hours ago
"You do not need to set every viewport property. If only a subset of the properties are set, then Safari on iOS infers the other values. For example, if you set the scale to 1.0, Safari assumes the width is device-width in portrait and device-height in landscape orientation." https://developer.apple.com/library/archive/documentation/Ap...
I've confirmed the behavior in testing.
netol | 21 hours ago
OuterVale | 21 hours ago
> A page fails the audit unless all of these conditions are met:
> - The document's <head> contains a <meta name="viewport"> tag.
> - The viewport meta tag contains a content attribute.
> - The content attribute's value includes the text width=.
I researched and tested this extensively the other day. `<meta name="viewport" content="width=device-width">` is all you need. https://vale.rocks/micros/20260902-1350
lapcat | 21 hours ago
This is incorrect. Try adding an <img> that's wider than the device width. Then the whole page gets zoomed and the text unreadably small.
OuterVale | 20 hours ago
lapcat | 20 hours ago
I disagree vehemently. I couldn't disagree more. The text has to be readable. If you force the reader to zoom in order to read the text, your website is fundamentally broken.
Moreover, neither of these considerations apply to images: "you risk having content off-screen which cannot be focused by a keyboard" "A user is extremely unlikely to think to scroll horizontally to see the rest of a document"
"There is even great president for it with documents on the web" Typo: precedent.
> either way should never reach users
This seems practically unavoidable with images, especially screenshots for example. Device widths vary, image widths vary. There is no magical image width that fits every device width, unless the image is very narrow. Moreover, I try to avoid JavaScript altogether when possible, so I don't want custom JS image viewers all over the place.
chrismorgan | 3 hours ago
Your first point is correct. It could be reasonable to omit initial-scale=1 during development, or have something that complains on width overflow.
Your second is unavoidable: omitting initial-scale introduces a worse failure (excessively small text).
Your third I disagree with: when overflow occurs it will almost always be obvious that you could scroll, because you’ll have text or image that runs to the inline-end edge of the viewport rather than being contained by a page margin as is universally practised.
Your fourth isn’t useful—by that argument all documents should be zoomed out until the entire thing fits on screen; but we don’t do that in general because having to manage the zoom to get a useful result is unpleasant, yet that’s what you’re advocating for.
Your fifth is irrelevant, I think entirely unrelated to initial-scale.
phil-pickering | 20 hours ago
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
lapcat | 15 hours ago
https://github.com/mdn/content/pull/45479
chrismorgan | 4 hours ago
forgotmypw17 | 21 hours ago
OuterVale | 21 hours ago
forgotmypw17 | 15 hours ago
I am continuously in awe of the Web's decentralized and open nature that allows something like this to happen-- for one reasonably complex file/application to be compatible with 30 years of co-evolving client software written by many different developers and teams, much of it no longer supported.
101008 | 21 hours ago
rickcarlino | 20 hours ago
BorisMelnik | 18 hours ago
this is back when every single byte mattered and saving a few MB was the difference between a good user experience and a bad one.
for those that never used this, you would do something like
<img src="funnycats.jpg" usemap="#funnycats-map">
<!-- the map defines clickable zones --> <map name="funnycats-map"> <shape="rect" coords="34,44,270,350" href="cats.html"> </map>
most ppl used something like Dreamweaver but bad-asses would do their own coordinates.
gavinray | 18 hours ago
Why could you not have defined elements overlayed using high z index that were clickable, like invisible divs?
jgraham | 16 hours ago
Client side image maps and the script element were (AFAICT) both introduced in Netscape 2.
Even when scripting was introduced, you didn't necessarily have the ability to move elements around freely on the page. I think (but I'm not certain) that it wasn't until Netscape 4 era that you had enough layout primitives to implement the multi-layer positioning approach to custom clickable areas.
gavinray | 16 hours ago
matsemann | 15 hours ago
gavinray | 14 hours ago
cxr | 6 hours ago
1-more | 11 hours ago
deanebarker | 20 hours ago
myfonj | 20 hours ago
(It reminds me to finally gather and record remaining info about
that's missing in both documents…)[0] https://github.com/joshbuchea/HEAD/blob/master/DEPRECATED.md
OuterVale | 20 hours ago
Mention of usage by Yandex: https://yandex.com/support/webmaster/en/controlling-robot/me...
myfonj | 14 hours ago
dchest | 18 hours ago
myfonj | 14 hours ago
(As for external search engines,FWIR, in its heyday some search engines briefly regarded it quite respectfully, but eventually due to SEO spam they either started to ignore it, or took it as a negative signal, allegedly. But as pointed out in sibling comment, it still survives in Yandex, what is quite surprising plot twist for me.)
dchest | 13 hours ago
https://html.spec.whatwg.org/multipage/semantics.html#meta-k...
So, it's standardized and not deprecated.
It has this note though:
"Many search engines do not consider such keywords, because this feature has historically been used unreliably and even misleadingly as a way to spam search engine results in a way that is not helpful for users."
HTML 4.01 says the following:
"This specification does not define a set of legal meta data properties. The meaning of a property and the set of legal values for that property should be defined in a reference lexicon called a profile. For example, a profile designed to help search engines index documents might define properties such as "author", "copyright", "keywords", etc."
https://www.w3.org/TR/html4/struct/global.html#h-7.4.4
myfonj | 12 hours ago
Note to self: Apparently, I mentally froze around 2009, so I have some decades to catch on. It seems the breaking point was after 2009 Hixie's WONFIX for adding keywords [0], at a time when both `keywords` and `description` were both swept aside into "MetaExtensions" [1]. The turning point I clearly missed came in 2010 [2] and got resolved through [3].
[0] https://lists.w3.org/Archives/Public/public-html-bugzilla/20... [1] https://web.archive.org/web/20090205191845/http://wiki.whatw... [2] https://lists.w3.org/Archives/Public/public-html/2010Feb/016... [3] https://www.w3.org/Bugs/Public/show_bug.cgi?id=7525
graypegg | 15 hours ago
Like, it's really no big deal I guess. You were always going to find out this info from sources compiled by other people. But at least don't do the "I'll change some words and call it mine" high school essay plagiarism technique. There was clearly real research done here as well, it's not like it would've been that much harder to write it yourself.
Edit: LLM's used as a context-aware thesaurus called out here... https://vale.rocks/posts/ai-usage#:~:text=Apart%20from%20tho...
--- --- ---2d8a875f-39a2-4 | 20 hours ago
::facepalm emoji::
jszymborski | 20 hours ago
Also, an aside, but it's seldom these days that I see inspirational page design but this page is gorgeous.
derek_foreal | 19 hours ago
hk__2 | 19 hours ago
At least they were quite inspired for the naming.
werdnapk | 18 hours ago
testycool | 18 hours ago
duskwuff | 18 hours ago
Smart Tags was present in some beta versions of MSIE6, but was removed before release. The MSSmartTagsPreventParsing meta tag never did anything useful - by the time its use was widespread, the feature it controlled had already been killed.
BorisMelnik | 18 hours ago
samgranieri | 16 hours ago
I literally saw daily deals that were microsoft word files saved as HTML. Ugh.
dannyobrien | 15 hours ago
savolai | 15 hours ago
Rendello | 14 hours ago
If you're doing string matching via Casefold or NFKC_Casefold [a], characters from both the needle and the haystack are converted to lowercase (with exceptions for algorithm stability reasons) before being compared.
Why lower case and not upper case? Theoretically, the choice is arbitrary, but given the distribution of lower-case vs upper-case characters in most texts, you can use the fact that lower case occurs more often to optimize your algorithms by skipping the case conversion for most characters.
a: https://www.unicode.org/versions/Unicode17.0.0/core-spec/cha...