القائمة الرئيسية

الصفحات

HTML5 - Microdata


 Microdata is a standardized way to provide additional semantics in your web pages.

Microdata lets you define your own customized elements and start embedding custom properties in your web pages. 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.

Example

  • 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.

Here there are two items, each of which has the property "name" −

Microdata هي طريقة قياسية لتوفير دلالات إضافية في صفحات الويب الخاصة بك. تتيح لك Microdata تحديد العناصر المخصصة الخاصة بك والبدء في تضمين الخصائص المخصصة في صفحات الويب الخاصة بك. على مستوى عالٍ ، تتكون البيانات الجزئية من مجموعة من أزواج الاسم والقيمة. تسمى المجموعات بالعناصر ، وكل زوج من الاسم والقيمة هو خاصية. يتم تمثيل العناصر والخصائص بواسطة عناصر منتظمة. مثال لإنشاء عنصر ، يتم استخدام سمة itemscope. لإضافة خاصية إلى عنصر ، يتم استخدام سمة itemprop على أحد توابع العنصر. يوجد هنا عنصرين ، لكل منهما الخاصية "name" -

<html>
   <body>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Zara</span>.</p>
      </div>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Nuha</span>.</p>
      </div>
      
   </body>
</html>

Properties generally have values that are strings but it can have following data types −

Global Attributes

Microdata introduces five global attributes which would be available for any element to use and give context for machines about your data.

Sr.No.Attribute & Description
1

itemscope

This is used to create an item. The itemscope attribute is a Boolean attribute that tells that there is Microdata on this page, and this is where it starts.

2

itemtype

This attribute is a valid URL which defines the item and provides the context for the properties.

3

itemid

This attribute is global identifier for the item.

4

itemprop

This attribute defines a property of the item.

5

itemref

This attribute gives a list of additional elements to crawl to find the name-value pairs of the item.

Properties Datatypes

Properties generally have values that are strings as mentioned in above example but they can also have values that are URLs. Following example has one property, "image", whose value is a URL −

تحتوي الخصائص بشكل عام على قيم عبارة عن سلاسل كما هو مذكور في المثال أعلاه ولكن يمكن أن تحتوي أيضًا على قيم هي عناوين URL. المثال التالي له خاصية واحدة ، "صورة" ، قيمتها عنوان URL -

<div itemscope>
   <img itemprop = "image" src = "tp-logo.gif" alt = "TutorialsPoint">
</div>

Properties can also have values that are dates, times, or dates and times. This is achieved using the time element and its datetime attribute.

<html>
   <body>
      
      <div itemscope>
         My birthday is:
         <time itemprop = "birthday" datetime = "1971-05-08">
            Aug 5th 1971
         </time>
      </div>
      
   </body>
</html>

Properties can also themselves be groups of name-value pairs, by putting the itemscope attribute on the element that declares the property.

Microdata API support

If a browser supports the HTML5 microdata API, there will be a getItems() function on the global document object. If browser doesn't support microdata, the getItems() function will be undefined.

function supports_microdata_api() {
   return !!document.getItems;
}

Modernizr does not yet support checking for the microdata API, so you’ll need to use the function like the one listed above.

The HTML5 microdata standard includes both HTML markup (primarily for search engines) and a set of DOM functions (primarily for browsers).

You can include microdata markup in your web pages, and search engines that don't understand the microdata attributes will just ignore them. But if you need to access or manipulate microdata through the DOM, you'll need to check whether the browser supports the microdata DOM API.

لا تدعم Modernizr حتى الآن التحقق من واجهة برمجة التطبيقات للبيانات الجزئية ، لذلك ستحتاج إلى استخدام الوظيفة مثل تلك المذكورة أعلاه. يتضمن معيار HTML5 microdata كلاً من ترميز HTML (لمحركات البحث بشكل أساسي) ومجموعة من وظائف DOM (بشكل أساسي للمتصفحات). يمكنك تضمين ترميز البيانات الجزئية في صفحات الويب الخاصة بك ، وستتجاهلها محركات البحث التي لا تفهم سمات البيانات الجزئية. ولكن إذا كنت بحاجة إلى الوصول إلى البيانات الجزئية أو معالجتها من خلال DOM ، فستحتاج إلى التحقق مما إذا كان المتصفح يدعم microdata DOM API.

Defining Microdata Vocabulary

To define microdata vocabulary you need a namespace URL which points to a working web page. For example https://data-vocabulary.org/Person can be used as the namespace for a personal microdata vocabulary with the following named properties −

  • name − Person name as a simple string

  • Photo − A URL to a picture of the person.

  • URL − A website belonging to the person.

Using about properties a person microdata could be as follows −


<html>
   <body>
   
      <div itemscope>
         <section itemscope itemtype = "http://data-vocabulary.org/Person">
            <h1 itemprop = "name">Gopal K Varma</h1>
         
            <p>
               <img itemprop = "photo" 
                  src = "http://www.tutorialspoint.com/green/images/logo.png">
            </p>
            
            <a itemprop = "url" href = "#">Site</a>
         </section>
      </div>
      
   </body>
</html>
هل اعجبك الموضوع :

تعليقات