トップページ | HTML5編・目次

●main要素の使い方

公開日:

 main要素は、HTML5で追加された新しい要素で、その要素内容がドキュメ ント全体におけるそのページ特有の主要なコンテンツであることを表します。

■main要素を使ったマークアップの例

main要素を配置した例。

 おおざっぱですが、イメージとしてはこのような感じになります。main要素はスクリーン・リーダーのような技術を使用しているユーザーが、各ページで共通するコンテンツを読み飛ばして、主要なコンテンツの情報を得られるようにするなどアクセシビリティの観点からmain要素の要素内容には、サイトロゴやヘッダー、グローバルナビゲーション、検索フォーム、フッターといったようないわゆるサイト内の各ページで共通するコンテンツは含めないようにしてください。

 なお、section要素、article要素、aside要素、nav要素といったセクショニング・コンテンツの使い方につきましては、別項の「セクション用の要素を使い分ける」を参照。

■特徴

 <main 属性="属性値">~</main>というように使いますが、main要素の主な特徴としては以下が挙げられます。

・article要素、aside要素、nav要素、section要素といったセクショニング・コンテンツではありませんのでアウトラインに影響を与えません。
・同じページのbody要素内に1つしか配置できません。
・article, aside, nav, header, footerを祖先要素に持つことはできません。

■分類

カテゴリー:
・パルパブルコンテンツ(Palpable content)
・フローコンテンツ
配置可能な場所:フローコンテンツが配置可能な場所
子要素として入れられる要素:フロー コンテンツ
使える属性:グローバル属性

目次 | HTML5編・目次

Copyright (C) 2017 http://www.xml.vc/ All Rights Reserved.