Terence Eden’s Blog<p><strong>Class Warfare! Can I eliminate CSS classes from my HTML?</strong></p><p><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"><span class="invisible">https://</span><span class="ellipsis">shkspr.mobi/blog/2025/09/class</span><span class="invisible">-warfare-can-i-eliminate-css-classes-from-my-html/</span></a></p><p></p><p>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:</p><blockquote><p>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.</p></blockquote><p>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><span></code> elements for my liking - normally for accessibility or for supplementing the metadata.</p><p>Overall, my CSS contained about 134 rules which selected based on class. Is that a lot? It <em>feels</em> like a lot.</p><p>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."</p><p>But, on the other hand, <em>why</em> 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.</p><p>Classes are great for when you <em>reuse</em> 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.</p><p>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.</p><p>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 <em>need</em> 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>.</p><p>But this leads me on to another existential question.</p><p><strong>Are IDs necessary in modern HTML?</strong></p><p>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.</p><p>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.</p><p><strong>Trimming the fat</strong></p><p>Any 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.</p><p>The first CSS rule I changed was, as mentioned above:</p><pre><span class=""><span> CSS</span></span><code><span>time.commentmetadata </span>{ <span>float</span>: right;}</code></pre><p>Which became:</p><pre><span class=""><span> CSS</span></span><code><span>#comments time </span>{ <span>float</span>: right;}</code></pre><p>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.</p><p>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.</p><p>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 <em>how</em> they are meant to display. Does that co-mingle content and presentation too much?</p><p>Some of the WordPress default classes are ridiculous. The <code>body_class()</code> function injected this into every <code><body></code></p><p><code>"wp-singular post-template-default single single-post postid-62959 single-format-standard wp-theme-edent-wordpress-theme"</code></p><p>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.</p><p>Rather than targetting IDs or classes, I targetted the presence or absence of Schema.org microdata.</p><p>For example:</p><pre><span class=""><span> CSS</span></span><code><span>main[itemprop="blogPost"] </span>{ … }<span>main:not([itemprop="blogPost"]) </span>{ … }</code></pre><p>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></p><p>That can be replaced with:</p><pre><span class=""><span> CSS</span></span><code><span>/* Comment Author */</span>li[itemtype="<span>https</span>://schema.org/Comment"] > article > div[itemprop="<span>https</span>://schema.org/<span>author"] </span>{ <span>margin-bottom</span>: 0;}</code></pre><p>Is that <em>sensible</em>? It is more semantic, but feels a bit brittle.</p><p>Parent selector are also now a thing. If I want a paragraph to have centred text but <em>only</em> when there's a submit button inside it:</p><pre><span class=""><span> CSS</span></span><code><span>p:has(input#submit) </span>{ <span>text-align</span>: center;}</code></pre><p>Again, am I sure that my button will always be inside a paragraph?</p><p>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.</p><p><strong>What remains?</strong></p><p>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.</p><p>Image alignment was also heavily class based.</p><p>There are some accessibility things which are either hidden or exposed using classes.</p><p>A bunch of WordPress defaults use classes and, even if they are redundant, it's hard to exorcise them.</p><p>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.</p><p>All told, the changes I made were:</p><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><p>I have around 250 CSS rules, so now the majority target semantics rather than classes or IDs.</p><p><strong>Is this really necessary?</strong></p><p>No, of course not. This is an exercise in minimalism, creativity, and constraint. Feel free to litter your HTML with whatever attributes you want!</p><p>As I went through, it increasingly became apparent that I was fitting my CSS to my HTML's logical structure rather than to its <em>conceptual</em> structure.</p><p>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".</p><p>It is a delightful meditative exercise to go through your code and deeply consider whether something is unique, reusable, or obsolete.</p><p></p><p><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></p>
digitalcourage.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
Diese Instanz wird betrieben von Digitalcourage e.V. für die Allgemeinheit. Damit wir das nachhaltig tun können, erheben wir einen jährlichen Vorausbeitrag von 1€/Monat per SEPA-Lastschrifteinzug.
Administered by:
Server stats:
880active users
digitalcourage.social: About · Status · Profiles directory · Privacy policy
Mastodon: About · Get the app · Keyboard shortcuts · View source code · v4.4.8
#schemaorg
0 posts · 0 participants · 0 posts today
Timo Tijhof<p>You'd think Google, having launched schema.org, knows how to produce valid schema.org metadata and HTML5.</p><p>YouTube: How about a `<span>` inside the head, and `<link rel=alternative>` inside the body?</p><p>HTML5 parsers:<br>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.</p><p>Context:<br><a href="https://github.com/Ranchero-Software/NetNewsWire/issues/902#issuecomment-2990075755" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/Ranchero-Software/N</span><span class="invisible">etNewsWire/issues/902#issuecomment-2990075755</span></a></p><p><a href="https://fosstodon.org/tags/NetNewsWire" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>NetNewsWire</span></a> <a href="https://fosstodon.org/tags/WebStandards" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebStandards</span></a> <a href="https://fosstodon.org/tags/whatwg" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>whatwg</span></a> <a href="https://fosstodon.org/tags/HTML5" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML5</span></a> <a href="https://fosstodon.org/tags/schemaorg" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>schemaorg</span></a> <a href="https://fosstodon.org/tags/google" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>google</span></a></p>
Thomas Tursics<p><span class="h-card" translate="no"><a href="https://mastodon.social/@b2m" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>b2m</span></a></span> <span class="h-card" translate="no"><a href="https://norden.social/@datenschatz" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>datenschatz</span></a></span> der Musterdatenkatalog der Bertelsmann Stiftung hatte anfangs auch die <a href="https://toot.berlin/tags/GND" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>GND</span></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">#<span>GND</span></a> <a href="https://toot.berlin/tags/Wikidata" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Wikidata</span></a> <a href="https://toot.berlin/tags/SchemaORG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SchemaORG</span></a> <a href="https://toot.berlin/tags/EuroVoc" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>EuroVoc</span></a></p><p><a href="https://github.com/bertelsmannstift/Musterdatenkatalog-V4/blob/main/assets/skos_sample.png" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/bertelsmannstift/Mu</span><span class="invisible">sterdatenkatalog-V4/blob/main/assets/skos_sample.png</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Launches" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Launches</span></a><br>Introducing NLWeb · Bringing conversational interfaces directly to the web <a href="https://ilo.im/1642dj" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/1642dj</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Business" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Business</span></a> <a href="https://mastodon.social/tags/AI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AI</span></a> <a href="https://mastodon.social/tags/Website" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Website</span></a> <a href="https://mastodon.social/tags/Blog" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Blog</span></a> <a href="https://mastodon.social/tags/RSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>RSS</span></a> <a href="https://mastodon.social/tags/SchemaOrg" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SchemaOrg</span></a> <a href="https://mastodon.social/tags/SEO" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SEO</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/Backend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Backend</span></a></p>
Egon Willighagen<p>new 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"><span class="invisible">https://</span><span class="ellipsis">chem-bla-ics.linkedchemistry.i</span><span class="invisible">nfo/2025/02/13/beiltein-journal-has-bioschemas.html</span></a></p><p>"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."</p><p>replies to this post become blog comments.</p><p><a href="https://social.edu.nl/tags/chemistry" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>chemistry</span></a> <a href="https://social.edu.nl/tags/openscience" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>openscience</span></a> <a href="https://social.edu.nl/tags/schemaorg" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>schemaorg</span></a> <a href="https://social.edu.nl/tags/bioschemas" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>bioschemas</span></a> <a href="https://social.edu.nl/tags/ELIXIREurope" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ELIXIREurope</span></a></p>
KielKontrovers Blog<p><a href="https://norden.social/tags/OpenData" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>OpenData</span></a> - Die Bundeswahlleiterin</p><p><a href="https://www.bundeswahlleiterin.de/bundestagswahlen/2021/ergebnisse/opendata.html#0377c07f-ac3f-444f-96e7-51d0d26be214" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">bundeswahlleiterin.de/bundesta</span><span class="invisible">gswahlen/2021/ergebnisse/opendata.html#0377c07f-ac3f-444f-96e7-51d0d26be214</span></a> </p><p>> Werden die Ergebnisse auch als JSON-Feed bereitgestellt?</p><p>Nein, die Ergebnisse werden nicht im JSON-Format angeboten.</p><p>Hmpf. Ich fänds ja super sowas in <a href="https://norden.social/tags/Schemaorg" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Schemaorg</span></a> , aber da ist das leider noch nicht definiert. Aber ist das wirklich so schwer Wahlergebnisse als JSON auszuspielen?</p><p><span class="h-card" translate="no"><a href="https://norden.social/@MisterOpenData" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>MisterOpenData</span></a></span> </p><p><a href="https://norden.social/tags/BTW25" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>BTW25</span></a> <a href="https://norden.social/tags/Wahlergebnisse" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Wahlergebnisse</span></a> <a href="https://norden.social/tags/Bundestagswahl" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Bundestagswahl</span></a> <a href="https://norden.social/tags/Digitalisierung" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Digitalisierung</span></a></p>
Chris Müller 🌱<p>🚀 I released version 3.9.0 of my TYPO3 extension "schema" which provides an API and view helpers for schema.org markup.</p><p>The main feature is experimental support for enumeration types. Feedback is welcome.</p><p><a href="https://docs.typo3.org/p/brotkrueml/schema/3.9/en-us/Developer/Enumerations.html" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">docs.typo3.org/p/brotkrueml/sc</span><span class="invisible">hema/3.9/en-us/Developer/Enumerations.html</span></a></p><p><a href="https://phpc.social/tags/typo3" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>typo3</span></a> <a href="https://phpc.social/tags/schemaorg" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>schemaorg</span></a></p>
KielKontrovers Blog<p><span class="h-card" translate="no"><a href="https://norden.social/@MisterOpenData" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>MisterOpenData</span></a></span> leider noch kein Schema.org. Dann wäre es auch maschinenlesbar. Digicult hat da ja auch schon Erfahrungen. Man will ja nicht wirklich Schnittstellen immer neu programmieren müssen.</p><p><a href="https://norden.social/tags/schemaorg" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>schemaorg</span></a></p>
Tarnkappe.info<p>📬 Anonymität im Netz und SEO: Welche Daten sammelt Google wirklich?<br><a href="https://social.tchncs.de/tags/Empfehlungen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Empfehlungen</span></a> <a href="https://social.tchncs.de/tags/Gastartikel" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Gastartikel</span></a> <a href="https://social.tchncs.de/tags/ConsentManagementSystem" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ConsentManagementSystem</span></a> <a href="https://social.tchncs.de/tags/PlausibleAnalytics" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>PlausibleAnalytics</span></a> <a href="https://social.tchncs.de/tags/schemaorg" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>schemaorg</span></a> <a href="https://social.tchncs.de/tags/ServerSideTracking" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ServerSideTracking</span></a> <a href="https://social.tchncs.de/tags/Swisscowsemail" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Swisscowsemail</span></a> <a href="https://social.tchncs.de/tags/Teleguard" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Teleguard</span></a> <a href="https://sc.tarnkappe.info/53d947" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">sc.tarnkappe.info/53d947</span><span class="invisible"></span></a></p>
Yvo Brevoort<p>I'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.</p><p>Any tips? <a href="https://mastodon.social/tags/rdf" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>rdf</span></a> <a href="https://mastodon.social/tags/schemaorg" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>schemaorg</span></a> <a href="https://mastodon.social/tags/todomvc" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>todomvc</span></a></p>
KielKontrovers Blog<p><span class="h-card" translate="no"><a href="https://hutt.social/@jannis" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>jannis</span></a></span> 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"><span class="invisible">https://</span><span class="ellipsis">socal21.gitlab.io/socal21-docs</span><span class="invisible">/api/schemaorg/</span></a></p><p>Das Problem bei "jeder <br>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.</p><p><a href="https://norden.social/tags/SchemaOrg" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SchemaOrg</span></a> <a href="https://norden.social/tags/JSONLD" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JSONLD</span></a></p>
NFDI<p>We invite you to our next <a href="https://nfdi.social/tags/NFDITalk" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>NFDITalk</span></a>!</p><p>📖 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">#<span>NFDI</span></a><br>📅 18 March, 4 PM – Online<br>🎤 Speakers: Leyla Jael Castro (<span class="h-card"><a href="https://nfdi.social/@NFDI4DS" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>NFDI4DS</span></a></span>), Steffen Neumann (<span class="h-card"><a href="https://nfdi.social/@NFDI4Chem" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>NFDI4Chem</span></a></span>) and Gabriel Schneider (<span class="h-card"><a href="https://nfdi.social/@FAIRagro" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>FAIRagro</span></a></span>)</p><p>➡ Register to join the Zoom Meeting (includes discussion part):<br><a href="https://www.nfdi.de/talks/" rel="nofollow noopener" target="_blank"><span class="invisible">https://www.</span><span class="">nfdi.de/talks/</span><span class="invisible"></span></a></p><p>➡ Watch the YouTube stream: <a href="https://www.youtube.com/watch?v=AT8jlDbPR0A" rel="nofollow noopener" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">youtube.com/watch?v=AT8jlDbPR0</span><span class="invisible">A</span></a></p><p><a href="https://nfdi.social/tags/metadata" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>metadata</span></a> <a href="https://nfdi.social/tags/schemaorg" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>schemaorg</span></a> <a href="https://nfdi.social/tags/fdm" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>fdm</span></a> <a href="https://nfdi.social/tags/rdm" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>rdm</span></a> <a href="https://nfdi.social/tags/forschungsdaten" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>forschungsdaten</span></a></p>
Yohan Yukiya Sese Cuneta 사요한🦣<p>I started to create a new <a href="https://c.im/tags/HTML5" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML5</span></a> and <a href="https://c.im/tags/CSS4" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS4</span></a> boilerplate, mainly for my personal use. I'm aiming for the following:</p><p>1. <a href="https://c.im/tags/A11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>A11y</span></a> / <a href="https://c.im/tags/Accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Accessibility</span></a> support / <a href="https://c.im/tags/ARIA" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ARIA</span></a></p><p>Often forgotten. This time, it's deeply personal, it's now a must for me.</p><p>2. Avoid <a href="https://c.im/tags/IconFonts" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>IconFonts</span></a>, use <a href="https://c.im/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</span></a> instead.</p><p>Same as the first item, but deserves to be mentioned separately.</p><p>3. <a href="https://c.im/tags/Microformats" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Microformats</span></a> support</p><p>For <a href="https://c.im/tags/IndieWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>IndieWeb</span></a>, <a href="https://c.im/tags/Webmention" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Webmention</span></a>, <a href="https://c.im/tags/Fediverse" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Fediverse</span></a>, and related support.</p><p>4. Use the ‘rel’ attribute where appropriate</p><p>Same as those in the previous items.</p><p>5. Styling using style classes only. Not microformats classes, as those can be reused for other purposes.</p><p>I used to, and I also noticed others doing the same, use microformats classes for styling. And then just override it if the same microformat class is reused elsewhere. Makes everything confusing; and hard to track, especially if you're using someone else's theme/template/skin.</p><p>6. Avoid using advance CSS selectors as much as possible; without resorting to multiple styling classes.</p><p>Multiple classes, as well as, advance CSS selectors, can and do slow down rendering. It's easy to fall into this trap because it makes things easier. I'm guilty of it.</p><p>7. Drop deprecated stuff; and only use future-proof ones.</p><p>Like backwards compatibility with anything IE.</p><p>Also, many CSS resets are actually no longer needed.</p><p>8. Less JavaScript as possible.</p><p>If something can be done without scripts, use that method. Everything else is optional. The site should work with or without scripts.</p><p>Remember, we're creating a boilerplate that we can reuse. We build on top of it.</p><p>9. As semantic as possible.</p><p>For example, use “article”, “main”, “nav”, “aside”, “section”, where applicable, instead of “div” with a “role” and/or “id/class”.</p><p>We requested for those when HTML5 was being developed, but only few actually use it (especially blog templates).</p><p>10. BEM methodology</p><p>---</p><p>I hope those are everything worth applying in this journey.</p><p>Some notes:<br>* For <a href="https://c.im/tags/SchemaOrg" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SchemaOrg</span></a>, I prefer <a href="https://c.im/tags/JSON" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JSON</span></a> than embedding it in the HTML code through classes or itemprop.<br>* I understand there are a few with some of the goals I listed already implemented, but I prefer to learn along the way, not “how to use” this and that.</p><p><a href="https://c.im/tags/YourOnlyOne" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>YourOnlyOne</span></a></p>
Terence Eden<p>Hello <a href="https://mastodon.social/tags/SemanticWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SemanticWeb</span></a> & <a href="https://mastodon.social/tags/SchemaOrg" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SchemaOrg</span></a> people - I have a conundrum.</p><p>My blog posts' <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML</span></a> is, essentially:<br>```<br><main><br> <article itemprop="blogPost"><br> <header><br> <h1 itemprop="headline">…</h1><br> </header><br> <div itemprop="articleBody"><br> Content <br> …<br>```</p><p>Given that "div is the element of last resort" - what should I use instead?</p><p>It isn't a sub-<article> (and wouldn't have a separate heading).</p><p>The <header> isn't part of the articleBody (I think).</p><p>I guess it is a <section>?</p>
Kingsley Uyi Idehen<p>For many years I've observed the following in parallel:</p><p>1. General confusion (and in some cases disdain) about the notion of a <a href="https://mastodon.social/tags/SemanticWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SemanticWeb</span></a></p><p>2. Steadfast effort by a community to keep the vision going, stealthily, as exemplified by the <a href="https://mastodon.social/tags/LODCloud" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>LODCloud</span></a> (<a href="https://mastodon.social/tags/DBpedia" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DBpedia</span></a>,, <a href="https://mastodon.social/tags/Wikidata" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Wikidata</span></a>, <a href="https://mastodon.social/tags/Uniprot" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Uniprot</span></a> etc..) and Schema.org (<a href="https://mastodon.social/tags/SchemaOrg" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SchemaOrg</span></a>)</p><p>3. <a href="https://mastodon.social/tags/DataSilos" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DataSilos</span></a> and all the impedance they inflict on the agility of individuals and enterprises alike on the rise i.e., <a href="https://mastodon.social/tags/DataAccess" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DataAccess</span></a> and <a href="https://mastodon.social/tags/DataFlow" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DataFlow</span></a> are still challenging, unnecessarily.</p>
petersuber<p>Attention <a href="https://fediscience.org/tags/metadata" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>metadata</span></a> geeks: "GPT-4 generates a crosswalk between DataCite Schema and schema.org (type ResearchProject) schema."<br><a href="https://medium.com/@kj.garza/parrotgpt-on-the-advantages-of-large-language-models-tools-for-academic-metadata-schema-mapping-434cceabc68b" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">medium.com/@kj.garza/parrotgpt</span><span class="invisible">-on-the-advantages-of-large-language-models-tools-for-academic-metadata-schema-mapping-434cceabc68b</span></a></p><p><a href="https://fediscience.org/tags/AI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AI</span></a> <a href="https://fediscience.org/tags/DataCite" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DataCite</span></a> <a href="https://fediscience.org/tags/GPT4" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>GPT4</span></a> <a href="https://fediscience.org/tags/LLM" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>LLM</span></a> <a href="https://fediscience.org/tags/SchemaOrg" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SchemaOrg</span></a></p>
blub<p>Kochwiki sucht jemanden, der hilft das recipe-Schema.org in die Software einzubauen:<br><a href="https://www.kochwiki.org/index.php?title=Koch-Wiki_Diskussion:Maschinenraum#Recipe_schema.org.3F" rel="nofollow noopener" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">kochwiki.org/index.php?title=K</span><span class="invisible">och-Wiki_Diskussion:Maschinenraum#Recipe_schema.org.3F</span></a></p><p><a href="https://norden.social/tags/kochen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>kochen</span></a> <a href="https://norden.social/tags/mediawiki" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>mediawiki</span></a> <a href="https://norden.social/tags/php" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>php</span></a> <a href="https://norden.social/tags/wikis" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>wikis</span></a> <a href="https://norden.social/tags/schemaorg" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>schemaorg</span></a> <a href="https://norden.social/tags/semanticweb" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>semanticweb</span></a></p>
blub<p>Wünscht sich fürs <a href="https://norden.social/tags/kochwiki" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>kochwiki</span></a> nen Zugang, um <a href="https://norden.social/tags/semanticweb" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>semanticweb</span></a> nutzbar zu machen<br><a href="https://www.kochwiki.org/wiki/Koch-Wiki_Diskussion:Maschinenraum#Recipe_schema.org.3F" rel="nofollow noopener" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">kochwiki.org/wiki/Koch-Wiki_Di</span><span class="invisible">skussion:Maschinenraum#Recipe_schema.org.3F</span></a></p><p><a href="https://norden.social/tags/mediawiki" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>mediawiki</span></a> <a href="https://norden.social/tags/schemaorg" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>schemaorg</span></a> <a href="https://norden.social/tags/kochen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>kochen</span></a></p>
TrendingLive feeds
Mastodon is the best way to keep up with what's happening.
Follow anyone across the fediverse and see it all in chronological order. No algorithms, ads, or clickbait in sight.
Create accountLoginDrag & drop to upload