iPhoneでつくる・学ぶノート
HTMLのタグと属性を整理しよう！目的別一覧表
これまで学んできたHTMLの知識を振り返り、タグと属性を目的別に整理します。
HTMLを学んでいると、さまざまなタグや属性が登場します。
「表を作りたいときは、どのタグを使うのか？」「入力欄に設定できる属性には、何があるのか？」
このような疑問を解決できるように、今回はこれまで学んできたHTMLの知識を目的別に整理しました。
何を作りたいのか、どのタグや属性を使えばよいのか。必要な知識を探せる一覧表を目指します。
1. HTMLの基本構造
HTMLは、Webページの構造や意味を表現するための言語です。まずは、ページの土台となる要素を整理します。
| タグ | 役割 |
|---|---|
| html | HTML文書全体を表す |
| head | 文書の設定情報を記述する |
| body | ページに表示する内容を記述する |
| h1〜h6 | 見出しを表す |
| p | 段落を表す |
| div | 汎用的なまとまりを作る |
| main | ページの主要な内容を表す |
| section | 意味のあるまとまりを表す |
覚えておきたいポイント
divは汎用的なまとまりを作る要素です。一方、mainやsectionは、内容の役割を示す意味を持っています。
見出しや段落などの要素には、必要に応じてidやclassを指定できます。
2. 文字・リンク・画像・リスト
文章を表示するだけでなく、リンクを作ったり、画像を表示したり、情報をリスト形式で整理したりできます。
| タグ | 役割 | 主な属性 |
|---|---|---|
| a | リンク | href |
| img | 画像 | src、alt、width |
| ul | 順序なしリスト | id、class |
| ol | 順序付きリスト | id、class |
| li | リストの各項目 | id、class |
| br | 改行 | 通常は不要 |
画像を表示するときの属性
- src：画像ファイルの場所を指定する
- alt：画像の代替となるテキストを指定する
- width：画像の幅を指定する
リンクを作るときの属性
hrefはリンク先を指定する属性です。記事内の特定の見出しへ移動する場合にも利用できます。
リンク元のhrefと移動先のidを対応させることで、ページ内移動を実現できます。
3. 表を作るためのタグ
表は、データを行と列で整理するときに便利です。表全体、見出し、データ部分、各行、各セルというように、役割ごとにタグを使い分けます。
| タグ | 役割 |
|---|---|
| table | 表全体 |
| caption | 表のタイトル |
| thead | 見出し行のグループ |
| tbody | 表の本体部分 |
| tfoot | 集計などの行グループ |
| tr | 1行 |
| th | 見出しセル |
| td | データセル |
表で使う主な属性
| 属性 | 役割 |
|---|---|
| scope | 見出しセルが対応する範囲を示す |
| colspan | セルを横方向に複数列分まとめる |
| rowspan | セルを縦方向に複数行分まとめる |
例えば、scope="col"は列の見出し、scope="row"は行の見出しであることを示すために使います。
theadは表の見出し部分、tbodyは表の本体部分を表します。
4. フォームと入力欄のタグ
フォームは、利用者が情報を入力したり、選択したりするための仕組みです。
| タグ | 役割 |
|---|---|
| form | フォーム全体 |
| label | 入力項目の説明 |
| input | 1行入力や選択など |
| textarea | 複数行のテキスト入力 |
| select | 選択リスト |
| option | 選択リストの選択肢 |
| fieldset | 関連する入力項目のグループ化 |
| legend | 入力項目グループの見出し |
| button | ボタン |
inputのtype属性
typeは、入力欄の種類や動作を指定する属性です。
| 指定値 | 用途 |
|---|---|
| text | 1行の文字入力 |
| number | 数値入力 |
| メールアドレス入力 | |
| date | 日付入力 |
| checkbox | チェックボックス |
| radio | ラジオボタン |
| submit | フォーム送信 |
入力欄で使う主な属性
- id：要素を個別に識別する
- name：フォーム送信時のデータ名を指定する
- value：値を指定する
- placeholder：入力前のヒントを表示する
- required：入力などを必須にする
- min：最小値を指定する
- max：最大値を指定する
- checked：チェックボックスやラジオボタンを選択状態にする
- selected：選択リストの選択肢を初期選択状態にする
- for：labelと対応する入力要素のidを指定する
id・name・valueの違い
id：どの要素なのかを識別する
name：フォーム送信時に何という項目名で扱うかを指定する
value：入力値や選択肢に対応する値を指定する
この3つは似ているようで役割が異なります。違いを理解すると、フォームを作成するときに迷いにくくなります。
5. よく使う属性の一覧
属性は、タグに追加の情報や設定を与えるものです。ここでは、これまで登場した属性を横断的に整理します。
| 属性 | 主な用途 |
|---|---|
| id | 要素の個別識別 |
| class | 要素のグループ化 |
| lang | 言語の指定 |
| href | リンク先の指定 |
| src | 読み込み元の指定 |
| alt | 画像の代替テキスト |
| width | 幅の指定 |
| type | 入力方式などの指定 |
| name | フォーム項目名などの指定 |
| value | 値の指定 |
| placeholder | 入力のヒント |
| required | 必須入力の指定 |
| min・max | 最小値・最大値の指定 |
| for | labelの対応先の指定 |
| scope | 表の見出しが対応する範囲 |
| colspan・rowspan | 表のセルを横・縦方向にまとめる |
すべての属性が、すべてのタグで使えるわけではありません。属性を使うときは、対象となるタグで利用できるかを確認しましょう。
6. HTMLとJavaScriptの違い
これまでの実践学習では、HTMLだけでなくJavaScriptも使用しました。現在はHTMLの学習を優先していますが、過去に学んだ内容を振り返るため、主な機能を整理しておきます。
| 学習内容 | 主な役割 |
|---|---|
| let・const | 変数の宣言 |
| Number() | 数値への変換 |
| getElementById() | idによる要素の取得 |
| if・else | 条件分岐 |
| for | 繰り返し処理 |
| 配列 | 複数の値をまとめて管理する |
| function | 処理を関数としてまとめる |
| console.log() | コンソールへの出力 |
HTMLはページの構造、JavaScriptは計算や条件判定などの動きを担当します。それぞれの役割を区別すると、どこを修正すればよいのか判断しやすくなります。
7. 今回のまとめ
今回は、これまで学んできたHTMLのタグと属性を、目的別に整理しました。
1. タグは役割で使い分ける
表ならtable、行ならtr、見出しセルならth、データセルならtdというように、作りたいものに応じて選びます。
2. 属性は対象のタグとセットで考える
idやclassのように多くの要素で使える属性もあれば、scopeやcolspanのように用途が限られる属性もあります。
3. 目的から逆算してコードを組み立てる
何を作りたいのかを明確にし、必要なタグと属性を選びます。
すべてを暗記する必要はありません。まずは今回の一覧を見ながら、目的に合ったタグと属性を自分で選べるようになることを目指します。
これからも、iPhoneを使いながら一つずつ知識を積み重ね、HTMLを自分で組み立てられる力を身につけていきたいと思います。
※この記事はHTMLの学習内容を振り返るための整理資料です。各タグ・属性の詳しい仕様については、MDN Web Docsなどの技術資料も確認しながら理解を深めていきます。
参考資料：MDN Web Docs｜HTML