記事タグHTML5HTMLの基礎知識HTML5には、代表的な関連仕様として「マイクロデータ」「WAI-ARIA」「OGP」があります。それぞれの仕様と使用目的、サンプルコードについて解説します。HTMLの基礎知識HTML5の関連仕様HTML5には、要素の属性値にさらなる意味を付与する関連仕様が策定されています。ここでは、マイクロデータ、WAI-ARIA、OGPという3つの関連仕様について解説します。マイクロデータマイクロデータはマシンリーダブルなデータ、つまりコンピューターにも文書の意味や内容が理解できる情報を付与する仕様です。具体的には、HTMLの要素にマイクロデータの属性と属性値を記述します。コンピューターを介したデータの有効活用が見込まれています。以下の例では、人物のプロフィールを表す文書にマイクロデータによる意味付けを行っています。ここでは、マイクロデータのitemscope、itemtype、itemprop属性を使用しています。経営する大滝株式会社に入社。itemprop="jobTitle">代表取締役社長</span>に就任、現在に至る。href="mailto:ohtaki@example.com">ohtaki@example.com</a>までお送りください。</p></section>1行目のitemscope属性でマイクロデータを使うことを宣言しています。同時に、itemtype属性では、人物についての情報を意味付けられる「http://schema.org/Person」を指定します。この値は意味付けしたい内容によって異なります。itemtype="http://schema.org/Person">宣言と分類の指定ができたら、itemprop属性の値に各要素の意味を指定していきます。この値は、itemtype属性の分類に従っており、この例では人物の苗字に「familyName」、名前に「givenName」、写真に「image」、誕生日に「birthDate」、職場に「worksFor」、役職に「jobTitle」、連絡先に「email」という具合に、内容の意味を付与しています。することで、各要素の内容がコンピューターにも読み取れるデータとなります。Consortium)が策定を進めています。itemtype属性の分類とitemprop属性の値は、いくつかの団体によって策定が進められており、ここではGoogle、Yahoo!、Microsoftの3社が共同で設立した策定団体「schema.org」の仕様に従っています。Applications)は、リッチなWebコンテンツをより使いやすくすることを目的とした仕様です。具体的には、「Webコンテンツの役割、状態、特性をブラウザーなどのソフトウェア、あるいはハードウェアにより正確に伝えること」と「tabindex属性の機能を拡張したキーボードによる操作性の向上」が挙げられます。ここでは、Webコンテンツの役割を伝えて文書構造を定義するrole属性について解説します。以下の例のように、main要素にはWAI-ARIAで定義されているrole属性を値とセットで記述することが推奨されています。HTML5で新しく定義されたmain要素の役割をブラウザーなどが認識できないことを想定して、これをrole="main"で補完しています。role="main"><!--省略--></main>また、ナビゲーションの定義にはrole="navigation"の指定が推奨されています。このようにrole属性は、HTML文書の構造をさらに明確することが可能です。ポイントWAI-ARIAの仕様はW3Cが策定を進めています。Protocol)は、FacebookやTwitterなどのSNS向けにメタデータを付与する仕様です。ブログの記事などがSNSで共有されるときなどに、各サービスに最適化されたデザインで表示されるなどのメリットがあります。OGPの指定自体は、meta要素内で行います。以下はWebページのOGPをひと通り設定した例です。独自のproperty属性を使って「og:title」(ページや記事のタイトル)、「og:url」(URL)、「og:description」(概要)、「og:image」(画像)、「og:type」(種類)を明示しています。content="「できるネット」は、パソコン&スマホの使い方がわかります"。content="website">ポイントOGPに必要なデータとその形式はSNSによって異なります。各サービスのレギュレーションなどを確認しましょう。protocol」で策定されています。書き方、グローバル属性、関連仕様まとめHTMLタグ一覧Share記事をシェアするtweetpocketこの記事が気に入ったらいいね!しようできるネットから最新の記事をお届けします。ゆうこ)Webサイト制作を行うデジパ株式会社所属のマークアップエンジニア。HTML、CSSによるコーディング業務から、CMSの導入・カスタマイズまで、制作業務全般に携わる。「ディレクターからの指示がなくても、かゆいところに手が届くように」がモットー。よしき)フリーランスによるWebサイト制作業務などを経て、2004年よりWebサイト制作を行うデジパ株式会社に所属。クリエイティブ事業部マネージャー。個人活動としてセミナーでの講演、執筆も行う。