HTMLタグ早見表

基本構造

タグ説明例
<!DOCTYPE html>HTML5であることを宣言。ファイルの1行目に書く
<!DOCTYPE html>
<html>HTML文書の最外枠。lang="ja" で日本語のページと伝える
<html lang="ja">
  ...
</html>
<head>ページの設定や情報を入れる(画面には表示されない)
<head>
  <meta charset="UTF-8">
  <title>自己紹介</title>
</head>
<body>実際にブラウザに表示される部分
<body>
  <h1>こんにちは</h1>
  <p>はじめまして</p>
</body>
<title>ブラウザのタブや検索結果に表示されるタイトル
<title>自己紹介ページ</title>
<meta>文字コード・説明などの情報。charset は文字化け防止
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

テキスト・構造

タグ説明例
<h1>〜<h6>見出し(数字が小さいほど大きな見出し)
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
<p>段落(paragraph)
<p>はじめまして。</p>
<p>よろしくお願いします。</p>
<br>改行(閉じタグなし)
こんにちは。<br>
こんばんは。
<strong>強調(太字+意味的強調)
<p>締め切りは<strong>金曜日</strong>です。</p>
<em>強調(イタリック)
<p>これは<em>大切</em>なことです。</p>
<span>文中の一部を囲む(インライン)。class と組み合わせて色などを変える
<p>今日は<span class="highlight">晴れ</span>です。</p>
<div>区切り・まとまりを作る(ブロック)
<div class="section">
  <h2>プロフィール</h2>
  <p>名前:山田太郎</p>
</div>

リンク・メディア

タグ説明例
<a>ハイパーリンク(他ページへのリンク)
<a href="about.html">プロフィールへ</a>
<a href="https://www.example.com" target="_blank">外部サイトを新しいタブで開く</a>
<img>画像表示。alt は画像の代わりの説明文
<img src="img/photo.jpg" alt="風景写真" width="300">
<video>動画を埋め込み。controls で再生ボタンを表示
<video src="movie.mp4" controls width="400"></video>
<audio>音声を再生。controls で再生ボタンを表示
<audio src="bgm.mp3" controls></audio>

フォーム(入力欄)

タグ説明例
<form>入力フォーム全体
<form action="send.php" method="post">
  <label>名前:</label>
  <input type="text" name="name">
  <button>送信</button>
</form>
<input>入力欄。type で種類が変わる(text, number, password, checkbox ...)
<input type="text" placeholder="お名前">
<input type="number" value="20">
<input type="checkbox"> 同意する
<textarea>複数行のテキスト入力
<textarea rows="4" cols="30" placeholder="感想を書いてください"></textarea>
<select>プルダウンメニュー
<select>
  <option>りんご</option>
  <option>みかん</option>
  <option>ぶどう</option>
</select>
<button>ボタン
<button id="startButton">スタート</button>
<label>入力項目の説明。for と id を揃えると、ラベルを押しても入力欄が選ばれる
<label for="name">名前:</label>
<input type="text" id="name">

もっと詳しく調べる