What does the html 'typeof' attribute do?

Question

I recently came across a question on SO in which typeof="foaf:person" was used as an attribute for an element. I Googled for it but this was the only relevant result. This fiddle too uses the typeof attribute. Would some one please explain me how and why this attribute is used?

Answer 1

In practical use, the typeof attribute is used in modern Content Management Systems to label content in a way decoupled from the implementation of the CMS backend. Loosely, "typeof" informs you of the type of a contenteditable object, "about" gives a unique identifier for that object, and "property" targets a specific feature of the object; in CMSs this can indicate a triple of (table / row / column), and can be mapped to (page / parent DOM object / specific child object).

As a concrete example, a page full of the recently popular "cards" UI would have a specific URI for the table where the cards came from, which also serves as an identifier that "these are card, load the card editing scripts"; each card would have its own "about" URI; each field that's editable has its own "property" to tell the editing script what kind of tools should be used to edit it (is it an image? rich text? etc.) as well as the target column (title, header, image, body, etc.).

This gives UIs and backends a common vocabulary for targeting RESTful objects. By giving type information to objects, editing tools are enabled without having to know more than that about the objects being edited; By giving "about" URIs, the REST endpoint managers at both ends can do CRUD on the objects without having to be tightly coupled to the editor.

There are many, many other ways that this information can be used, but this is one prevalent use of the "RDFa-light" attributes that has seen real-world application.

Answer 2

The wiki has an answer to it:

typeof – optional attribute that specifies the RDF type(s) of the subject or the partner resource (the resource that the metadata is about).

Answer 3

It's not a HTML attribute, it's RDF, an unrelated markup language, that happens to be usable as part of HTML or XHTML. It's used to specify more metadata to your data. One of the namespaces of RDF is FOAF (that's your foaf:person), described here - http://xmlns.com/foaf/spec/.

It's part of the "semantic web movement", which basically tries to include semantic information about the web data (the same way HTML5 added eg. the article tag). So by tagging eg. a span with your attribute, you're saying that the content of that span should be interpreted as a person, and by adding more attributes, you can tell that something is that person's name, or homepage etc. This allows for easy understanding of data, especially for machines, and removes some of the ambiguity.