HTML

The content attribute is used in meta and Microdata to specify the actual value or information of an element as a string.

content 属性

content属性 は、主に meta要素 と span要素 で使われ、その要素が持つ情報の内容を文字列で指定するための属性 です。

meta要素での使い方

meta要素 は、Webページのメタデータ(ページの説明やキーワード、OGP情報など)を指定するために使います。

content属性 は、meta要素の持つ「情報の内容」を文字列で指定します。

例えば、ページの説明をmeta要素で書く場合は次のようにします。

HTML

<meta name="description" content="このページはHTMLのcontent属性について初心者向けに解説しています。">

この例では、name="description" が「ページ説明」という情報の種類を示し、content 属性がその説明文の中身を表しています。

ポイント

content 属性の中身は画面に表示されるわけではなく、検索エンジンやSNSなどに使われます。

情報の中身そのものを記述する場所が content 属性です。

span要素での使い方(Microdataとの併用)

span要素 で content属性 を使うのは、Microdata という構造化データを扱うときが多いです。

例えば、商品のレビューの評価を検索エンジンに伝えるときにこう使います。

HTML

<span itemprop="ratingValue" content="4.5">★★★★☆</span>

この例では、画面上には「★★★★☆」という星マークが表示されますが、content="4.5" のおかげで検索エンジンなど機械が読むときには「4.5」という数値が認識されます。

ポイント

表示内容(ユーザー向け)と、検索エンジンなど機械に伝える内容(content属性で指定)を分けられるのがメリットです。

Microdata や schema.org のマークアップをするときによく使います。