【HTML】articleタグで要素の構造を明確化しよう!|使い方解説
  • facebookページ
  • twitterページ
  • 2020.02.19

    【HTML】articleタグで要素の構造を明確化しよう!|使い方解説

    articleタグとは?

    articleタグとは、文書の内容が独立している記事セクションであることを示す際に使うタグです。

    例えば、ブログやニュースサイトの個別記事やその記事に付けられたコメントなどが、article要素でよくマークアップされています。

    articleタグの特徴は?

    articleタグの特徴は1ページに複数使用が可能な点です。

    また、articleタグを入れ子構造にもできます。

    articleタグを入れ子構造にする場合は、子要素のarticleタグは基本的に親要素のarticleタグに関係する内容にしましょう。

    articleタグに指定できる属性は?

    articleタグに指定できる属性は「グローバル属性」と「イベントハンドラ」です。

    ポテパンダの一言メモ

    グローバル属性とは、全てのHTML要素で使用できる属性のことを指します。
    イベントハンドラとは、動作や操作に対して、特定の処理を実行させるための命令を指します。

    articleタグの使い方【サンプル有り】

    では、articleタグの使い方をサンプルを見ながら確認してみましょう。

    ■表示結果

    articleタグの使い方【サンプル有り】

    見た目的にはarticleタグが使われているのかわかりません。

    デベロッパーツールで確認してみると、articleタグでマークアップされているのがわかります。

    articleタグの使い方【サンプル有り】

    articleタグを複数使う場合は?

    articleタグを複数使う場合のサンプルも見ていきましょう。

    では、articleタグの使い方をサンプルを見ながら確認してみましょう。

    お知らせ記事といった記事を複数用意するのが想像でき、文章の構造を明確に分けたい場合はarticleタグを複数利用するとよいでしょう。

    ■表示結果

    articleタグを複数使う場合は?

    articleタグでh1、h2はどう使う?

    articleタグでhタグはどのように使えばよいのでしょうか?

    hタグの使い方に明確な決まりはありませんが、守べきルールはあるので押さえておきましょう。

    hタグ(見出しタグ)とは、検索エンジンやユーザーにページの内容(見出し)を伝えるためのマークアップタグのことです。

    h1〜h6まであり、hタグは順序立てて並べます。

    例えば次のように、h1タグの前にh2タグが設定されている、h2タグの後ろにh4タグが設定されている(h3タグがない)などが、順序立てて並んでいないと言えます。

    articleタグの中でhタグを使う場合も、基本的な使い方は変わりません。

    articleタグごとにh1タグはひとつ、articleタグを入れ子構造にしている場合は全体でh1タグはひとつにするとよいでしょう。

    articleタグとsectionタグの使い分け

    articleタグと似たものにsectionタグがありますが、何が違うのか、どのように使い分ければよいのかわかりません…。

    ここでは、articleタグとsectionタグの違いについて見ていきましょう。

    まず、sectionタグについて少し説明します。

    sectionタグとは、ページ内の意味や機能などの範囲を示す際に使われるタグのことです。

    本の目次で例えると「章、節、項」で、書かれている内容の範囲が明確になっていますよね。

    sectionタグは、HTML5から使われるようになり、それ以前はhタグで構造を明確化していました。

    わかりやすく図解すると、次のような形です。

    articleタグとsectionタグの使い分け

    articleタグとasideタグの使い分け

    asideタグは、文書のメインコンテンツとは別に触れたい内容(用語の説明、補足、脚注など)や間接的な関係であるコンテンツ・セクションのことです。

    sectionタグと同様にわかりやすく図解すると、次のような形です。

    articleタグとasideタグの使い分け

    asideタグは、基本的にarticleタグに内包する形で使われます。

    まとめ

    HTMLのarticle属性について解説しました。

    article属性は独立した記事セクションであり、ブログの記事エントリなどでよく使われるタグです。

    入れ子構造にもでき、使い方に自由性があります。

    sectionタグやasideタグなどとの併用に悩んだ時などに、この記事を見返して参考にしてください!



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE