[複数回利用できない?] htmlのmain要素とは? 使い方も分かりやすく解説!

この記事は上記のような疑問を解消するものとなっています。

main要素はHTML文書のメインコンテンツを表します。

main要素はHTML文書で1つだけ配置することができ、中に記事やセクションを配置します。

そこでこの記事ではmain要素について解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

1.main要素とは?

main要素は文書のbody要素の主要な内容を表します。

主要な内容とは文書の中心的な主題、アプリケーションの中心的な機能に直接関連または拡張した内容のことです。

一般的なWebサイトでは、main要素はheader要素とfooter要素の間に置かれます。

Webページのheader要素やfooter要素とは同列なので、その要素内にmain要素を配置することはできません。

また、main要素を下位要素であるarticleやnav要素内に配置することもできません。

2.main要素の使い方

それではmain要素の使い方をみていきましょう。

・・・

<header>
 <h1>HTML&CSS辞典</h1>
</header>
<main>
 <article>
  <h2>main要素とは? 分かりやすく解説します!</h2>
  <p>main要素は、文書のbodyの主要な内容を表します。</p>
 </article>
</main>

・・・

main要素はheader要素とfooter要素の間に置かれます。

上記の例では記事セクションを文書の主要な部分としてmain要素でマークアップしています。

main要素はあくまでもメインコンテンツを表すので、1つのページに複数配置することができません。

main要素を複数配置する必要がある場合、1つ以外はhidden属性とする必要があります。

「HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?

そんな方に「はじめての副業コース」をオススメします。

なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!

Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?