HTML5で登場した新要素の解説

メインコンテンツの要素

ページ内の主となるコンテンツを明確にできる要素として、main,article,sectionの3つの要素が追加されました。 main <main></main>はページ内で1度のみ使用できる要素で、ページの主要であることを明示するための要素です。 article <article></article>は、独立した一つのコンテンツを表すことができる要素です。 一覧など複数のコンテンツをまとめるためには使用できず、ニュースやブログの記事などに使用することが多いです。 section <section></section>は文章の構造を表すための最も基本となる要素です。 本来h1はページ内で1度しか使用することはできませんが、sectionは章や節を表すので中には必ず見出しの要素が必要になります。 articleと違い、複数のコンテンツをまとめるために使うことができます。  

サブコンテンツの要素

ページ内の主要ではないコンテンツを明確にできる要素として、header,footer.nav,asideの4つの要素が追加されました。 header <header></header>は、ページやセクションのヘッダーを表すことができる要素です。 サイトの内容によってはタイトルやサイトロゴ、記事の見出しなど同じページ内でも複数使用することができますが、header要素の中にさらにheaderやfooterを入れることはできません。 footer <footer></footer>は、ページやセクションのフッターを表すことができる要素です。 headerと同じく同一ページ内でも複数使用可能ですが、headerの中やfooterの中に更にfooterを入れることはできません。 nav <nav></nav>はサイト、ページ内の主要なナビゲーションに使用する要素です。 全てのリンクグループに使うのではなく、主要ではないナビゲーションに関しては他の要素で補います。 aside <aside></aside>はメインとなるコンテンツと関連性の薄いコンテンツを表すことができる要素です。 サイドバーや広告、補足記事などに使用する場合が多いようです。  

その他の要素

figure <figure></figure>は画像や図面などをマークアップするための要素です。 figure自体には意味はなく、必ず使用しなければいけないわけでもありません。 figcaption <figcaption></figcaption>はfigure要素の最初もしくは最後の子要素として使用でき、figure要素のキャプションを表すことができます。 mark <mark></mark>は文書内のテキストをハイライトして目立たせることができる要素です。 details, summary <summary></summary>は親要素となるdetailsの要素内容の要約・キャプション・説明を表すことができる要素です。 time <time></time>は日付や時刻を正確に示すことができる要素です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です