Embedding RDFa on Web Pages: John Samuel

This article is part of a series on Knowledge Representation and Semantic Web.

Embedding RDFa in HTML: An Introductory Tutorial

RDFa (Resource Description Framework in Attributes) is a W3C recommendation that allows web authors to embed structured metadata within HTML, XHTML, and other XML-based documents using standard HTML attributes. RDFa makes web content more understandable to machines, enabling better data interoperability, rich snippets in search engines, and integration into knowledge graphs.

RDFa Lite is a simplified subset of RDFa 1.1, designed for ease of use. It uses a minimal set of attributes: vocab, typeof, property, resource, and prefix (optional). These attributes can be added to existing HTML elements without altering the structure or appearance of the page.

Key RDFa Lite Attributes

vocab: Declares the vocabulary (namespace) used for properties and types (e.g., http://schema.org/).
typeof: Defines the type (class) of a resource (e.g., Person, CreativeWork).
property: Identifies a property of a resource (e.g., name, jobTitle).
resource: Assigns a unique URI or identifier to the subject being described.
prefix: (Optional) Provides shorthand aliases for vocabularies.

Example: Describing a Person Using RDFa

Here's a basic example of RDFa Lite embedded in HTML, using Schema.org vocabulary to describe a person:

                <!DOCTYPE html>
                <html lang="en">
                <head>
                  <title>RDFa Person Example</title>
                </head>
                <body vocab="http://schema.org/" typeof="Person">
                  <div property="name">John Samuel</div>
                  <div property="jobTitle">Researcher</div>
                  <div property="worksFor" typeof="Organization">
                    <span property="name">Company</span>
                  </div>
                  <div property="email">john.samuel@example.com</div>
                </body>
                </html>

In this example:

typeof="Person" declares that the subject is a person.
property="name", jobTitle, and email describe attributes of that person.
typeof="Organization" within worksFor denotes the employer's type.
The vocabulary used is Schema.org, specified with vocab.

Using RDFa for Web Annotations

RDFa can also be used to embed annotations in web pages, providing context or additional metadata about content sections. This is especially useful for linking to scholarly resources, tagging authorship, or marking dates.

                <div vocab="http://www.w3.org/ns/oa#" typeof="Annotation">
                  <span property="hasBody">This is an annotation for the content.</span>
                  <span property="annotatedBy" typeof="foaf:Person">John Samuel</span>
                  <span property="annotatedAt">2025-07-01</span>
                </div>

This example uses the Web Annotation Data Model vocabulary to define an annotation with text, creator, and timestamp.

Example: Describing a Creative Work

You can also use RDFa to annotate creative works such as blog posts, videos, or articles:

                <article vocab="http://schema.org/" typeof="CreativeWork">
                  <h2 property="headline">Understanding RDFa</h2>
                  <p>Written by <span property="author" typeof="Person">
                    <span property="name">John Samuel</span>
                  </span> on <time property="datePublished">2023-10-01</time>.</p>
                  <p property="description">
                    This article introduces RDFa and demonstrates how to use it to enhance semantic meaning in web pages.
                  </p>
                </article>

RDFa vs. JSON-LD vs. Microdata

While RDFa is one way to embed structured data into HTML, it's not the only one. Here's how it compares:

Format	Embedding Style	Ease of Use	Use Cases
RDFa	In-line, within HTML elements via attributes	Moderate	Scholarly content, annotations, mixed vocabularies
Microdata	In-line, HTML5 attribute-based (e.g., `itemprop`, `itemscope`)	Simple	Basic metadata, product listings
JSON-LD	Separate `<script type="application/ld+json">` block	High	Search engine optimization (Google), Schema.org, decoupled data

Each method has its strengths. RDFa is particularly well-suited for embedding metadata inline with visible content, especially when using mixed or complex vocabularies like Dublin Core, FOAF, or Open Annotation.

Conclusion

RDFa enhances the semantic richness of web content, making it more accessible and interoperable for search engines, digital libraries, and linked data applications. RDFa Lite, in particular, lowers the barrier for web developers to start publishing structured data directly within HTML pages.

By incorporating RDFa into web pages, it is possible to not only improve discoverability, but also contribute to the growing semantic web ecosystem, where data is connected, understandable, and reusable.

Embedding RDFa on Web Pages

John Samuel