#SchemaOrg

Terence Eden’s BlogClass Warfare! Can I eliminate CSS classes from my HTML?<a href="https://shkspr.mobi/blog/2025/09/class-warfare-can-i-eliminate-css-classes-from-my-html/" rel="nofollow noopener" translate="no" target="_blank">https://shkspr.mobi/blog/2025/09/class-warfare-can-i-eliminate-css-classes-from-my-html/</a>I recently read a brilliantly provocative blog post called "<a href="https://aaadaaam.com/notes/no-class/" rel="nofollow noopener" target="_blank">This website has no class</a>". In it, Adam Stoddard makes the case that you might not need CSS classes on a modern website:<blockquote>I think constraints lead to interesting, creative solutions […]. Instead of relying on built in elements a bit more, I decided to banish classes from my website completely.</blockquote>Long time readers will know that I'm a big fan of using semantic HTML where possible. If you peek beneath the curtain of this website you'll only see a handful of <code><div></code> elements (mostly because WordPress hardcodes them) - all the other blocks are fully semantic. Regrettably, there are rather too many <code></code> elements for my liking - normally for accessibility or for supplementing the metadata.Overall, my CSS contained about 134 rules which selected based on class. Is that a lot? It feels like a lot.On the one hand, classes are an easy way of splitting and grouping elements. Some <code><img></code>s should be displayed one way, the rest another. There's no semantic way to say "This is a hero image and should take up the full width, but this is an icon and should float discretely to the right."But, on the other hand, why do we need classes? Keith Cirkel's excellent post "<a href="https://www.keithcirkel.co.uk/css-classes-considered-harmful/" rel="nofollow noopener" target="_blank">CSS Classes considered harmful</a>" goes through their history and brings together some proposed solutions for replacing them. I think his idea of using <code>data-</code> attributes is a neat hack - but ultimately isn't much different from using classes. It's still a scrap of metadata to be tied into a style-sheet.Classes are great for when you reuse something. I have multiple <code><section></code> elements but most don't share anything in common with the others. So they probably oughtn't have classes.Removing classes has some advantages. It makes the HTML fractionally smaller, sure, but it also forces the author to think about the logical structure of their page and the semantics behind it.Looking through my HTML, lots of classes exist because of laziness. If I want to position all the <code><time></code> elements which are within a comment, I don't need to write <code><time class="whatever"></code> and to pair it with <code>.whatever { … }</code>. Instead, I can use modern CSS selectors and say <code>#comments time { … }</code>.But this leads me on to another existential question.Are IDs necessary in modern HTML?Mayyyyybe? I only have one <code><main></code> element, so an ID on there is unnecessary. <code><input></code> elements need IDs in order to be properly targetted by <code><label></code>s - but the label can wrap around the input. I have multiple <code><aside></code> elements because there's no semantic <code><widget></code> element, so they need unique IDs.In theory, as suggested by Adam above, I could use an <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements" rel="nofollow noopener" target="_blank">autonomous custom element</a> like <code><my-widget></code> - but that has none of the semantics and, frankly, feels like a bit of a cheat.Trimming the fatAny day where I can delete some code is a good day. This was an excellent exercise in going through (years) of HTML and CSS to see what cruft had built up.The first CSS rule I changed was, as mentioned above:<pre><code>time.commentmetadata { float: right;}</code></pre>Which became:<pre><code>#comments time { float: right;}</code></pre>Classless and slightly more brief. Is it more readable? Having the fact it was about the metadata in a class could have been slightly useful - but if I thought it would be confusing, I could stick a <code>/* comment */</code> in there.Next, I found <code><nav class="navigation posts-navigation"></code> - what a tautology! I have multiple <code><nav></code> elements, it is true. But none of them have the same style. So this swiftly became <code><nav id="posts-navigation"></code> with an accompanying CSS rewrite.My theme switcher had a bunch of <code><label class=button></code>s. They were all within a container with a unique ID, so could they be changed? Yes. But seeing the class name in the HTML is a good reminder to the author of how they are meant to display. Does that co-mingle content and presentation too much?Some of the WordPress default classes are ridiculous. The <code>body_class()</code> function injected this into every <code><body></code><code>"wp-singular post-template-default single single-post postid-62959 single-format-standard wp-theme-edent-wordpress-theme"</code>Most of that is redundant - what's the difference between single and single-post? For my purposes, nothing! So they were all yeeted into the sun.Rather than targetting IDs or classes, I targetted the presence or absence of Schema.org microdata.For example:<pre><code>main[itemprop="blogPost"] { … }main:not([itemprop="blogPost"]) { … }</code></pre>This can go to the extreme. I have lots of comments, each one has an author, the author's details are wrapped in <code><div class="authordetails">…</div></code>That can be replaced with:<pre><code>/* Comment Author */li[itemtype="https://schema.org/Comment"] > article > div[itemprop="https://schema.org/author"] { margin-bottom: 0;}</code></pre>Is that sensible? It is more semantic, but feels a bit brittle.Parent selector are also now a thing. If I want a paragraph to have centred text but only when there's a submit button inside it:<pre><code>p:has(input#submit) { text-align: center;}</code></pre>Again, am I sure that my button will always be inside a paragraph?Similarly, <a href="https://css-tricks.com/child-and-sibling-selectors/" rel="nofollow noopener" target="_blank">sibling selectors</a> are sometimes superior - but they do suppose that your layout never changes.What remains?There are some bits of this site which are reusable and do need classes. The code-highlighting you see above requires text to be wrapped in spans with specific classes.Image alignment was also heavily class based.There are some accessibility things which are either hidden or exposed using classes.A bunch of WordPress defaults use classes and, even if they are redundant, it's hard to exorcise them.As much as I would have liked to get rid of all my IDs, many needed to stay for linking as well as CSS targetting.All told, the changes I made were:<ul><li>134 class selectors down to about 65.</li><li>35 ID selectors up to about 50.</li><li>5 attribute selectors up to to about 20.</li><li>Deleted or combined a lot of redundant CSS and tidied up my markup considerably.</li></ul>I have around 250 CSS rules, so now the majority target semantics rather than classes or IDs.Is this really necessary?No, of course not. This is an exercise in minimalism, creativity, and constraint. Feel free to litter your HTML with whatever attributes you want!As I went through, it increasingly became apparent that I was fitting my CSS to my HTML's logical structure rather than to its conceptual structure.Previously, my comments were targetted with a class. Now they have the slightly more tangled targetting of "divs with this schema attribute whose parent is an article and whose grandparent has this ID".It is a delightful meditative exercise to go through your code and deeply consider whether something is unique, reusable, or obsolete.<a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/blog/" target="_blank">#blog</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/css/" target="_blank">#css</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/html/" target="_blank">#HTML</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/schema-org/" target="_blank">#schemaOrg</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/semantic-web/" target="_blank">#semanticWeb</a>

Terence Eden’s BlogAdding Semantic Reviews / Rich Snippets to your WordPress Site<a href="https://shkspr.mobi/blog/2020/07/adding-semantic-reviews-rich-snippets-to-your-wordpress-site/" rel="nofollow noopener" translate="no" target="_blank">https://shkspr.mobi/blog/2020/07/adding-semantic-reviews-rich-snippets-to-your-wordpress-site/</a>This is a real "scratch my own itch" post. I want to add <a href="https://schema.org/Review" rel="nofollow noopener" target="_blank">Schema.org semantic metadata</a> to the book reviews I write on my blog. This will enable "rich snippets" in search engines.There are loads of WordPress plugins which do this. But where's the fun in that?! So here's how I quickly built it into my <a href="https://gitlab.com/edent/blog-theme" rel="nofollow noopener" target="_blank">open source blog theme</a>.Screen optionsFirst, let's add some <a href="https://make.wordpress.org/support/user-manual/getting-to-know-wordpress/screen-options/" rel="nofollow noopener" target="_blank">screen options</a> to the WordPress editor screen.This is what it will look like when done:This is how to add a <a href="https://developer.wordpress.org/plugins/metadata/custom-meta-boxes/#adding-meta-boxes" rel="nofollow noopener" target="_blank">custom metabox</a> to the editor screen:<pre><code>// Place this in functions.php// Display the boxfunction edent_add_review_custom_box(){ $screens = ['post']; foreach ($screens as $screen) { add_meta_box( 'edent_review_box_id', // Unique ID 'Book Review Metadata', // Box title 'edent_review_box_html',// Content callback, must be of type callable $screen // Post type ); }}add_action('add_meta_boxes', 'edent_add_review_custom_box');</code></pre>The contents of the box are bog standard HTML<pre><code>// Place this in functions.php// HTML for the boxfunction edent_review_box_html($post){ $review_data = get_post_meta(get_the_ID(), "_edent_book_review_meta_key", true); echo "<table>"; $checked = ""; if ($review_data["review"] == "true") { $checked = "checked"; } echo "<tr><td><label for='edent_book_review'>Embed Book Review:</label></td><td><input type=checkbox id=edent_book_review name=edent_book_review[review] value=true {$checked}></tr>"; echo "<tr><td><label for='edent_rating'>Rating:</label></td><td><input type=range id=edent_rating name=edent_book_review[rating] min=0 max=5 step=0.5 value='". esc_html($review_data["rating"]) ."'></tr>"; echo "<tr><td><label for=edent_isbn >ISBN:</label></td><td><input name=edent_book_review[isbn] id=edent_isbn type=text value='" . esc_html($review_data["isbn"]) . "' autocomplete=off></tr>"; echo "</table>";}</code></pre>Done! We now have a box for metadata. That data will be <code>POST</code>ed every time the blogpost is saved. But where do the data go?Saving dataThis function is added every time the blogpost is saved. If the checkbox has been ticked, the metadata are saved to the database. If the checkbox is unticked, the metadata are deleted.<pre><code>// Place this in functions.php// Save the boxfunction edent_review_save_postdata($post_id){ if (array_key_exists('edent_book_review', $_POST)) { if ($_POST['edent_book_review']["review"] == "true") { update_post_meta( $post_id, '_edent_book_review_meta_key', $_POST['edent_book_review'] ); } else { delete_post_meta( $post_id, '_edent_book_review_meta_key' ); } }}add_action('save_post', 'edent_review_save_postdata');</code></pre>Nice! But how do we get the data back out again?Retrieving the dataWe can use the <a href="https://developer.wordpress.org/reference/functions/get_post_meta/" rel="nofollow noopener" target="_blank"><code>get_post_meta()</code> function</a> to get all the metadata associated with a blog entry. We can then turn it into a Schema.org structured metadata entry.<pre><code>function edent_book_review_display($post_id){ // https://developer.wordpress.org/reference/functions/the_meta/ $review_data = get_post_meta($post_id, "_edent_book_review_meta_key", true); if ($review_data["review"] == "true") { $blog_author_data = get_the_author_meta(); $schema_review = array ( '@context' => 'https://schema.org', '@type' => 'Review', 'author' => array ( '@type' => 'Person', 'name' => get_the_author_meta("user_firstname") . " " . get_the_author_meta("user_lastname"), 'sameAs' => array ( 0 => get_the_author_meta("user_url"), ), ), 'url' => get_permalink(), 'datePublished' => get_the_date('c'), 'publisher' => array ( '@type' => 'Organization', 'name' => get_bloginfo("name"), 'sameAs' => get_bloginfo("url"), ), 'description' => mb_substr(get_the_excerpt(), 0, 198), 'inLanguage' => get_bloginfo("language"), 'itemReviewed' => array ( '@type' => 'Book', 'name' => $review_data["title"], 'isbn' => $review_data["isbn"], 'sameAs' => $review_data["book_url"], 'author' => array ( '@type' => 'Person', 'name' => $review_data["author"], 'sameAs' => $review_data["author_url"], ), 'datePublished' => $review_data["book_date"], ), 'reviewRating' => array ( '@type' => 'Rating', 'worstRating' => 0, 'bestRating' => 5, 'ratingValue' => $review_data["rating"], ), 'thumbnailUrl' => get_the_post_thumbnail_url(), ); echo '<script type="application/ld+json">' . json_encode($schema_review) . '</script>'; echo "<div class='edent-review' style='clear:both;'>"; if (isset($review_data["rating"])) { echo ""; $full = floor($review_data["rating"]); $half = 0; if ($review_data["rating"] - $full == 0.5) { $half = 1; } $empty = 5 - $half - $full; for ($i=0; $i < $full ; $i++) { echo "★"; } if ($half == 1) { echo "⯪"; } for ($i=0; $i < $empty ; $i++) { echo "☆"; } echo ""; } echo "<ul>"; if ($review_data["amazon_url"] != "") { echo "<li><a href='{$review_data["amazon_url"]}'>Buy it on Amazon</a></li>"; } if ($review_data["author_url"] != "") { echo "<li><a href='{$review_data["author_url"]}'>Author's homepage</a></li>"; } if ($review_data["book_url"] != "") { echo "<li><a href='{$review_data["book_url"]}'>Publisher's details</a></li>"; } echo "</ul>"; } echo "</div>";}</code></pre>In <code>index.php</code>, after <code>the_content();</code> add:<pre><code>edent_book_review_display(get_the_ID());</code></pre>Then, on the website, it will look something like this:Note the use of the <a href="http://www.righto.com/2016/10/inspired-by-hn-comment-four-half-star.html" rel="nofollow noopener" target="_blank">Unicode Half Star</a> for the ratings.The source code of the site shows the output of the JSON LD:When run through a <a href="https://search.google.com/structured-data/testing-tool/u/0/" rel="nofollow noopener" target="_blank">Structured Data Testing Tool</a>, it shows as a valid review:And this means, when search engines access your blog, they will display rich snippets based on the semantic metadata.You can <a href="https://shkspr.mobi/blog/2020/06/review-the-house-of-shattered-wings-aliette-de-bodard/" rel="nofollow noopener" target="_blank">see the final blog post</a> to see how it works.ToDoMy code is horrible and hasn't been tested, validated, or sanitised. It's only for my own blog, and I'm unlikely to hack myself, but that needs fixing.I want to add review metadata for movies, games, and gadgets. That will either require multiple boxes, or a clever way to only show the necessary fields.<a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/metadata/" target="_blank">#metadata</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/php/" target="_blank">#php</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/schema-org/" target="_blank">#schemaOrg</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/wordpress/" target="_blank">#WordPress</a>

ljcLast week we had tons of amazing discussions on <a href="https://fosstodon.org/tags/metadata" class="mention hashtag" rel="nofollow noopener" target="_blank">#metadata</a> for <a href="https://fosstodon.org/tags/TrainingMaterials" class="mention hashtag" rel="nofollow noopener" target="_blank">#TrainingMaterials</a> <a href="https://fosstodon.org/tags/OER" class="mention hashtag" rel="nofollow noopener" target="_blank">#OER</a> during our <a href="https://nfdi.social/@NFDI" class="u-url mention" rel="nofollow noopener" target="_blank">@NFDI</a> <a href="https://fosstodon.org/tags/DiscoRSE" class="mention hashtag" rel="nofollow noopener" target="_blank">#DiscoRSE</a> <a href="https://fosstodon.org/tags/Quadriga" class="mention hashtag" rel="nofollow noopener" target="_blank">#Quadriga</a> <a href="https://fosstodon.org/tags/hackathon" class="mention hashtag" rel="nofollow noopener" target="_blank">#hackathon</a> at <a href="https://mastodon.social/@ZBMED" class="u-url mention" rel="nofollow noopener" target="_blank">@ZBMED</a> Thanks to all participants!We worked on crosswalks and mappings including <a href="https://fosstodon.org/tags/SchemaOrg" class="mention hashtag" rel="nofollow noopener" target="_blank">#SchemaOrg</a> <a href="https://fosstodon.org/tags/LearningResource" class="mention hashtag" rel="nofollow noopener" target="_blank">#LearningResource</a> <a href="https://openbiblio.social/@dini" class="u-url mention" rel="nofollow noopener" target="_blank">@dini</a> <a href="https://nfdi.social/@dalia" class="u-url mention" rel="nofollow noopener" target="_blank">@dalia</a> <a href="https://fosstodon.org/tags/Bioschemas" class="mention hashtag" rel="nofollow noopener" target="_blank">#Bioschemas</a> <a href="https://fosstodon.org/tags/AMB" class="mention hashtag" rel="nofollow noopener" target="_blank">#AMB</a> <a href="https://fosstodon.org/tags/Skills4EOSC" class="mention hashtag" rel="nofollow noopener" target="_blank">#Skills4EOSC</a>Results will be published in <a href="https://bird.makeup/users/zenodo_org" class="u-url mention" rel="nofollow noopener" target="_blank">@zenodo_org</a> Keep an eye to our updates on social media if you are interested in the topic.

Cord Wiljes“<a href="https://nfdi.social/tags/Metadata" class="mention hashtag" rel="nofollow noopener" target="_blank">#Metadata</a> is in the air, everywhere.”61 metadata experts from the <a href="https://nfdi.social/tags/NFDI" class="mention hashtag" rel="nofollow noopener" target="_blank">#NFDI</a> consortia met on June 25-27 at <a href="https://openbiblio.social/@tibhannover" class="u-url mention" rel="nofollow noopener" target="_blank">@tibhannover</a> Their goal was to prepare a NFDI recommendation on generic metadata schemas for research data. It was decided to adopt DataCite Metadata Schema (by <a href="https://openbiblio.social/@datacite" class="u-url mention" rel="nofollow noopener" target="_blank">@datacite</a>), <a href="https://nfdi.social/tags/DCAT" class="mention hashtag" rel="nofollow noopener" target="_blank">#DCAT</a> (by <a href="https://w3c.social/@w3c" class="u-url mention" rel="nofollow noopener" target="_blank">@w3c</a>) and <a href="https://nfdi.social/tags/schemaorg" class="mention hashtag" rel="nofollow noopener" target="_blank">#schemaorg</a>. Crosswalks, provided by RDA (<a href="https://mastodon.social/@resdatall" class="u-url mention" rel="nofollow noopener" target="_blank">@resdatall</a>), were investigated and fields classified as mandatory, recommended and optional. More info: <a href="https://www.nfdi.de/section-meta/task-force-metadata/?lang=en" rel="nofollow noopener" target="_blank">https://www.nfdi.de/section-meta/task-force-metadata/?lang=en</a> <a href="https://nfdi.social/@NFDI" class="u-url mention" rel="nofollow noopener" target="_blank">@NFDI</a> <a href="https://nfdi.social/tags/rdm" class="mention hashtag" rel="nofollow noopener" target="_blank">#rdm</a>

Terence Eden’s BlogAddressing the Overlooked Non-Micropsychiatric Uses for Thiotimoline<a href="https://shkspr.mobi/blog/2023/06/addressing-the-overlooked-non-micropsychiatric-uses-for-thiotimoline/" rel="nofollow noopener" translate="no" target="_blank">https://shkspr.mobi/blog/2023/06/addressing-the-overlooked-non-micropsychiatric-uses-for-thiotimoline/</a>One of the (many) problems with AI is that training data usually needs to come from "natural" sources. If you want to emulate human-written text, you need to train something on human-written text. But with the proliferation of cheap and fast AI tools, it is likely that training data will unwillingly become contaminated with AI-written text.In order to prevent the "Habsburg Jaw" effect, I think it would be helpful if publishers could semantically indicate that a work was written by AI. In this example, I'm using <a href="https://schema.org/Quotation" rel="nofollow noopener" target="_blank">Schema.org's Quotation type</a> to show that I'm quoting an AI, and explicitly set the author to ChatGPT.<pre><code> Author: OpenAI ChatGPT ...</code></pre>Is that sufficient to stop AIs from feeding on their own young? I don't know. I also don't know if this covers every possible use-case, or whether there are better ways to address this. I'd be interested in hearing your thoughts.Anyway, here's a letter to the editor of Nature written by ChatGPT. It took a little bit of prompt-engineering, but I'm rather pleased with how readily it took to the idea of inventing new uses for <a href="https://en.wikipedia.org/wiki/Thiotimoline" rel="nofollow noopener" target="_blank">Thiotimoline</a>. I especially like the way it has created obviously fictitious journals in its citations! This example is marked up so as to let robots know that it is a synthetic output. Author: OpenAI ChatGPT Dear Editor,I hope this letter finds you well. As a distinguished biologist who has been an avid reader of Nature for many years, I would like to draw attention to a concerning issue that I believe has inadvertently slipped through the cracks of the journal's otherwise comprehensive coverage of scientific advancements. It is with great disappointment that I note the persistent oversight of the non-micropsychiatric applications of Thiotimoline, an area of research that deserves proper recognition.Thiotimoline has generated considerable interest within the scientific community due to its unique temporal properties and hypothetical solubility characteristics.Contrary to popular belief, Thiotimoline's potential extends far beyond the realm of micropsychiatry. Researchers have explored various hypothetical applications in multiple disciplines, and it is disheartening to witness Nature's omission of these intriguing possibilities. Allow me to shed some light on the non-micropsychiatric uses of Thiotimoline that merit attention:<ul><li>Time-Dependent Chemical Reactions: Thiotimoline's purported ability to dissolve before it comes into contact with water presents fascinating prospects for studying time-dependent chemical reactions. By altering reaction kinetics and introducing temporal dimensions into experimental setups, Thiotimoline could revolutionize our understanding of reaction mechanisms and provide insights into complex chemical processes 0.</li><li>Temporal Pharmacokinetics: Thiotimoline's hypothetical solubility properties and unique temporal characteristics offer a potential breakthrough in drug delivery systems. Controlled-release formulations utilizing Thiotimoline could provide precise temporal dosing, ensuring optimal drug concentrations at critical intervals and improving therapeutic efficacy 1.</li><li>Time-Sensitive Analytical Chemistry: Thiotimoline's temporal properties have captivated analytical chemists, inspiring innovative methodologies in time-sensitive analysis. Researchers propose the use of Thiotimoline as a temporal indicator, enabling real-time monitoring of chemical reactions and facilitating rapid data acquisition in various analytical techniques 2.</li></ul>While the studies mentioned above are speculative, they demonstrate the conceptual potential of Thiotimoline as a catalyst for groundbreaking scientific exploration. By embracing the imaginative aspects of scientific inquiry, we can encourage innovative thinking and uncover unexpected insights that may guide future advancements.I implore Nature to devote some attention to these non-micropsychiatric uses of Thiotimoline. By acknowledging the imaginative scientific spirit that drives our quest for knowledge, the journal can foster interdisciplinary collaboration and inspire researchers to explore uncharted territories.Thank you for considering my concerns. I sincerely hope that Nature will continue to lead the scientific community by embracing the full spectrum of scientific endeavors.Yours faithfully, <ol start="0"><li>Hypothetical Research, Journal of Speculative Chemistry, vol. 123, no. 4, pp. 567-578, 20XX. ↩︎</li><li>Imaginary Drug Delivery Systems, Journal of Fictional Pharmacology, vol. 45, no. 2, pp. 211-223, 20XX. ↩︎</li><li>Exploring Time-Sensitive Analytical Techniques, Fictional Analytical Chemistry Review, vol. 67, no. 3, pp. 354-365, 20XX. ↩︎</li></ol> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/ai/" target="_blank">#AI</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/schema-org/" target="_blank">#schemaOrg</a>

Timo TijhofYou'd think Google, having launched schema.org, knows how to produce valid schema.org metadata and HTML5.YouTube: How about a `` inside the head, and `<link rel=alternative>` inside the body?HTML5 parsers: Thanks, I'll take that span as your implied end of `<head>`, and raise you an implied start of `<body>`. Everything that follows is now part of the body.Context: <a href="https://github.com/Ranchero-Software/NetNewsWire/issues/902#issuecomment-2990075755" rel="nofollow noopener" translate="no" target="_blank">https://github.com/Ranchero-Software/NetNewsWire/issues/902#issuecomment-2990075755</a><a href="https://fosstodon.org/tags/NetNewsWire" class="mention hashtag" rel="nofollow noopener" target="_blank">#NetNewsWire</a> <a href="https://fosstodon.org/tags/WebStandards" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebStandards</a> <a href="https://fosstodon.org/tags/whatwg" class="mention hashtag" rel="nofollow noopener" target="_blank">#whatwg</a> <a href="https://fosstodon.org/tags/HTML5" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML5</a> <a href="https://fosstodon.org/tags/schemaorg" class="mention hashtag" rel="nofollow noopener" target="_blank">#schemaorg</a> <a href="https://fosstodon.org/tags/google" class="mention hashtag" rel="nofollow noopener" target="_blank">#google</a>

Thomas Tursics<a href="https://mastodon.social/@b2m" class="u-url mention" rel="nofollow noopener" target="_blank">@b2m</a> <a href="https://norden.social/@datenschatz" class="u-url mention" rel="nofollow noopener" target="_blank">@datenschatz</a> der Musterdatenkatalog der Bertelsmann Stiftung hatte anfangs auch die <a href="https://toot.berlin/tags/GND" class="mention hashtag" rel="nofollow noopener" target="_blank">#GND</a> verlinkt. Beim letzten großen Update wurden einfach eine handvoll Links benutzt - für jeden sollte jetzt etwas dabei sein. <a href="https://toot.berlin/tags/GND" class="mention hashtag" rel="nofollow noopener" target="_blank">#GND</a> <a href="https://toot.berlin/tags/Wikidata" class="mention hashtag" rel="nofollow noopener" target="_blank">#Wikidata</a> <a href="https://toot.berlin/tags/SchemaORG" class="mention hashtag" rel="nofollow noopener" target="_blank">#SchemaORG</a> <a href="https://toot.berlin/tags/EuroVoc" class="mention hashtag" rel="nofollow noopener" target="_blank">#EuroVoc</a><a href="https://github.com/bertelsmannstift/Musterdatenkatalog-V4/blob/main/assets/skos_sample.png" rel="nofollow noopener" translate="no" target="_blank">https://github.com/bertelsmannstift/Musterdatenkatalog-V4/blob/main/assets/skos_sample.png</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Launches" class="mention hashtag" rel="nofollow noopener" target="_blank">#Launches</a> Introducing NLWeb · Bringing conversational interfaces directly to the web <a href="https://ilo.im/1642dj" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/1642dj</a>_____ <a href="https://mastodon.social/tags/Business" class="mention hashtag" rel="nofollow noopener" target="_blank">#Business</a> <a href="https://mastodon.social/tags/AI" class="mention hashtag" rel="nofollow noopener" target="_blank">#AI</a> <a href="https://mastodon.social/tags/Website" class="mention hashtag" rel="nofollow noopener" target="_blank">#Website</a> <a href="https://mastodon.social/tags/Blog" class="mention hashtag" rel="nofollow noopener" target="_blank">#Blog</a> <a href="https://mastodon.social/tags/RSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#RSS</a> <a href="https://mastodon.social/tags/SchemaOrg" class="mention hashtag" rel="nofollow noopener" target="_blank">#SchemaOrg</a> <a href="https://mastodon.social/tags/SEO" class="mention hashtag" rel="nofollow noopener" target="_blank">#SEO</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/Backend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Backend</a>

Egon Willighagennew blog: "Beilstein journals contain Bioschemas" <a href="https://chem-bla-ics.linkedchemistry.info/2025/02/13/beiltein-journal-has-bioschemas.html" rel="nofollow noopener" translate="no" target="_blank">https://chem-bla-ics.linkedchemistry.info/2025/02/13/beiltein-journal-has-bioschemas.html</a>"But this announcement is a new step. I like how validation of the chemical structures is part of the approach, and I like how they use the Bioschemas extention of schema.org. The last because they use two Bioschemas types/profiles that contributed to or initiated, respectively: MolecularEntity and ChemicalSubstance."replies to this post become blog comments.<a href="https://social.edu.nl/tags/chemistry" class="mention hashtag" rel="nofollow noopener" target="_blank">#chemistry</a> <a href="https://social.edu.nl/tags/openscience" class="mention hashtag" rel="nofollow noopener" target="_blank">#openscience</a> <a href="https://social.edu.nl/tags/schemaorg" class="mention hashtag" rel="nofollow noopener" target="_blank">#schemaorg</a> <a href="https://social.edu.nl/tags/bioschemas" class="mention hashtag" rel="nofollow noopener" target="_blank">#bioschemas</a> <a href="https://social.edu.nl/tags/ELIXIREurope" class="mention hashtag" rel="nofollow noopener" target="_blank">#ELIXIREurope</a>

Tarnkappe.info📬 Anonymität im Netz und SEO: Welche Daten sammelt Google wirklich? <a href="https://social.tchncs.de/tags/Empfehlungen" class="mention hashtag" rel="nofollow noopener" target="_blank">#Empfehlungen</a> <a href="https://social.tchncs.de/tags/Gastartikel" class="mention hashtag" rel="nofollow noopener" target="_blank">#Gastartikel</a> <a href="https://social.tchncs.de/tags/ConsentManagementSystem" class="mention hashtag" rel="nofollow noopener" target="_blank">#ConsentManagementSystem</a> <a href="https://social.tchncs.de/tags/PlausibleAnalytics" class="mention hashtag" rel="nofollow noopener" target="_blank">#PlausibleAnalytics</a> <a href="https://social.tchncs.de/tags/schemaorg" class="mention hashtag" rel="nofollow noopener" target="_blank">#schemaorg</a> <a href="https://social.tchncs.de/tags/ServerSideTracking" class="mention hashtag" rel="nofollow noopener" target="_blank">#ServerSideTracking</a> <a href="https://social.tchncs.de/tags/Swisscowsemail" class="mention hashtag" rel="nofollow noopener" target="_blank">#Swisscowsemail</a> <a href="https://social.tchncs.de/tags/Teleguard" class="mention hashtag" rel="nofollow noopener" target="_blank">#Teleguard</a> <a href="https://sc.tarnkappe.info/53d947" rel="nofollow noopener" translate="no" target="_blank">https://sc.tarnkappe.info/53d947</a>

\๏/egA standard metadata format based on Schema.org for publishing evidence of public participation in technical events: <a href="https://codeberg.org/dribdat/hackathon.json/src/branch/main/README.md" rel="nofollow noopener" translate="no" target="_blank">https://codeberg.org/dribdat/hackathon.json/src/branch/main/README.md</a> <a href="https://fosstodon.org/tags/hackathon" class="mention hashtag" rel="nofollow noopener" target="_blank">#hackathon</a> <a href="https://fosstodon.org/tags/schemaorg" class="mention hashtag" rel="nofollow noopener" target="_blank">#schemaorg</a>

Terence Eden’s BlogIs IPA furigana a bad idea? <a href="https://shkspr.mobi/blog/2024/10/is-ipa-furigana-a-bad-idea/" rel="nofollow noopener" target="_blank">https://shkspr.mobi/blog/2024/10/is-ipa-furigana-a-bad-idea/</a>My name is <ruby>Terence<rp>(</rp><rt>/ˈtɛɹəns</rt><rp>)</rp> Eden<rp>(</rp><rt>ˈiːdən/</rt><rp>)</rp></ruby>.Modern HTML allows the user to use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby" rel="nofollow noopener" target="_blank"><code><ruby></code></a> to annotate text.This is usually used for <a href="https://en.wikipedia.org/wiki/Furigana" rel="nofollow noopener" target="_blank">furigana</a> - which allows pronunciation to be placed above words.For example: "<ruby>シン・ゴジラ <rp>(</rp><rt>Shin Godzilla</rt><rp>)</rp></ruby>" shows you how to pronounce both words if you are unfamiliar with <a href="https://en.wikipedia.org/wiki/Kanji" rel="nofollow noopener" target="_blank">kanji</a>. The text can be any language or use any characters. In Japanese, it is quite often used to show phonetic pronunciation using <a href="https://en.wikipedia.org/wiki/Hiragana" rel="nofollow noopener" target="_blank">hiragana</a>.Because English is a <a href="https://www.reddit.com/r/linguistics/comments/anzy8o/the_common_saying_i_see_on_reddit_is_english_is_3/" rel="nofollow noopener" target="_blank">composite language</a>0, it isn't always easy for people to pronounce words1.So I have abused(?) the ruby syntax to show the <a href="https://en.wikipedia.org/wiki/International_Phonetic_Alphabet" rel="nofollow noopener" target="_blank">International Phonetic Alphabet</a> above the English words.Is this a good idea? Is it a valid use of the syntax? Is it semantically correct? I don't know. But I do now know that it is possible.I doubt the majority of people know the IPA, so it is of dubious use. It does make my name's pronunciation more apparent to machines.An alternative is to use <a href="https://schema.org" rel="nofollow noopener" target="_blank">Schema.org</a>. For example, my <a href="https://edent.tel" rel="nofollow noopener" target="_blank">contact page</a> has the following microdata:<pre><code><main itemscope itemtype="https://schema.org/Person"> <header itemprop="name"> <h1> Terence&nbsp; Eden <audio id="audioPlayer" src="Terence_Eden.mp3" itemscope itemprop="additionalType" itemtype="https://schema.org/PronounceableText"> <meta itemprop="phoneticText" content="/ˈtɛɹəns ˈiːdən/"> <meta itemprop="inLanguage" content="en-GB"> <meta itemprop="textValue" content="Terence Eden"> <meta itemprop="speechToTextMarkup" content="IPA"> </audio></code></pre>That allows humans to listen to the pronunciation of my name, and machines to see the IPA version.Is there a better, more accessible, more useful way of encoding how to pronounce text? <ol start="0"><li>Or a <a href="https://en.wikiquote.org/wiki/James_Nicoll" rel="nofollow noopener" target="_blank">mongrel language</a> ↩︎</li><li>Yes, I've seen that funny Tiktok. And that one. ↩︎</li></ol> <a href="https://shkspr.mobi/blog/2024/10/is-ipa-furigana-a-bad-idea/" rel="nofollow noopener" target="_blank">https://shkspr.mobi/blog/2024/10/is-ipa-furigana-a-bad-idea/</a><a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/html/" target="_blank">#HTML</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/metadata/" target="_blank">#metadata</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/schema-org/" target="_blank">#schemaOrg</a>

Terence Eden’s BlogWhat programming language is in this <code> block? <a href="https://shkspr.mobi/blog/2024/08/what-programming-language-is-in-this-code-block/" rel="nofollow noopener" target="_blank">https://shkspr.mobi/blog/2024/08/what-programming-language-is-in-this-code-block/</a>I'm a little bit obsessed with the idea of Semantic markup. I want the words that I write to be understood my humans and machines.Imagine this piece of code: <code>print( "Hello, world!" )</code>Is that code example written in Python? C++? Basic? Go? Perhaps you're familiar enough with every programming language to tell - but most people aren't. Wouldn't it be nice to give an indication of what programming language is used in an example?Here's how we might represent it in HTML:<pre><code><pre> <code> print( "Hello, world!" ) </code></pre></code></pre>How do we let the browser, search engines, and humans know what language that's written in? It might seem obvious to use the <code>lang</code> attribute, right? We're writing in a programming language, so just use <code><code lang="python"></code>. Sadly, the HTML specification disagrees.<blockquote>The lang attribute specifies the primary language for the element's contents and for any of the element's attributes that contain text. Its value must be a valid BCP 47 language tag, or the empty string. <a href="https://html.spec.whatwg.org/multipage/dom.html#attr-lang" rel="nofollow noopener" target="_blank">HTML Specification 3.2.6.2 The lang and xml:lang attributes</a> (emphasis added)</blockquote>That means it must be a human language like <code>en</code> or <code>en-GB</code>. No Klingon or Elvish - and certainly no computer languages!Does the specification give any clues about the <code><code></code> element?<blockquote>There is no formal way to indicate the language of computer code being marked up. Authors who wish to mark code elements with the language used, e.g. so that syntax highlighting scripts can use the right rules, can use the class attribute, e.g. by adding a class prefixed with "language-" to the element. <a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-code-element" rel="nofollow noopener" target="_blank">HTML Specification 4.5.15 The code element</a> (emphasis added)</blockquote>So we have to turn to our old friend Schema.org! There is a <a href="https://schema.org/SoftwareSourceCode" rel="nofollow noopener" target="_blank"><code>SoftwareSourceCode</code> type</a> which is used for exactly this case. Sadly, there is no example documentation because Google likes to start up a project but never quite finish it.Here's how to write a code snippet in HTML and have it semantically expose the programming language used:<pre><code><pre itemscope itemtype="https://schema.org/SoftwareSourceCode"> Python <meta itemprop="codeSampleType" content="Example"> <code itemprop="text"> print( "Hello, world!" ) </code></pre></code></pre>If you <a href="https://validator.schema.org/#url=https%3A%2F%2Fshkspr.mobi%2Fblog%2F2024%2F08%2Fwhat-programming-language-is-in-this-code-block%2F" rel="nofollow noopener" target="_blank">run that through the validator</a> you'll see what a computer sees:The <code>programmingLanguage</code> is a string - so you can write anything you like in there. You can optionally add a <code>codeSampleType</code> which, again, is a free-text field.The <code><meta></code> items are only viewable to machines. You could also them to the user if you wanted, using a <code></code> or other suitable element.AlternativesIt is possible to define <a href="https://www.rfc-editor.org/rfc/rfc5646#section-2.2.6" rel="nofollow noopener" target="_blank">private subtags of languages</a> for example <code>en-x-python</code> - which could mean "Comments written in English, using the private Python extension. Or even just <code>x-python</code>. That then leads on to how you describe a language - but while <a href="https://www.iana.org/assignments/media-types/application/vnd.acucobol" rel="nofollow noopener" target="_blank">COBOL has a MIME type</a> not all languages do. There are some unofficial ones like <a href="https://mimetype.io/text/x-python" rel="nofollow noopener" target="_blank"><code>text/x-python</code></a> though.But, of course, <a href="https://sonomu.club/@threedaymonk/112970802651966367" rel="nofollow noopener" target="_blank">programming languages aren't really languages</a> - so using <code>lang</code> probably isn't suitable.A <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes" rel="nofollow noopener" target="_blank"><code>data-</code> attribute</a> might also work. Adding <code>data-code="python"</code> would allow CSS to style specific code blocks. But data attributes are private to a page, and generally aren't standardised.I think this is a gap in the specification. I think there ought to be a <code>code-lang</code> attribute or similar. Perhaps something like:<pre><code><code code-lang="python;3.6"> print( "Hello, world!" )</code></code></pre>Which could allow authors to semantically give the name - and possibly version - of the programming language they are writing in.Thoughts?<a href="https://shkspr.mobi/blog/2024/08/what-programming-language-is-in-this-code-block/" rel="nofollow noopener" target="_blank">https://shkspr.mobi/blog/2024/08/what-programming-language-is-in-this-code-block/</a><a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/html/" target="_blank">#HTML</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/schema-org/" target="_blank">#schemaOrg</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/semantic-web/" target="_blank">#semanticWeb</a>

Yvo BrevoortI'm looking for an RDF schema for a Todo list, similar to what schema.org has for a lot of things. The options on schema.org seem incomplete for a TodoMVC implementation.Any tips? <a href="https://mastodon.social/tags/rdf" class="mention hashtag" rel="nofollow noopener" target="_blank">#rdf</a> <a href="https://mastodon.social/tags/schemaorg" class="mention hashtag" rel="nofollow noopener" target="_blank">#schemaorg</a> <a href="https://mastodon.social/tags/todomvc" class="mention hashtag" rel="nofollow noopener" target="_blank">#todomvc</a>

KielKontrovers Blog<a href="https://hutt.social/@jannis" class="u-url mention" rel="nofollow noopener" target="_blank">@jannis</a> für JSON am besten JSON-LD/ Schema.org. Das ist ein guter Standard, den zB inzwischen auch Touristiker nutzen. Ich hatte den als Standard im Soziokultur-Kalender in SH verwendet <a href="https://socal21.gitlab.io/socal21-docs/api/schemaorg/" rel="nofollow noopener" translate="no" target="_blank">https://socal21.gitlab.io/socal21-docs/api/schemaorg/</a>Das Problem bei "jeder macht sein eigenes JSON" ist ja immer, dass man für jeden Feed wieder Anpassungen vornehmen muss. Und der Standard geht recht weit für Spezialfälle.<a href="https://norden.social/tags/SchemaOrg" class="mention hashtag" rel="nofollow noopener" target="_blank">#SchemaOrg</a> <a href="https://norden.social/tags/JSONLD" class="mention hashtag" rel="nofollow noopener" target="_blank">#JSONLD</a>

NFDIWe invite you to our next <a href="https://nfdi.social/tags/NFDITalk" class="mention hashtag" rel="nofollow noopener" target="_blank">#NFDITalk</a>!📖 SchemaOrg and JSON-LD for Rich Metadata Integration in the <a href="https://nfdi.social/tags/NFDI" class="mention hashtag" rel="nofollow noopener" target="_blank">#NFDI</a> 📅 18 March, 4 PM – Online 🎤 Speakers: Leyla Jael Castro (<a href="https://nfdi.social/@NFDI4DS" class="u-url mention" rel="nofollow noopener" target="_blank">@NFDI4DS</a>), Steffen Neumann (<a href="https://nfdi.social/@NFDI4Chem" class="u-url mention" rel="nofollow noopener" target="_blank">@NFDI4Chem</a>) and Gabriel Schneider (<a href="https://nfdi.social/@FAIRagro" class="u-url mention" rel="nofollow noopener" target="_blank">@FAIRagro</a>)➡ Register to join the Zoom Meeting (includes discussion part): <a href="https://www.nfdi.de/talks/" rel="nofollow noopener" target="_blank">https://www.nfdi.de/talks/</a>➡ Watch the YouTube stream: <a href="https://www.youtube.com/watch?v=AT8jlDbPR0A" rel="nofollow noopener" target="_blank">https://www.youtube.com/watch?v=AT8jlDbPR0A</a><a href="https://nfdi.social/tags/metadata" class="mention hashtag" rel="nofollow noopener" target="_blank">#metadata</a> <a href="https://nfdi.social/tags/schemaorg" class="mention hashtag" rel="nofollow noopener" target="_blank">#schemaorg</a> <a href="https://nfdi.social/tags/fdm" class="mention hashtag" rel="nofollow noopener" target="_blank">#fdm</a> <a href="https://nfdi.social/tags/rdm" class="mention hashtag" rel="nofollow noopener" target="_blank">#rdm</a> <a href="https://nfdi.social/tags/forschungsdaten" class="mention hashtag" rel="nofollow noopener" target="_blank">#forschungsdaten</a>

Angelo Veltens 🏳️‍🌈Companies are unfortunately using <a href="https://social.veltens.org/tags/JSON" class="mention hashtag" rel="nofollow noopener" target="_blank">#JSON</a>-LD only on public pages to improve their SEO. How cool would it be to actually have a <a href="https://social.veltens.org/tags/schemaorg" class="mention hashtag" rel="nofollow noopener" target="_blank">#schemaorg</a> Order embedded on your order details page, ready to store it on your <a href="https://social.veltens.org/tags/Solid" class="mention hashtag" rel="nofollow noopener" target="_blank">#Solid</a> Pod. You could build up your own order history that stretches over all the shops you have been using

Recent searches

Search options

Administered by:

Server stats: