Microdata is a set of tags and attributes you can add to your HTML to optimize how your content is read by search engines (also known as Search Engine Optimization or SEO).
Search engines can't understand the structure of the content of your website the same way your human users do. Let's use this HTML of a product as an example:
<article>
<h3>Bose QuietComfort 35 II</h3>
<p>$217.99</p>
<a href="...">See all options</a>
<img src="..." alt="...">
</article>Users will understand that information not only because they know what a product is and what attributes it has (name, price, images), but also because your website or app probably presents it in an understandable way. Search engines read HTML. You can help them to understand better how you are using those tags by adding some metadata.
Schema.org is the most important maintainer of schemas for structured data. Simply define a scope and its properties. For this example I defined the card as the scope of a "Product" by defining the attributes itemscope and itemtype on the tag <article>. For the children elements, the attribute itemprop helps in specifying the data of the product like the name, offers (price), and image.
<article itemscope itemtype="https://schema.org/Product">
<h3 itemprop="name">Bose QuietComfort 35 II</h3>
<p itemprop="offers">$217.99</p>
<a href="...">See all options</a>
<img itemprop="image" src="..." alt="...">
</article>Find every available scope and its properties at schema.org
You can check if everything looks good using Google Rich Results Test.