Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/ja/docs/Web/HTML/Reference/Global_attributes/itemscope below:

HTML itemscope グãƒãƒ¼ãƒãƒ«å±žæ€§ - HTML

itemscope は論理グローバル属性で、関連付けられたメタデータのスコープを定義します。 itemscope 属性を要素に指定すると、要素に関連付けられた数々の名前と値の組み合わせを持つ新しいアイテムを作成します。

関連する属性である itemtype は、アイテムおよびそのプロパティのコンテキストを記述する語彙（schema.org など）の有効な URL を指定するために使用されます。以下のそれぞれの例では、 schema.org からの語彙を使用しています。

あらゆる HTML 要素に itemscope 属性を設定することができます。 itemscope 要素が itemtype を持たない場合は、関連付けられた itemref を持つ必要があります。

メモ: itemtype 属性についての詳細は、 https://schema.org/Thing をご覧ください

ある要素に itemscope 属性を指定すると、新しいアイテムが作成されます。アイテムは名前と値の組のグループから構成されます。 itemscope 属性と itemtype 属性を持つ要素では、 id 属性も指定することができます。 id 属性を使用すると、新しいアイテムにグローバルな識別子を設定することができます。グローバルな識別子によって、そのアイテムはウェブ上のページで見られる他のアイテムに関連付けることができます。

以下の例では、 itemtype を "http://schema.org/Movie" に設定し、 3 つの関連する itemprop 属性を定義します。

<div itemscope itemtype="https://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>
    Director: <span itemprop="director">James Cameron</span> (born August 16,
    1954)
  </span>
  <span itemprop="genre">Science fiction</span>
  <a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a>
</div>

以下の例には 4 つの itemscope 属性があります。それぞれの itemscope 属性は、対応する itemtype 属性のスコープを設定しています。以下の例にある Recipe, AggregateRating, NutritionInformation の itemtype は、レシピのための schema.org 構造化データの一部であり、最初の itemtype, http://schema.org/Recipe として定義されています。

メモ: 手軽に HTML からマイクロデータを抽出するには、 Google のリッチリザルトテストツールが便利です。上の HTML で試してみてください。

<div itemscope itemtype="https://schema.org/Recipe">
  <h2 itemprop="name">Grandma's Holiday Apple Pie</h2>
  <img
    itemprop="image"
    src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg"
    width="50"
    height="50" />
  <p>
    By
    <span itemprop="author" itemscope itemtype="https://schema.org/Person">
      <span itemprop="name">Carol Smith</span>
    </span>
  </p>
  <p>
    Published:
    <time datetime="2022-11-05" itemprop="datePublished">
      November 5, 20022
    </time>
  </p>
  <span itemprop="description">
    This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.
  </span>
  <br />
  <span
    itemprop="aggregateRating"
    itemscope
    itemtype="https://schema.org/AggregateRating">
    <span itemprop="ratingValue">4.0</span> stars based on
    <span itemprop="reviewCount">35</span> reviews
  </span>
  <br />
  Prep time: <time datetime="PT30M" itemprop="prepTime">30 min</time>
  <br />
  Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour</time>
  <br />
  Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min</time>
  <br />
  Yield: <span itemprop="recipeYield">1 9" pie (8 servings)</span>
  <br />
  <span
    itemprop="nutrition"
    itemscope
    itemtype="https://schema.org/NutritionInformation">
    Serving size: <span itemprop="servingSize">1 medium slice</span><br />
    Calories per serving: <span itemprop="calories">250 cal</span><br />
    Fat per serving: <span itemprop="fatContent">12 g</span><br />
  </span>
  <p>
    Ingredients:<br />
    <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br /></span>
    <span itemprop="recipeIngredient">White sugar: 3/4 cup<br /></span>
    …
  </p>
  Directions: <br />
  <div itemprop="recipeInstructions">
    1. Cut and peel apples<br />
    2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br />
    …
  </div>
</div>

• 他のグローバル属性
• マイクロデータに関連する他のグローバル属性:
  • itemid
  • itemprop
  • itemref
  • itemtype

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4