Microformats Wiki
microformats.org
microformats.org
One unfortunate side effect of things like Tailwind CSS is that some folks with a single-minded focus on looks are now using only the Tailwind class names, but you can do both. If before you'd have written something like class="video-thumbnail" and styled the content with a class selector in your CSS, but now you've adopted Tailwind and have excised all the descriptive class name from the content (rather than just rming your stylesheet and adding Tailwind classes to whatever class names are already there), then please put the descriptive class names back in! And if you have colleagues submitting patches that remove class names because you're migrating to Tailwind, tell them to use Tailwind classes in a way that adds to the classification instead of as a replacement for traditional, descriptive class names.
(A similar thing happens with CSS compilers. The autogenerated stuff served up on podcasts.google.com is nasty, for example.)
Of course, having well considered structured semantic works very well!
For instance, with images, you can use attached caption markup to describe an images purpose and reference it in the written body of the document.
You're better off using another attribute, e.g. some data-* attribute, for semantic information.
> […] authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.
[*]: https://html.spec.whatwg.org/multipage/dom.html#global-attri...
It's as easy as:
<img class="video-thumbnail w-24 h-24 rounded shadow"[...]
... instead of swapping out "video-thumbnail" class name with the Tailwind stuff (replacing it). They are not mutually exclusive.But describing the presentation of content isn't the sole purpose of the `class` attribute. Having meaningful domain-related names included in the class makes UI testing a lot easier.
You can, for example, use a `data-testid` attribute if the element can't be identified reliably with another attribute, such as the `id` or `role`.
As I said in my (earlier) response to you: using the "class" attribute for semantic, non-styling purpose is not "overloading" or misusing it. It is simply using it. (Just like the folks who developed CSS were able to get use out of element classes by baking tier-one support for them into their selector language. CSS has no claim to the right and proper use of an attribute that predates CSS.) To argue against this is revisionism.
The HTML5 data attributes also aren't a replacement for proper use of the class attribute, either. What the class attribute encodes (surprise) the class that the content belongs to. The data attribute payload encodes a particular value associated with a given key for a particular instance (e.g. the testid payload from your own example). And aside from the use cases being incomparable, the HTML spec says they shouldn't be used the way you're saying.
Accessibility help relies on using the correct, semantic tags, and when that is not possible, WAI-ARIA attribute hints.
You, like several others commenters seem to have an internalized belief (probably based on assumption/association?)* that content class names are a contribution of the CSS spec. (This is the only way to interpret your "overloading" remark.)
Just because you can use the classes in your CSS as selectors doesn't mean that classes are just a CSS "thing" (or whatever) and that doing something else with them is "overloading" them. That's silly. The class attribute is for, like, you know, specifying the class of the content.
* (This raises the question: Is the word "class" just an opaque token to people? They've never typed out the sequence 'c', 'l', 'a', 's', 's', '=' and pondered it at all? Or do they, but it's limited to something akin to, "If you want to put a border or something then you put 'class' here on the element and then you can CSS it. I dunno why they called it that, but that's what you write, and it lets you do the border later." What do they think of the fact that you can also create CSS selectors based on element ID? Are element IDs, then, another just-a-CSS-thing in their minds? Or what about that you can make selectors using the element name itself? Or that class selectors are not the default—if you want to use a class-based selector in a style rule, you actually have to escape from the default mode by using a leading dot to specify that what follows should be interpreted as a class name? If classes were strictly within the purview of CSS, shouldn't the class selector be the default...?)
Like, what is this additional data layer actually for? What humans or software use it?
I don't know. That's your word. You're the one who wrote it. I'm asking you.
> faking it with semi-semantic class names
Huh?
Even if that happens, I'm past 50/50 on the question of "is this even worthy of further engagement?" at this point. (It's pretty much at a 100% "no".)
Your original comment read to me like, "Here's how you can do something similar using CSS class names without using the microformats standards." My question was, why do either?
With microformats, at least it's supposed to be a machine-parseable standard for crawlers and the like. It never got much traction, and of the times I've used it, absolutely no measurable benefits (in terms of SEO or indexability) were seen at all.
With descriptive CSS class names you come up with yourself, not adhering to any standard, it seems even less likely that any crawler would be able to use them meaningfully. It's even less "semantic" than microdata or semantic HTML5 tags.
So my question was, what is the benefit of doing that? Are these class names just reminders for yourself, months later, so you can remember what a certain component was supposed to do? Or does it help your development/debugging/testing workflow somehow (such as being able to easily target widgets in the DOM for automated testing, perhaps?)
I wasn't trying to dismiss your comment, just trying to understand the value of putting in that effort. I'm sorry if it came across as flippant, there's just a lot that gets lost in online posts. Anyway, feel free to elaborate if you'd like, but if you just want to move on, that's totally fine too :)
Are you really suggesting that people should make Cascading Style Sheets do more than styling? We have literal entire specs for using correct attributes for accessibility and microformats. WAI, ARIA, and so on.
Furthermore, from the authors of Tailwind, Headless UIhttps://headlessui.com/ is a collection of fully unstyled logic components with their primary concern being accessibility (done correctly, with aforementioned attributes, not random class names). At no point have users or maintainers of Tailwind tried to steer people away from including accessibility or microdata in their designs.
This feels like an incredibly thinly veiled attack on Tailwind by the ever vocal anti-Tailwind interest group for something it shouldn't be doing anyway.
No. I'm talking about the class attribute, not style sheets. The single-minded minded Web developers with a focus only on styling that I mentioned seem to have formed the belief that class names are just "a CSS thing" (or something)—and that's the problem.
> At no point have users or maintainers of Tailwind tried to steer people away from including accessibility or microdata in their designs.
K. Who're you arguing with you here?
> This feels like an incredibly thinly veiled attack on Tailwind by the ever vocal anti-Tailwind interest group
Consider that leaping to conclusions like this indicates that you might be living in a bubble. (See "single-minded focus".) I'm not part of some rival frontend gang. I don't even exist in the milieu—the world is way bigger than visual designers doing Web work who spend their discretionary time talking about the trade.
Again with the attacks.
There is no evidence that eg Google uses arbitrary class names in order to index metadata over the accepted standards of microdata.
https://developers.google.com/search/docs/advanced/structure...
Given I know what microdata is, when to use it, and how it's different to CSS, I'm not sure what bubble this would be. Perhaps the one that is familiar with Google crawling?
> There is no evidence that eg Google uses arbitrary class names in order to[...]
Again: who are you arguing with? Every response you've written here has the quality of being written as if addressing someone or something that doesn't even appear in the discussion.
> I'm not sure what bubble this would be
The one that goes (roughly), "clearly I am addressing a fellow tradesperson who is biased against other factions, and therefore it is reasonable to declare this to be a thinly veiled attack that I have assumed it is". If you spend your time squabbling with colleagues (and/or trying to deflect attacks on Twitter[1]), and when you come across someone you immediately leap to the conclusion that they're working against you[1] on professional–ideological grounds, then there might be some bubble-backed paranoia at work.
I don't care about your opinionated in-trade squabbles. I don't occupy either "side" of the debate that you've tried to insert me into* any more than your aunts and uncles and grandparents do. (What are their thoughts on going with Tailwind versus not? I suppose they'll let you know when they get their first client for frontend work and it comes up—or even could come up—right? Me too. Until then...)
* and this is all not even to mention—as the other person who responded to you pointed out—that the position you attributed to me is completely opposite of what I actually wrote
I don't know why you don't remember you opened with that, but, after seeing attacks like "single minded", "bubbles", "professional ideological grounds", merely for telling you that in the real world people are not using CSS class names in the way you want them to be and are instead using microdata, I won't be engaging in this pointless debate further.
https://developers.google.com/search/docs/advanced/structure...
Congratulations on arriving at the realization that matches exactly what I wrote out in my first message. That you can include both was my entire thesis, dude!
That you missed that and feel that "single-minded"[1] is an attack[2] explains the conflict here. You're reading things out of comments that aren't actually written there[3] and failing to read out of them what actually is.
I'm glad that this exchange is over.
1. <https://en.wiktionary.org/wiki/single-minded>: Intensely focused and concentrated on purpose, thinking of only one goal, undistractable.
2. Are you perhaps mistaking it with "small-minded"?
3. That stuff, along with being able to "make a difference to search engines" mentioned, once again. Why? To reiterate—in response to what, exactly? Who are you arguing with?
The parent made no such suggestion. You seem to be conflating the purpose of HTML classes with CSS. Here's a note from the "literal entire spec"[0], which other commenters have already pointed out:
> […] authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.
Furthermore, the parent took great pains not to attack Tailwind, instead pointing out that the two different approaches could easily coexist.
If you'd like to use class names solely as CSS hooks, go right ahead, but citing "correct attributes" is ironic at best.
[0]: https://html.spec.whatwg.org/multipage/dom.html#global-attri...
https://developers.google.com/search/docs/advanced/structure...
There's no such thing. There are already detailed comments in this thread about this mixup.
What died out is attempts to do stuff with microformats via browser extensions. This was once a thing that e.g. MS did when they launched Edge. Those extensions have largely disappeared or just never really caught on.
Perhaps a better answer to that question is "the Fediverse", which is based on ActivityPub. Unfortunately, though, there still seem to be open questions about how well/widely the Fediverse supports something like "circles" (the concept that Google Plus had) for selectively sharing content with different groups of people.
Some of the work we did then still exists today in various forms. Activity Steams led to Activity Pub, which has seen far more adoption than we ever did.
And microformats are still widely used in some communities, though certainly not like it could have been, largely things to Google putting weight behind schema.org. For example, nearly all of the indieweb.org work is based around microformats at the core, with things like webmention, micropub, etc
My experience/opinion is that a circles-based approach is a usability nightmare since relationships are fluid and fuzzy, so Haven only has one "share group"--everyone with access to your Haven. That said, it's all built on open protocols (RSS), so it would be pretty straightforward for someone to fork it or build their own that implemented a circles-style approach to sharing.
[1]: https://havenweb.org
How would this help alleviate those problems?
[1] To this day. I've learned, from building a parser for my search engine, you can't just select the <title> tag if you want the title of a page. You need to select the title tag in the <head>-tag. Otherwise you'll get the title-tags people semi-regularly use in the body as well... Like not just hobbyists. Found a major American university that used title-tags to wrap navigational links.
Scraping recipes from the bbc, flight reservations from my email, etc. If something includes schema.org/RsvpAction it probably needs to be actioned, if something contains schema.org/DiscountOffer it can probably go in the Noise folder.
If someone starts sending spam containing flight reservation meta I'm going to be so sorely disappointed in the human race.
Plus if there wasn't TITLE in the head and is encountered inside BODY (not valid), it is adopted into the HEAD from document object model's perspective as if it was hoisted there (but it is not, just its value):
data:text/html;charset=utf-8,<head>
<!-- <title>not here</title> -->
</head>
<body bgcolor=dimgray>
<svg viewbox="0 -15 80 20" fill=cyan>
<title>SVG Tooltip</title>
<text>Some SVG<text>
</svg>
<title>Title For Adoption.</title>
<title>Second late title.</title>
<p>And the title is: »<output id=o></output>«.
<body onload="o.value = document.title">
<body text=snow>
Resulting paragraph reads: "And the title is: »Title For Adoption.«."("Yet unseen attributes" of the consecutive BODY tags are physically "hoisted" to real body node, but it's a different chapter.)
Plus both <head> / </head> tags are optional — and implied — so "selecting title in head tag" can become very hard task, if taken seriously.
Making HTML parser ain't easy.
Concerning HTML parsing in general: it is easy, genuinely easy, one of the easier things to implement, because it’s well-defined, and in a format that matches the implementation. You’re basically just translating the algorithm from pseudocode into code. Sure, it’s long, but it’s not hard.
<head> and </head> being optional is purely a parser concern, that the start and end tags are optional. Implement the parser, and you get that behaviour automatically, and nothing beyond that needs to worry about it at all.
For that matter, you don’t need to worry about head or body in determining the title, because here’s how the document title is actually determined, per https://html.spec.whatwg.org/multipage/dom.html#the-title-el...:
> The title element of a document is the first title element in the document (in tree order), if there is one, or null otherwise.
(And then it goes on to describe further processing done for the document.title attribute.)
The only subtlety in this explanation is that when it speaks of title elements, it’s speaking of HTML title elements only. There’s nothing complicated or difficult about this. There’s no adoption, it’s just taking the first HTML title anywhere in the document.
(If implementing this in browser JavaScript, you can’t just use document.querySelector("title") because it ignores namespaces. The most efficient way will be to use document.evaluate() with an XPath like "//title/text()" which matches the required child text content nodes.)
I was in fact responding to
> […] I've learned, from building a [HTML] parser […] you need to select the title tag in the <head>-tag.
what gave me impression OP really rolls his own HTML parser and relies on some possibly dangerous assumptions that are not in fact granted (however well defined) by the specs — for me one of such assumption is especially "HTML parsing is easy" / "I understand HTML well enough to parse it myself" — and wanted to point out possible further gotchas wrt "selecting the <head>-tag" (e.g. that it may be hard when there is no <head> tags) or that "selecting the first title tag" could possibly not give the right one.
But maybe I'm just little slow and all those "Idiosyncrasies of the HTML parser" [1] are notoriously known. And sure, many scenarios could be waved out as unimportant border-cases, maybe.
---
As for querying the document, i.e. having the state when the document is ready and "something" did the parsing and tree heavy lifting for us (so we have DOM and JS) we can surely reach for ancient namespaced
document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "title")[0]?.textContent?.trim()
(hopefully there are no further details wrt comments, white-space normalization and entity expansion on top of raw textContent we should take care of) but it makes very little sense when there is `document.title` for this exact purpose.---
For document.title: naturally in a browser you would use that; I intended to describe just how you would achieve it without that. And I completely forgot about document.getElementsByTagNameNS for some reason, which is of course more sensible than a querySelector + find. Note that .textContent.trim() doesn’t match the algorithm which is spelled out in the spec (just below the earlier link), on two counts. Firstly, all sequences of ASCII whitespace in the middle of the string need to be collapsed to a single space ("\r\n\f\t hello\r\n\f\t world\r\n\f\t " → "hello world"). Secondly, .textContent is insufficient, including the text content of element children as well, whereas the spec says child text content (with a link to the exact definition); HTML syntax can’t produce such elements (the parser switches into RCDATA state), but XML syntax can, as can DOM manipulation by scripting. Examples that are both titled “included” rather than the textContent “inclexcludeduded”:
data:application/xhtml+xml,<title xmlns="http://www.w3.org/1999/xhtml">incl<b>excluded</b>uded</title>
data:text/html,<title>incl</title><script>document.querySelector("title").append(b=document.createElement("b"),"uded"),b.append("excluded")</script>10-15 years ago, we had a bunch of different ways everyone was trying to schematize their data on the web, and since we never all agreed to just use one of them, everyone now uses fragments of all of them — and of other pseudo-proprietary systems — in their own unique ways.
Microformats: Still Relevant? - https://news.ycombinator.com/item?id=32285207 - July 2022 (1 comment)
Google confirms microformats are still a supported metadata format for content - https://news.ycombinator.com/item?id=22521666 - March 2020 (40 comments)
Ask HN: Is it worth it to implement HTML5 microformats? - https://news.ycombinator.com/item?id=14515178 - June 2017 (1 comment)
Microformats are easy to learn, and pay off well in SEO and mobile - https://news.ycombinator.com/item?id=4328853 - Aug 2012 (4 comments)
Ask HN: Micro-formats, are they still relevant/useful? - https://news.ycombinator.com/item?id=2702516 - June 2011 (2 comments)
Ask HN: Microformats - Still useful? - https://news.ycombinator.com/item?id=1747657 - Oct 2010 (5 comments)
Microformats.org at 5: Two Billion Pages With hCards - https://news.ycombinator.com/item?id=1583784 - Aug 2010 (1 comment)
Ask HN: Micro formats? Or, how to make my site's google link look good? - https://news.ycombinator.com/item?id=1224242 - March 2010 (3 comments)
Microformats: Boon or Bane? - https://news.ycombinator.com/item?id=987688 - Dec 2009 (5 comments)
Rest/ahah · Microformats Wiki - https://news.ycombinator.com/item?id=808251 - Sept 2009 (1 comment)
Google Announces Support for Microformats and RDFa - https://news.ycombinator.com/item?id=606126 - May 2009 (8 comments)
If the next "version" of the web is all about semantics, why aren't more people using microformats? - https://news.ycombinator.com/item?id=171818 - April 2008 (34 comments)
Consolidate and take back your social network with XFN, openID and microformats - https://news.ycombinator.com/item?id=29512 - June 2007 (5 comments)
[0] https://www.searchenginejournal.com/google-structured-data-p...
See https://html.spec.whatwg.org/multipage/dom.html#global-attri...
> authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.
Or could it be that the meaning here is that you should write descriptive classes such as 'alert-box' instead of 'red-box'.
The Web Data Commons project extracts all Microdata, JSON-LD, RDFa, and Microformats data from the Common Crawl web corpus