HTML Course 10.6 Microdata and global attributes (lang, dir, title)

Microdata in HTML (Section 10.6)

Microdata is a standard for embedding machine-readable metadata within HTML documents. It enables search engines, browsers, and other tools to better understand the content and context of web pages. Microdata uses a small set of attributes to annotate elements with semantic information.

Core Attributes of Microdata

Attribute	Description	Example Usage
itemscope	Declares that the element is an item and sets the scope for item properties.	<div itemscope>
itemtype	Specifies the vocabulary (type) of the item, typically a URL to a schema.	<div itemscope itemtype=’http://schema.org/Person’>
itemprop	Defines a property of the current item. The value is the property name.	<span itemprop=’name’>Alice</span>
itemid	Gives a global identifier (URL) for the item.	<div itemscope itemid=’#product123′>
itemref	Lists IDs of elements elsewhere in the document that belong to this item.	<div itemscope itemref=’extra-details’>

Building a Microdata Example

Below is an example describing a person using itemscope, itemtype, and itemprop. Comments within the code explain each part.



  
  Jane Doe

  
  Web Developer

  
  Personal Site

Using itemid and itemref

You may separate properties in different parts of the document using itemid to identify the item and itemref to reference other element IDs that hold additional properties.



  SuperWidget




  Price: 19.99 USD


  In stock: Yes

Global Attributes: lang, dir, title

Global attributes can appear on almost any HTML element. They affect language settings, text direction, or provide advisory information. Below are details and examples.

1. lang

Purpose: Declares the language of the element’s content using a BCP 47 language tag.
Inheritance: Child elements inherit the lang value unless overridden.
Use Cases: Accessibility tools (screen readers), spell checkers, translation tools.

This text is in English.

Ceci est un texte en français.

2. dir

Purpose: Specifies the text direction. Valid values are ltr, rtl, and auto.
ltr = left-to-right, rtl = right-to-left, auto = browser determines direction from content.
Use Cases: Supporting languages like Arabic, Hebrew, or mixing LTR and RTL scripts.

Left-to-right default text.

هذا نص باللغة العربية.

السلام عليكم Hello

3. title

Purpose: Provides advisory information about an element. Usually displayed as a tooltip on hover.
Use Cases: Clarifying abbreviations, explaining controls, or offering extra details.

CSS

Best Practices and Considerations

Always choose the correct itemtype URL, typically from schema.org or another recognized vocabulary.
Use lang and dir to improve accessibility and correct rendering of multilingual content.
Keep title text concise but descriptive. Avoid repeating visible text.
Validate your HTML with a validation service to catch missing or misused attributes.
Combine microdata and global attributes thoughtfully to enhance both human and machine readability.

By leveraging microdata and appropriate global attributes, you enrich your HTML with semantic context, improve accessibility, and make your content more discoverable to search engines and assistive technologies.