SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

HTMLのarticleタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:38動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエルリファレンス解説です。
  3. 0:03エイチティーエムエルタグ編の百九本目は、アーティクルタグです。
  4. 0:07アーティクルは、単独でも意味が通じる、独立した内容を示すための要素です。
  5. 0:12たとえばブログの記事一本、お知らせ一本、利用者の投稿などが、その代表例です。
  6. 0:16その部分だけを切り取って、別のページに載せたり、配信したりしても話が成り立つかどうかが、
  7. 0:20判断の出発点になります。
  8. 0:24今回は、その独立性という考え方、セクションとの違い、使い方や入れ子、コード例、
  9. 0:28互換性、よくある間違いまで、順番に確認します。
  10. 0:32ブログのトップページに並ぶ要約も、元をたどれば一本一本が独立した記事です。
  11. 0:36アーティクルは、どんな場面で使うのでしょうか。
  12. 0:39キーワードは独立性です。
  13. 0:41一本のブログ記事、ニュース記事、お知らせ、フォーラムへの投稿など、それだけで完結する内容が向いています。
  14. 0:48記事一覧のページでも、各項目がそれぞれ独立した記事なら、一つ一つをアーティクルで囲めます。
  15. 0:53逆に、独立しない単なる説明の一節、たとえば一つの長い記事の中の話題の区切りなら、
  16. 0:57アーティクルではなくセクションを検討します。
  17. 1:01見た目がカードのようだから、箱だからという理由ではなく、中身が単独で成り立つかで選ぶことが大切です。
  18. 1:08商品紹介のカードやレビューの投稿なども、それだけで内容が完結すれば候補になります。
  19. 1:13よく混同されるセクションとの違いを整理します。
  20. 1:17セクションは、見出しのある主題別のまとまりです。
  21. 1:21長いページを、概要、使い方、注意点のように話題ごとに分けるために使います。
  22. 1:26一方アーティクルは、そのまとまり自体が独立した作品や投稿として成り立つ場合に使います。
  23. 1:33判断に迷ったら、その部分だけを取り出して、タイトルと一緒に別の場所へ持っていっても意味が通じるかを自問してみてください。
  24. 1:42通じるならアーティクル、親の文書の中で初めて意味を持つ一節ならセクション、
  25. 1:46という分け方が目安になります。
  26. 1:50名前が似ていても役割は違うので、最初にこの区別を押さえておくと迷いが減ります。
  27. 1:56基本の書き方を確認します。
  28. 1:58アーティクルは、開始タグと終了タグを明示して使う要素です。
  29. 2:03終了タグを省略することはできません。
  30. 2:06中には、その記事の見出しと本文を入れます。
  31. 2:09見出しは、その記事が何について書かれたものかを伝える大切な手がかりです。
  32. 2:15記事の中で使う見出しのレベルは固定ではありません。
  33. 2:19一覧ページに並べるならエイチツー、ページの主題そのものならエイチワンというように、
  34. 2:24配置先の見出し階層に合わせて調整します。
  35. 2:29まずはアーティクルで囲み、見出しを付けるという基本形を覚えてください。
  36. 2:35この形は、ブログでもお知らせでも共通する、アーティクルの最も基本的な骨組みです。
  37. 2:41記事の活用事例をもとに、コード例を見ます。
  38. 2:45例では、十月の学習会という見出しと、エイチティーエムエルの基本を体験しますという本文を、
  39. 2:49アーティクルで囲んでいます。
  40. 2:53これだけで、この一塊が独立したお知らせ記事であることが伝わります。
  41. 2:58末尾にはフッターを置き、投稿者が運営チームであることを示しています。
  42. 3:03フッターは記事の中にも置け、その記事についての補足情報を担当します。
  43. 3:08練習では、入門で作ったファイルにこの例を置き、保存して再読み込みし、開発者ツールで構造が意図通りになっているか確認してみましょう。
  44. 3:18日付や投稿者を添えると、誰がいつ書いた記事かも合わせて伝わるようになります。
  45. 3:24入れ子と組み合わせを確認します。
  46. 3:26アーティクルの中をさらに分けたいときは、内側にセクションを置けます。
  47. 3:31たとえば旅行記という一本の記事の中を、一日目、二日目という話題ごとにセクションで分ける書き方です。
  48. 3:38逆に、アーティクルの内側に別のアーティクルを置く例もあります。
  49. 3:42記事へのコメント一つ一つを、内側のアーティクルとして扱うケースです。
  50. 3:47この場合、内側の内容は外側の記事と関連する独立した投稿、という関係になります。
  51. 3:52またヘッダーやフッター、アサイドも記事ごとに置け、記事単位で構造を完結させられます。
  52. 3:58入れ子の深さは最小限にとどめ、どの記事に属するのかが追える構造にしましょう。
  53. 4:04一覧ページでの使い方も見ておきます。
  54. 4:06メイン要素の中に、アーティクルを複数並べる形です。
  55. 4:10各アーティクルにはそれぞれ見出しを付け、中には要約や投稿日などを置きます。
  56. 4:15読む側や読み上げソフトにとって、各項目が独立した記事の集まりであることが構造から伝わります。
  57. 4:21ここでも、独立していない項目まで無理にアーティクルにしないことがポイントです。
  58. 4:27目次の一行や、単なるリンクの並びは記事ではありません。
  59. 4:31その場合はリストなど、内容に合った要素を選びましょう。
  60. 4:34タイトルだけを並べた目次とは違い、各項目に中身がある点がアーティクルの条件です。
  61. 4:40属性を確認します。
  62. 4:41アーティクルには、この要素専用の必須属性はありません。
  63. 4:46必要に応じて、グローバル属性と呼ばれる共通の属性を使います。
  64. 4:50アイディーは文書内で一意な識別子で、ページ内リンクやスクリプトからの参照に使います。
  65. 4:57クラスは、シーエスエスやジャバスクリプトで複数の要素をまとめて選ぶための名前です。
  66. 5:03ラングは内容の言語を示し、日本語ならジェーエーを指定します。
  67. 5:08そのほか、アプリ独自の値を保持するデータ属性もありますが、秘密情報を置く場所ではありません。
  68. 5:15子要素に指定する属性と混同しないようにしましょう。
  69. 5:19属性は必要になったときに足すものなので、最初から全部付ける必要はありません。
  70. 5:25見出しとアクセシビリティについてです。
  71. 5:28アーティクルには、原則として見出しを付け、その記事の主題が一目で分かるようにします。
  72. 5:34見出しがあることで、読み上げソフトの利用者が記事の区切りをたどりやすくなります。
  73. 5:41投稿日や更新日を示すなら、タイム要素で日付を機械にも読める形で添える方法もあります。
  74. 5:47実装の前後には、三百二十ピクセル程度の狭い画面幅や、文字を拡大した状態でも、
  75. 5:52内容や操作部分が欠けないかを確認しましょう。
  76. 5:56リンクを含む場合は、キーボードのタブキーなどでたどれるかも合わせて見ておくと安心です。
  77. 6:03見出しの階層を飛ばさないことも、構造を正しく伝えるための大切な配慮です。
  78. 6:09ブラウザー互換性を確認します。
  79. 6:11記事が紹介するエムディーエヌのデータでは、アーティクル要素本体は、クロームが五以降、
  80. 6:17エッジが十二以降、ファイアフォックスが四以降、サファリが五以降から対応しています。
  81. 6:23エイチティーエムエルファイブで導入された要素の中でも、古くから安定して使える部類です。
  82. 6:30現在の主要ブラウザーであれば、まず問題なく使えます。
  83. 6:34ただし、要素本体の対応と、新しい属性やエーピーアイの対応は別ものです。
  84. 6:39新しい機能を組み合わせるときは、それぞれの対応状況を確認し、モバイル版も含めて実機で試しておきましょう。
  85. 6:46導入時期が古い分、古いブラウザーを含む環境でも安心して採用できる要素です。
  86. 6:52まとめとして、よくある間違いを三つ挙げます。
  87. 6:55一つ目は、区切りというだけで何でもアーティクルで囲んでしまうことです。
  88. 7:01意味のない箱ならディブ、主題の区切りならセクションが適切です。
  89. 7:06二つ目は、独立していない一節までアーティクルにすることです。
  90. 7:10単独で読めない内容は、親の記事の一部として扱いましょう。
  91. 7:15三つ目は、見出しを付けずに使うことです。
  92. 7:18記事の主題を示す見出しはできるだけ添えてください。
  93. 7:22アーティクルは、単独でも意味が通じる自己完結した内容のための要素です。
  94. 7:27独立性を合言葉に使ってみてください。
  95. 7:30迷ったときは、切り取って単独で読めるかという最初の問いに戻ってください。
  96. 7:36これで解説を終わります。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

articleタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。単独でも意味が通じる記事や投稿。内容の独立性を基準に選びます。

解説記事・サンプルコードを読む：HTMLのarticleタグとは？属性・使い方・ブラウザー互換性と活用例 →