HTMLの基礎知識

HTML5の関連仕様

HTML5には、要素の属性値にさらなる意味を付与する関連仕様が策定されています。ここでは、マイクロデータ、WAI-ARIA、OGPという3つの関連仕様について解説します。

マイクロデータ

マイクロデータはマシンリーダブルなデータ、つまりコンピューターにも文書の意味や内容が理解できる情報を付与する仕様です。具体的には、HTMLの要素にマイクロデータの属性と属性値を記述します。コンピューターを介したデータの有効活用が見込まれています。

以下の例では、人物のプロフィールを表す文書にマイクロデータによる意味付けを行っています。ここでは、マイクロデータのitemscope、itemtype、itemprop属性を使用しています。

<section itemscope="itemscope" itemtype="http://schema.org/Person">
	<h1 itemprop="name">
<span itemprop="familyName">大滝</span><span itemprop="givenName">一郎</span></h1>
	<p><img itemprop="image" src="/img/profile.png" alt="大滝一郎の顔写真" /></p>
	<p><time itemprop="birthDate" datetime="1980-01-01">1980年1月1日</time>、大滝栄一郎の次男として生まれる。東西大学卒業後、父が経営する大滝株式会社に入社。</p>
	<p>2014年に父の後を継ぎ、<span itemprop="worksFor">大滝株式会社</span> 
<span itemprop="jobTitle">代表取締役社長</span>に就任、現在に至る。連絡は
<a itemprop="email" href="mailto:ohtaki@example.com">ohtaki@example.com</a>までお送りください。</p>
</section>

1行目のitemscope属性でマイクロデータを使うことを宣言しています。同時に、itemtype属性では、人物についての情報を意味付けられる「http://schema.org/Person」を指定します。この値は意味付けしたい内容によって異なります。 

<section itemscope="itemscope" itemtype="http://schema.org/Person">

宣言と分類の指定ができたら、itemprop属性の値に各要素の意味を指定していきます。この値は、itemtype属性の分類に従っており、この例では人物の苗字に「familyName」、名前に「givenName」、写真に「image」、誕生日に「birthDate」、職場に「worksFor」、役職に「jobTitle」、連絡先に「email」という具合に、内容の意味を付与しています。こうすることで、各要素の内容がコンピューターにも読み取れるデータとなります。

ポイント

  • マイクロデータの仕様はW3C（World Wide Web Consortium）が策定を進めています。
  • itemtype属性の分類とitemprop属性の値は、いくつかの団体によって策定が進められており、ここではGoogle、Yahoo!、Microsoftの3社が共同で設立した策定団体「schema.org」の仕様に従っています。

WAI-ARIA

「WAI-ARIA」（Web Accesibility Initiative-Accessible Rich Internet Applications）は、リッチなWebコンテンツをより使いやすくすることを目的とした仕様です。具体的には、「Webコンテンツの役割、状態、特性をブラウザーなどのソフトウェア、あるいはハードウェアにより正確に伝えること」と「tabindex属性の機能を拡張したキーボードによる操作性の向上」が挙げられます。ここでは、Webコンテンツの役割を伝えて文書構造を定義するrole属性について解説します。

以下の例のように、main要素にはWAI-ARIAで定義されているrole属性を値とセットで記述することが推奨されています。HTML5で新しく定義されたmain要素の役割をブラウザーなどが認識できないことを想定して、これをrole="main"で補完しています。

<main role="main">
<!--省略-->
</main>

また、ナビゲーションの定義にはrole="navigation"の指定が推奨されています。このようにrole属性は、HTML文書の構造をさらに明確することが可能です。

ポイント

OGP

「OGP」（Open Gragh Protocol）は、FacebookやTwitterなどのSNS向けにメタデータを付与する仕様です。ブログの記事などがSNSで共有されるときなどに、各サービスに最適化されたデザインで表示されるなどのメリットがあります。OGPの指定自体は、meta要素内で行います。

以下はWebページのOGPをひと通り設定した例です。独自のproperty属性を使って「og:title」（ページや記事のタイトル）、「og:url」（URL）、「og:description」（概要）、「og:image」（画像）、「og:type」（種類）を明示しています。

<meta property="og:title" content="できるネット">
<meta property="og:url" content="http://dekiru.net/">
<meta property="og:description" content="「できるネット」は、パソコン＆スマホの使い方がわかります"。>
<meta property="og:image" content="http://dekiru.net/static/img/dekiru-net.png">
<meta property="og:type" content="website">

ポイント

  • OGPに必要なデータとその形式はSNSによって異なります。各サービスのレギュレーションなどを確認しましょう。
  • OGPの仕様は「The Open Graph protocol」で策定されています。

関連まとめ記事