HTML Elements

◄Page 14►

Microdata

Person Microdata Example

Introduction

This concise page demonstrates how to use microdata. Many pages exist on the Web which demonstrate what microdata accomplishes. Simply stated microdata assists search engines to process the content of a Web page, with descriptive vocabulary. In other words microdata improves SEO, enabling others to find your pages in response to online queries. However microdata doesn't display on the Web page. It doesn't interfere with content.

Microdata Nutshell

Microdata uses a set of vocabularies to describe items with name-value pairs. Developers assign values to item properties. Microdata consists of an item with properties composed of a property name with a a property value. The name is an attribute. Microdata includes five basic attributes. Most Web developers use just three of those attributes. We'll focus on the three most used microdata attributes.

Recommendations suggest Web developers apply an existing type, however you can define your own types. See a full list of types or see every type at Thing: generic types. Also test microdata with the Schema Markup Validator.

Microdata Attributes

The three most common attributes appear at the top of the following list.

itemscope

Introduced when a different schema is required. Declares an Item within the scope of one or more HTML elements. Attribute itemscope precedes itemtype.

itemtype

URL: Set of one or more attributes specified with a URL that defines an itemscope's vocabulary. Usually itemtype and itemscope work together.

itemprop

Set of one or more properties, each with a name and value.

itemid

Seldom Used: Global identifier for an item that includes both valid itemscope and itemtype attributes.

itemref

Seldom Used: Applies HTML element ids, not itemid, to associate another itemscope with a separate HTML element.

Microdata Example

Person Microdata

Here we have a Person Item, with properties from Schema.org/Person. Many other properties exist for each Person Item and many other schemas exist, for various topics.

Person Microdata Markup

The following HTML markup demonstrates how to apply Microdata. Notice the entire itemscope is enclosed in a URL for the Person Item. Each applicable element includes an itemprop. It's important to verify that every itemprop is in the URL's schema, then run this through the Schema Markup Validator.

The ct class centers text and elements. The bld class assigns font-weight:bold;.

<div
itemscope 
itemtype="https://schema.org/Person"
>

<p 
class="ct" 
itemprop="givenName"
>

Amy Washburn Butler.

</p>

<p 
class="ct">

<img 
itemprop="image" 
alt="Profile Picture" 
src="../../thumbnails/ss-profile.jpg">

</p>

<p 
class="ct bld" 
itemprop="jobTitle"
>

Job Title: Software Developer

</p>

<p 
class="ct" 
itemprop="hasCredential"
>

Credentials: BS Majoring in Computer Science (Summa Cum Laude Graduate)

</p>

<p 
class="ct" 
itemprop="nationality"
>

Country: USA.

</p>


</div>

Summary

This concise page demonstrated how to use microdata. Many pages exist on the Web which demonstrate what microdata accomplishes. Simply stated microdata assists search engines to process the content of a Web page, with descriptive vocabulary. In otherwords microdata improves SEO, enabling others to find your pages in response to online queries.

Unusual HTML5 Skills

See the markup, CSS and results of various HTML5 elements, with styles and some unusual or seldom used techniques.

Tags