schemaorg VS WHATWG HTML Standard

itemscope itemtype="https://schema.org/Person"> itemprop="name">Scott Nath Work History itemprop="alumniOf" itemscope itemtype="https://schema.org/Organization"> itemprop="name">Company ABC itemprop="description">...company description... itemprop="employee" itemscope itemtype="https://schema.org/EmployeeRole"> itemprop="roleName">Software developer itemprop="description">...details about role... itemprop="alumniOf" itemscope itemtype="https://schema.org/Organization"> itemprop="name">Company Meow itemprop="employee" itemscope itemtype="https://schema.org/EmployeeRole"> itemprop="roleName">Sitting Volunteer History itemprop="alumniOf" itemscope itemtype="https://schema.org/Organization"> itemprop="name">Company 501c3 itemprop="employee" itemscope itemtype="https://schema.org/EmployeeRole"> itemprop="roleName">Software developer for free itemprop="description">...details about role...

I've been re-writing the HTML of my site and added structured data, in the form of microdata attributes, following the Schema.org vocabulary set. Structured data can be understood by search engines and other machines, giving your content structure and context.

Implementing Structured Data Markup annotation system, which can provide additional context about the content to search engines. Structured data markup such as Schema.org can be used to aid search engines to understand the content relevance and significance. This approach can help improve search results by improved ranking and visibility of the content.

export default async function Page({ params }) { const product = await getProduct(params.id); const jsonLd = { "@context": "https://schema.org", "@type": "Product", name: product.name, image: product.image, description: product.description, }; return ( {/* Add JSON-LD to your page */} {/* ... */} section> ); }

const Article = () => { // Dummy article data const article = { title: 'Sample Article Title', description: 'This is a sample article description.', datePublished: '2024-03-23', author: { "@type": "Person", "name": "John Doe" }, image: "https://via.placeholder.com/800x400", publisher: { "@type": "Organization", "name": "Sample News", "logo": { "@type": "ImageObject", "url": "https://via.placeholder.com/200x100" } }, mainEntityOfPage: { "@type": "WebPage", "@id": "https://www.example.com/article" } }; // Define the JsonLd component within the Article component const JsonLd = ({ data }) => ( ); return ( <div> <h1>{article.title}h1> <p>{article.description}p> <p>Date Published: {article.datePublished}p> <p>Author: {article.author.name}p> <img src={article.image} alt={article.title} /> {/* JSON-LD for Article */} <JsonLd data={{ "@context": "https://schema.org", "@type": "NewsArticle", "headline": article.title, "description": article.description, "datePublished": article.datePublished, "author": article.author, "image": [article.image], "publisher": article.publisher, "mainEntityOfPage": article.mainEntityOfPage }} /> div> ); }; export default Article;

itemscope itemtype="http://schema.org/Product"> itemprop="name">Product Name itemprop="description">Product Description itemprop="review" itemscope itemtype="http://schema.org/Review"> itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> itemprop="ratingValue">5 stars itemprop="author" itemscope itemtype="http://schema.org/Person"> itemprop="name">Author Name itemprop="datePublished">Date of Review itemprop="reviewBody">Review Body

You can use Schema.org to generate JSON-LD Schema for your website.

It’s also very much still a thing rebranded as Microdata. You can find examples on Schema.org, but now there are easier ways to share the same info; I prefer JSON-LD.

Schema.org provides a shared vocabulary that webmasters can use to mark up their pages in ways that can be understood by major search engines, including Google, Bing, Yahoo!, and Yandex.

WHAT-WG HTML

There's a long-standing WHATWG feature request open for it here: https://github.com/whatwg/html/issues/2791

And several userland custom element implementation, like https://www.npmjs.com/package//html-include-element

One of the cool things that you can do with client-side includes and shadow DOM is render the included HTML into a shadow root that has s, so that the child content of the include element is slotted into a shell implemented by the included HTML.

This lets you do things like have the main page be the pre-page content and the included HTML be a heavily cached site-wide shell, and then another per-user include with personalized HTML - all cached appropriately.

The `allow` attribute on iframes is a relatively recent API addition from 2017

https://github.com/whatwg/html/pull/3287

I think there's a pretty strong argument at this point for this kind of replacing DOM with a response behavior being part of the platform.

I think the first step would be an element that lets you load external content into the page declaratively. There's a spec issue open for this: https://github.com/whatwg/html/issues/2791

And my custom element implementation of the idea: https://www.npmjs.com/package/html-include-element

Then HTML could support these elements being targets of links.

> Consider https://www.ietf.org/rfc/rfc1866.txt vs https://html.spec.whatwg.org/multipage/

I thought, oh, that's not so bad. Then I realized what I was looking at was a 10 page index.

I'd love to see something like HTMX get standardized, but I'm extremely pessimistic for HTMX's prospects for standardization in HTML.

In talking to a few standards folks about it, they've all said, "oh, yeah, you want declarative AJAX; people have tried and failed to get that standardized for years." Even just trying to get

to target a section of the page that isn't an has been argued about and hashed out for years.<p>Why is that? Well, for example, here's the form you have to fill out to start standardizing a front-end feature. <a href="https://github.com/whatwg/html/issues/new?assignees=&labels=addition%2Fproposal%2Cneeds+implementer+interest&projects=&template=1-new-feature.yml">https://github.com/whatwg/html/issues/new?assignees=&labels=...</a><p>It asks three main questions:<p>* What problem are you trying to solve?

The issue with a single global event handler is discussed here: https://github.com/WICG/close-watcher#a-single-event

If you use popover="", you get the kind of functionality you're discussing for free. For

, the discussion is in progress and reaching a conclusion: https://github.com/whatwg/html/issues/9373