SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

HTMLタグ一覧：現行の全要素と使い方、廃止タグまで解説の解説動画

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

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

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、シーエスエス入門、概要編です。
  3. 0:04今回のテーマは、エイチティーエムエルタグ一覧です。
  4. 0:08現行のエイチティーエムエル要素は、全部で百十三種類あります。
  5. 0:12全部を覚えるのかと心配になるかもしれませんが、その必要はありません。
  6. 0:17大切なのは暗記ではなく、分類の考え方です。
  7. 0:20タグは役割のグループで捉えると、初めて見るタグでも当たりが付けられます。
  8. 0:25元になる記事は、エスイーの部屋のエイチティーエムエルタグ一覧で、現行標準を決める機関の要素索引をもとに、
  9. 0:30要素を用途別に整理しています。
  10. 0:34今回のゴールは、書きたい内容に合うタグを、一覧から自分で探せるようになることです。
  11. 0:40まず用語をそろえます。
  12. 0:42画面の例で、ピーの開始タグから終了タグまで、内容を含めた全体を要素と呼びます。
  13. 0:48開始タグの中に書くクラスなどの追加情報が、属性です。
  14. 0:53次に、空要素に注意してください。
  15. 0:55アイエムジーやビーアール、エイチアールなど十三種類は、中身を持たないため終了タグを付けません。
  16. 1:03そして、文書の先頭に書くドクタイプ宣言は要素ではなく、標準モードで表示してほしい、
  17. 1:07という合図です。
  18. 1:11この三つの区別がつくと、一覧の説明文がぐっと読みやすくなります。
  19. 1:17ちなみに、メモを残すコメントも、要素ではありません。
  20. 1:21分類の一つ目は、文書の土台と設定です。
  21. 1:23エイチティーエムエル、ヘッド、ボディーの三つは、文書全体と本文を入れる器になります。
  22. 1:29タイトル、メタ、リンク、スタイル、ベースは、画面には直接出ない、裏側の設定を担う仲間です。
  23. 1:35タイトルはブラウザーのタブに表示される文書名、メタは文字コードや画面幅の指定、
  24. 1:39リンクは外部シーエスエスの読み込みなどに使います。
  25. 1:43迷いやすいのがリンクで、これはファイルとの関係を宣言するものです。
  26. 1:48ページ同士を移動するリンクには、後ほど出てくる、エーのタグを使い分けてください。
  27. 1:53スタイルは、ページの中にシーエスエスを直接書くためのタグです。
  28. 1:57二つ目は、ページの構造と見出しです。
  29. 2:00ヘッダー、ナブ、メイン、フッターは、ページの大きな領域に意味を付けるタグです。
  30. 2:07アーティクルは単独で意味が通じる記事、セクションは見出しのある主題のまとまり、
  31. 2:11アサイドは本文を補う関連情報を表します。
  32. 2:16エイチワンからエイチシックスは見出しの階層です。
  33. 2:20文字を大きく見せたいからではなく、情報の階層に合わせて選ぶのが原則です。
  34. 2:26構造の分類を押さえると、ページの骨組みはほぼ作れるようになります。
  35. 2:31なお、検索フォームなどをまとめるサーチというタグも、この仲間に新しく加わっています。
  36. 2:38著者への連絡先を示すアドレスも、この仲間に含まれます。
  37. 2:42三つ目は、段落・リスト・引用・図です。
  38. 2:46ピーは段落、ディブは特別な意味を持たないまとまりで、合う要素がないときの受け皿です。
  39. 2:53リストには、順番に意味がないユーエル、順番に意味があるオーエル、その項目のエルアイがあります。
  40. 3:00用語と説明の組なら、ディーエル、ディーティー、ディーディーの三つです。
  41. 3:06他人の文章をまとめて引用するブロッククォート、改行や空白をそのまま残すプレ、
  42. 3:12説明文とセットで図を示すフィギュアも、この仲間に入ります。
  43. 3:17文章を書く作業のほとんどは、この分類でまかなえます。
  44. 3:22話題の転換を示すエイチアールや、操作項目のリストであるメニューも、ここに入ります。
  45. 3:28四つ目は、文字の意味とリンクです。
  46. 3:31エーはリンクを作る代表選手ですが、クリックで何かを実行するだけの操作なら、
  47. 3:35ボタンが適切です。
  48. 3:39見た目が似ていて意味が違う組み合わせにも注意しましょう。
  49. 3:44ストロングは重要であること、ビーは読者の注意を向けたいだけ。
  50. 3:49イーエムは意味に関わる強勢、アイは性質の異なる文字を表します。
  51. 3:55そのほか、コードを示すコード、キー入力のケービーディー、日時のタイム、注目箇所のマークなど、
  52. 4:01文の一部に正確な意味を持たせるタグがそろっています。
  53. 4:08文字を太くしたり傾けたりするだけなら、それはシーエスエスの仕事です。
  54. 4:13ルビを振るルビーや、略語を示すエービービーアールなど、日本語の文章で役立つタグもあります。
  55. 4:21五つ目は、画像・動画・埋め込みです。
  56. 4:24アイエムジーは画像の基本で、内容を伝えるオルトと、幅と高さの指定が欠かせません。
  57. 4:29ピクチャーとソースは、画面の条件や画像の形式に応じて、表示するファイルを切り替える仕組みです。
  58. 4:36ビデオとオーディオは再生用で、操作ボタンや字幕用トラックの用意も検討します。
  59. 4:41アイフレームは別の文書の埋め込み、キャンバスはジャバスクリプトで絵を描く領域です。
  60. 4:47メディアは表示できない場面も多いので、代替テキストや代替リンクなど、困ったときの手当てまで含めて、
  61. 4:51この分類の守備範囲だと覚えてください。
  62. 4:56画像の一部分をリンクにするマップとエリア、という応用的な組み合わせもあります。
  63. 5:01六つ目は、表とフォームです。
  64. 5:04表はテーブルを土台に、題名のキャプション、見出し行のティーヘッド、データ行のティーボディー、
  65. 5:11見出しセルとデータセルで組み立てます。
  66. 5:17ページの配置のためではなく、行と列の関係があるデータ専用の道具です。
  67. 5:24フォームは、フォーム、レーベル、インプットが基本セットです。
  68. 5:30入力欄には必ずレーベルを結び付けてください。
  69. 5:34セレクトで候補から選び、テキストエリアで複数行を書き、フィールドセットで関連する項目をまとめます。
  70. 5:44進み具合を示すプログレス、測定値を示すメーターもこの仲間です。
  71. 5:50入力候補を出すデータリストや、計算結果を示すアウトプットも、フォームの仲間です。
  72. 5:58七つ目は、開閉・スクリプト・部品です。
  73. 6:01ディテールズとサマリーは、ジャバスクリプトなしで開閉できる補足情報を作る組み合わせです。
  74. 6:07ダイアログは画面に重ねて出すダイアログ用で、開閉の操作に加えて、キーボードのフォーカスの行き先まで考える必要があります。
  75. 6:15スクリプトはジャバスクリプトの読み込み、ノースクリプトは無効な環境への代替表示です。
  76. 6:21テンプレートは普段は表示されないひな型、スロットは部品への差し込み口を表します。
  77. 6:27この分類は、ページに動きや再利用の仕組みを持たせるためのものです。
  78. 6:31比較的新しいタグも多い分類なので、使う前にブラウザーの対応状況を確認する習慣を付けましょう。
  79. 6:38ここまでの分類を、実例で確かめましょう。
  80. 6:41画面は、お知らせ記事の部品です。
  81. 6:44全体をアーティクルで囲むのは、構造の分類から。
  82. 6:48開催日には、機械が読み取れる値を持たせたタイムを使いました。
  83. 6:54図と説明文はフィギュアとフィグキャプションの組で、画像、動画、埋め込みの分類です。
  84. 7:01最後は、リンクのエーで締めています。
  85. 7:04実際のページ作りは、このように分類を横断してタグを組み合わせる作業です。
  86. 7:11一覧を見るときも、これはどの分類で、何の意味のタグか、を言えるようになれば、
  87. 7:15もう十分に使いこなせています。
  88. 7:20使ったタグは少しでも、一つひとつの意味がはっきりしているのが、良いエイチティーエムエルの証拠です。
  89. 7:29最後に、廃止タグと学び方です。
  90. 7:31センター、フォント、マーキーといった古いタグは、見た目をエイチティーエムエルで指定していた時代の名残で、
  91. 7:36新しいページでは使いません。
  92. 7:42中央寄せはシーエスエスのテキストアライン、文字の大きさはフォントサイズへと置き換えます。
  93. 7:48また、エスブイジーや数式のマスエムエル、独自に定義するカスタム要素は、別の仕組みなので一覧の百十三には数えられていません。
  94. 7:58学び方のコツは、全部を追わないことです。
  95. 8:01まずは基本の顔ぶれでページを作り、目的が増えたときに一覧へ戻り、分類から探す。
  96. 8:07この行き来こそが、タグ一覧の正しい使い方です。
  97. 8:10分からないタグに出会ったら、まず分類から当たりを付けて、それから詳しい説明を読みにいきましょう。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

現行HTML要素113種類を用途別に一覧化。各タグの個別記事へ進み、属性・コード例・活用事例・ブラウザー互換性を確認できます。廃止タグの代替も整理します。

解説記事・サンプルコードを読む：HTMLタグ一覧：現行の全要素と使い方、廃止タグまで解説 →