schema.org structured data in visible elements - schema.org

Question

The two code fragments below will both be invisible for the user, but are parsed well in GSDTT.
<div>
<div itemtype="http://schema.org/WebPage" itemscope>
<div itemprop="mainEntity" itemtype="http://schema.org/Book" itemscope>
<meta itemprop="datePublished" content="2001-01-15" />
<meta itemprop="bookFormat" content="http://schema.org/Paperback" />
<link itemprop="image" href="http://rdf-translator.appspot.com/plato-cover.jpg" />
<meta itemprop="author" content="Plato" />
<meta itemprop="numberOfPages" content="224" />
<meta itemprop="inLanguage" content="English" />
<div itemprop="review" itemtype="http://schema.org/Review" itemscope>
<meta itemprop="name" content="Old is new again" />
<meta itemprop="reviewBody" content="A lovely read." />
<meta itemprop="author" content="O. Talp" />
<meta itemprop="datePublished" content="2001-01-16" />
</div>
</div>
</div>
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "WebPage",
"mainEntity":{
"#type": "Book",
"author": "Plato",
"bookFormat": "http://schema.org/Paperback",
"datePublished": "2001-01-15",
"image": "plato-cover.jpg",
"inLanguage": "English",
"numberOfPages": "224",
"review": [
{
"#type": "Review",
"author": "John Doe",
"datePublished": "2001-01-16",
"name": "O. Talp",
"reviewBody": "A lovely read."
}
]
}
}
</script>
Now consider the code below, which contains structured data wich is also visble to users; and it is parsed well in GSDTT:
<div itemtype="http://schema.org/WebPage" itemscope>
<div itemprop="mainEntity" itemtype="http://schema.org/Book" itemscope>
<p itemprop="datePublished" content="2001-01-15">Published: 2001-01-15 </p>
<p itemprop="bookFormat" content="http://schema.org/Paperback" />Format: Paperback </p>
<img itemprop="image" src="https://nl.wikipedia.org/wiki/Plato#/media/File:Plato_Pio-Clemetino_Inv305.jpg" >
<p itemprop="author" content="Plato" >Author: Plato</p>
<p itemprop="numberOfPages" content="224" >Pages: 224</p>
<p itemprop="inLanguage" content="English" >Language: English</p>
<div itemprop="review" itemtype="http://schema.org/Review" itemscope>
<p><strong>Review</strong></p>
<p itemprop="name" content="Old is new again" >Old is nieuw again</p>
<p itemprop="reviewBody" content="A lovely read.">A lovely read.</p>
<p itemprop="author" content="O. Talp">Author: O. Talp</p>
<p itemprop="datePublished" content="2001-01-16">Published: 2001-01-16</p>
</div>
</div>
</div>
I would prefer the last code fragment, because it contains structured data and produces visible output. Nevertheless microdata seems deprecated, or will be sooner or later. What would be best practice to produce structured HTML data that is also visible for users?

Answer 1

Microdata is not deprecated.
WHATWG has it specified as part of their Living HTML spec. W3C has it specified in a Note (with a new plan to publish it as Recommendation).
The Schema.org sponsors (still) support the three syntaxes JSON-LD, Microdata, and RDFa. They have no plans to deprecate any of these.
Consumers of Schema.org data might of course support only a subset of these syntaxes, or other ones. Unless you want to support a consumer that you know doesn’t support Microdata, there is no reason not to use it.
(By the way, the consumer Google recommends to use JSON-LD, but still supports Microdata and RDFa. There is no reason to follow their recommendation if Microdata/RDFa works better for you, unless you have to add it on the client-side with JavaScript).
Each syntax has its advantages and disadvantages (JSON-LD vs. Microdata vs. RDFa).
If you want to mark up your existing content (instead of duplicating the content), you have to use Microdata or RDFa. Either one should be fine for your case (Microdata vs. RDFa).