i am building a plugin for tinymce editor which adds some microdata to selected text, and i want to make sure the final markup will be valid. as specified by the draft microdata spec, a new item is indicated by adding the attribute itemscope to an element, for example:
<section itemscope itemtype="http://example.com/vocab/someobject" itemid="someid" >
<meta itemprop="topic" content="something very interesting" />
....
other microdata stuff
</section>
i have extended the configuration parameters of tinymce to recognize these microdata attributes:
tinyMCE.init({
...
schema: "html5",
extended_valid_elements:"#[itemscope|itemtype|itemid|itemprop|content],div,span,time[datetime]"
...
});
and things are generally working. however, when i use the plugin, tiny mce is still "correcting" my markup by adding an empty value to the itemscope attribute, like so: itemscope="". but the itemscope attribute is a boolean element, which AFAIU means that it should have no value.
so the question is, a) is it still valid markup if the itemscope attribute has a value? and b) if not, (how) can i configure tinymce to leave itemscope as a proper boolean attribute, and not append the ="" bit?
thanks!
The value of a boolean attribute must either be the empty string, or the name of the attribute itself. So, <div itemscope>, <div itemscope="">, and <div itemscope="itemscope"> are all equivalent.
Related
Based on the Microdata example in http://schema.org/HowTo and extrapolating syntax from the Microdata vs RDFa example in http://schema.org/hasOfferCatalog (there seem to be so few actual examples of RDFa to find?), I put together something like so:
<main vocab="http://schema.org/" typeof="HowTo">
<h1><span property="name">How to do the Hokey Pokey</span></h1>
<ol property="steps">
<li property="itemListElement" typeof="HowToStep">
<img alt="step 1" src="step1.jpg" align="left">
<p property="itemListElement" typeof="HowToDirection">
put your left hand in</p></li>
<li property="itemListElement" typeof="HowToStep">
<img alt="step 2" src="step2.jpg" align="left">
<p property="itemListElement" typeof="HowToDirection">
put your left hand out</p></li>
But, when put into Google's Structured Data Testing Tool, I get:
The property itemListElement is not recognized by Google for an object of type HowTo.
Yandex's validator also says:
WARNING: http://schema.org/itemListElement field not specified in http://schema.org/HowTo
What am I doing wrong?
You missed to specify the HowToSection (or HowToStep) type as value for the steps property.
The Microdata example uses:
<div id="steps" itemprop="steps" itemscope itemtype="http://schema.org/HowToSection">
The equivalent RDFa would be:
<div id="steps" property="steps" typeof="HowToSection">
If you aren’t providing an ItemList/CreativeWork value for the steps property, you are providing a Text value (this is what you are doing in your example markup). But you can’t add properties (like itemListElement) to a Text value.
Like many sites, we deliver a lot of imagery on our web site.
Use case: set up labels/refinements in Google Custom Search that aggregate and filter two different classes of image objects. Using Schema.org Microdata markup is very easy and works great, but we want the user to select either
1) PHOTOS: a "photo" is taken by with an instrument -- some kind of camera/lens "machine" that comprises something from "real life"
OR
2) ART: all other images that are creative works by an illustrator/artist: vector art, scans of drawings, scans of paintings, water colors etc.
I can easily determine which is which as our web CMS gets metadata from the database, and drives the content through the pipe and fork dynamic insertion of metadata. Something like
<section class="page-content" role="main" itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
<meta itemprop="image" content="Red Roses" /> #art
and toggle to this if it were a photo
"itemprop="photo" content="Daffodils" # photo
But this is really not doing the job. I would expect to have some property like "imageType" that I could then apply like this
itemprop="imageType" content="photo"
itemprop="imageType" content="art"
But I don't see anything that meets this requirement in Schema.org (my eyes are bleeding from reviewing the hierarchy and still can't find what I need). There is nothing to designate "art" as such.
Any ideas?
I don’t know which features Google Custom Search supports,
but you have the following options with Schema.org and Microdata.
Unless you have to implement it right now, I recommend option b).
a) Propose new Schema.org types/properties
See my answer to another question for links.
b) Wait for an appropriate Schema.org type/property
The next Schema.org release will contain the type VisualArtwork (draft):
A work of art that is primarily visual in character.
It has an artform property (draft) that takes text or an URL as value:
e.g. Painting, Drawing, Sculpture, Print, Photograph, Assemblage, Collage, etc.
Caution notice: these are drafts, subject to change!
Update: VisualArtwork and artform got released.
<div itemscope itemtype="http://schema.org/VisualArtwork">
<meta itemprop="artform" content="Painting">
</div>
<div itemscope itemtype="http://schema.org/VisualArtwork">
<meta itemprop="artform" content="Photo">
</div>
c) Use Schema.org’s extension mechanism
The "slash-based" extension mechanism is "outdated", but valid.
<div itemscope itemtype="http://schema.org/ImageObject/Photo"></div>
<div itemscope itemtype="http://schema.org/ImageObject/Art"></div>
I would only use this as a last resort.
d) Use an additional Schema.org type
This does not work for most cases, but it’s possible in your case: Both of your images are ImageObject, and only the photos are Photograph in addition.
The itemtype attribute can have several values as long as they are from the same vocabulary. But note that you could only use properties that are defined for all of the used types.
<div itemscope itemtype="http://schema.org/ImageObject">
<!-- art -->
</div>
<div itemscope itemtype="http://schema.org/ImageObject http://schema.org/Photograph">
<!-- photo -->
</div>
e) Use a type/property from a different vocabulary
If you know/find a vocabulary about your subject/model, you can use the corresponding types as value for Schema.org’s additionalType property:
<section itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="additionalType" href="http://example.com/vocabulary/photo">
</section>
<section itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="additionalType" href="http://example.com/vocabulary/art">
</section>
If you find a suitable property, you may use its URL as value for itemprop:
<section itemscope itemtype="http://schema.org/ImageObject">
<meta itemprop="http://example.com/vocabulary/imageType" content="photo">
</section>
<section itemscope itemtype="http://schema.org/ImageObject">
<meta itemprop="http://example.com/vocabulary/imageType" content="art">
</section>
f) Use your own proprietary property
If you don’t find a suitable vocabulary, you can use your own URL as property:
[…] a proprietary item property name (i.e. one used by the author for private purposes, not defined in a public specification)
(Example like the second one in b).)
#unor
My developer told me (talking to him after I posted this) we can use (to avoid adding another meta line to the document):
<section itemscope itemtype="http://schema.org/ImageObject"> # for art
<section itemscope itemtype="http://schema.org/Photo"> # for photography
From tests I see that Google will actually parse this: its structured data previewer show it is being extracted. (though it's structured data preview may throw an error). As such I could use it in a custom search refinement/label.
But, it seems wrong to me from the schema.org standard -- since both classes of
images:(photos),(paintings,drawings,vector)
are all "ImageObjects"
According to the documentation (http://schema.org/Thing), the item type Thing cannot include a Place.
The users will be asked to add content that does not have a specific type, therefore everything falls back to Thing. So, suppose the following example. This is want I would like to have, but seems to be invalid. Is there a workaround to fix it?
<div itemscope itemtype="http://schema.org/Thing">
<span itemprop="name">Eiffel Tower</span>
<span itemprop="description">Sample description</span>
<div itemscope itemtype="http://schema.org/Place">
<div itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Sample address</span>
</div>
</div>
</div>
Your example snippet is valid.
Simply nesting elements with itemscope/itemtype has no effect on the parsed Microdata. You have to use the itemprop attribute if you want to associate/relate the items.
So in your example, you have three items (Thing, Place, PostalAddress) which are not related in any way.
If your question is, "Has Thing a property which allows a value of Place?", the answer is no, there is no such property.
The best solution would be to have the user choose what "type" of thing they are submitting and map those to schema.org types.
E.g. if you had a drop-down list on the form they use to submit listing "CD", "Event", "Place", etc. and use the value from that form field to set the value of the main itemtype.
I've been experimenting with Google Schema and I've looked at a few code generators and they vary in design. The link I'm using for info for these examples: http://schema.org/Book
1) When is it proper to use itemscope itemtype="someSchemeURL.org" or an actual href?
Example:
<div itemprop="author" itemscope itemtype="http://schema.org/Person">
or
<div itemprop="bookFormat" href="http://schema.org/bookFormatType">
The second example isn't even valid HTML since the href attribute isn't accepted on a div.
2) For the example above, is the first column always an itemprop and the second column always the itemscope itemtype?
3) If there is no itemscope itemtype specified, does the itemprop default to the parent itemscope itemtype?
Example:
<div itemscope itemtype="http://schema.org/Book">
<div class="book" itemprop="name"></div>
<div itemprop="author" itemscope itemtype="http://shema.org/Person">
<div class="author" itemprop="name"></div>
</div>
</div>
The .author class will result in the name attributed to "author"
The .book class will result in the name attributed to "book"
So this would mean that although multiple itemprop's have the same name, the itemprop always applies to the parent element, correct?
4) Where is it specified when to use meta, link, span, or div? Or is this left up to preference?
Example:
<div>
<meta itemprop="datePublished" content="2013-07-01">
Some text
</div>
<div>
Some text
<link itemprop="bookFormat" href="http://schema.org/bookFormatType">Ebook
</div>
The second example is invalid, I know, but it's an example from one of the code generators. That specific generator produces invalid code so I know not to use it, but where are they getting their idea to use a link tag (albeit incorrectly)?
These docs can answer almost all of your questions. Maybe you've already seen them but just in case.
Microdata Spec
Getting Started Tutorial at Schema.org
So answers for your questions in order they appear:
1.The first one is correct. The official microdata spec tells us
Microdata is most useful, though, when it is used in contexts where
other authors and readers are able to cooperate to make new uses of
the markup.
For this purpose, it is necessary to give each item a type, such as
"http://example.com/person", or "http://example.org/cat", or
"http://band.example.net/". Types are identified as URLs.
The type for an item is given as the value of an itemtype attribute on
the same element as the itemscope attribute.
Example
<section itemscope itemtype="http://example.org/animals#cat">
<h1 itemprop="name">Hedral</h1>
<p itemprop="desc">Hedral is a male american domestic
shorthair, with a fluffy black fur with white paws and belly.</p>
<img itemprop="img" src="hedral.jpeg" alt="" title="Hedral, age 18 months">
</section>
2.No. Itemprop is used to indicate property of some entity. Itemscope - entity scope. And itemtype - type of the entity. These are different tags with different meaning which can be used separately (at least in theory). What doc says:
At a high level, microdata consists of a group of name-value pairs.
The groups are called items, and each name-value pair is a property.
Items and properties are represented by regular elements.
To create an item, the itemscope attribute is used.
To add a property to an item, the itemprop attribute is used on one of
the item's descendants.
And examples
<div itemscope>
<p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>
<div itemscope>
<p>My name is <span itemprop="name">Daniel</span>.</p>
</div>
3.Even when itemscope itemtype are specified along with itemprop it is still property of the parent type. In this case this property is entity itself. And you're correct with your example: names will go to different entities. Here is what doc says about processing properties.
The property value of a name-value pair added by an element with an
itemprop attribute is as given for the first matching case in the
following list:
If the element also has an itemscope attribute The value is the item
created by the element.
If the element is a meta element The value is the value of the
element's content attribute, if any, or the empty string if there is
no such attribute.
If the element is an audio, embed, iframe, img, source, track, or
video element The value is the absolute URL that results from
resolving the value of the element's src attribute relative to the
element at the time the attribute is set, or the empty string if there
is no such attribute or if resolving it results in an error.
If the element is an a, area, or link element The value is the
absolute URL that results from resolving the value of the element's
href attribute relative to the element at the time the attribute is
set, or the empty string if there is no such attribute or if resolving
it results in an error.
If the element is an object element The value is the absolute URL that
results from resolving the value of the element's data attribute
relative to the element at the time the attribute is set, or the empty
string if there is no such attribute or if resolving it results in an
error.
If the element is a data element The value is the value of the
element's value attribute, if it has one, or the empty string
otherwise.
If the element is a time element The value is the element's datetime
value.
Otherwise The value is the element's textContent.
The URL property elements are the a, area, audio, embed, iframe, img,
link, object, source, track, and video elements.
4.Left up to preference. There is general advice from search engines - markup consumers
However, as a general rule, you should mark up only the content that
is visible to people who visit the web page and not content in hidden
div's or other hidden page elements.
Schema.org doc gives good overview when usage of hidden elements may make sense.
Many pages can be described using only the itemscope, itemtype, and
itemprop attributes (described in section 1) along with the types and
properties defined on schema.org (described in section 2). However,
sometimes an item property is difficult for a machine to understand
without additional disambiguation. This section describes how you can
provide machine-understandable versions of information when marking up
your pages.
Dates, times, and durations: use the time tag with
datetime
Enumerations and canonical references: use the link tag with
href
Missing/implicit information: use the meta tag with content.
Check this link for details.
I am getting validation errors with the inputmode attribute on text areas and text fields. The validator tells me Attribute inputmode not allowed on element input at this point but the HTML5 spec indicates that it is allowed.
Is there actually something wrong with this code, or is the validator at fault?
Here is a bare bones case which will produce exactly this kind of validation error (twice), in one case on an email input, and on the other on a textarea.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<form method="post" action="contactme.php">
<label class='pas block'>
Your E-Mail:<br/>
<input type='email' name='email' required inputmode='latin' placeholder='your e-mail here' />
</label>
<label class='pas block'>
Your Message:<br/>
<textarea name='message' required inputmode='latin' placeholder='and your message here!'></textarea>
</label>
</form>
</body>
</html>
Also, see the chart about which attributes apply to the different input types here:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#attr-input-type
The "inputmode" attribute applies only to "text" and "search".
UPDATE 2019-09-04: "inputmode" is now a global attribute (per WHATWG) and can be specified on any HTML element: https://html.spec.whatwg.org/multipage/dom.html#global-attributes
Another reference page for "inputmode":
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
On another note, "inputmode" is not a W3C HTML5 attribute, but it is a W3C HTML 5.1 attribute (at least at the time I'm writing this). UPDATE 2019-09-04: "inputmode" has been removed from HTML 5.2 and HTML 5.3.
The HTML5 spec says
The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, max, min, src, step, and width.
It's under bookkeeping details at https://html.spec.whatwg.org/multipage/input.html#e-mail-state-(type=email)
Five years after the question was asked, some may wonder why some of the properties listed by #dsas doesn't trigger such errors, like enctype
The answer is simple support, while enctype for instance gained a wide support
inputmethod is supported only as of IE11 and Edge 14, for more infos click here