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

main要素について知りたい人

main要素について知りたいな!

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

この記事でお話すること

main要素とは?
main要素の使い方
格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

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

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

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

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

main要素の評価

頻出度

(5.0)

重要度

(5.0)

総合評価

(5.0)

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を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

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

リンク

3.格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【コスパ最高】オススメのプログラミングスクール

侍テラコヤ
⇒ 学び応援キャンペーンでお得に申し込む!
・月額1,980円からいつでも現役エンジニアに質問できる。
・学び応援キャンペーン実施中!
ZeroPlus Gate
⇒ 受講料0円で学習をはじめる!
・受講料0円
・30日で副業レベルのWebスキルを学べる!
本気のパソコン塾
⇒ 無料相談会・無料トライアルに申し込む!
・特典1：学習コンテンツの1週間無料トライアル
・特典2：学習管理シートプレゼント
・特典3：副業収入獲得ノウハウ動画プレゼント