HTMLタグ チートシート

cheatsheet
HTMLWeb開発タグフロントエンドマークアップ

よく使うHTMLタグを目的別にまとめました。

テキスト関連タグ 📝

文章の構造や意味付け、装飾を行うためのタグです。

タグ 目的 主な属性 説明・使用例
<p> 段落 – 文章の段落を示します。ブロックレベル要素。
<p>これは段落です。</p>
<h1> – <h6> 見出し – セクションの見出しを示します。<h1>が最上位の見出しです。数字が大きくなるほど下位の見出しになります。
<h1>大見出し</h1>
<h2>中見出し</h2>
<strong> 重要性 – 内容の重要性を示します。通常は太字で表示されます。
<p>これは<strong>重要</strong>な情報です。</p>
<b> 強調 (視覚的) – 他のテキストと区別したいテキスト（キーワード、製品名など）を示します。通常は太字で表示されます。意味的な重要性はありません。
<p>この文章の<b>キーワード</b>はこれです。</p>
<em> 強調 – 内容の強調を示します。通常は斜体で表示されます。
<p>この点を<em>特に</em>強調します。</p>
<i> 区別 (視覚的) – 声や心の声、技術用語、他言語の語句など、他のテキストと区別されるテキストを示します。通常は斜体で表示されます。意味的な強調はありません。
<p>彼は<i>E=mc²</i>と説明した。</p>
<blockquote> 引用ブロック cite (引用元URL) 他のソースからの引用ブロックを示します。通常はインデントされます。
<blockquote cite="引用元URL">
  <p>引用文が入ります。</p>
</blockquote>
<q> 短い引用 cite (引用元URL) インラインでの短い引用を示します。通常は引用符で囲まれます。
<p>彼は<q cite="引用元URL">短い引用文</q>と言った。</p>
<cite> 作品名・参照元 – 引用元（書籍、論文、ウェブサイトなど）のタイトルを示します。
<p>詳しくは<cite>作品名</cite>を参照してください。</p>
<code> コード片 – コンピューターコードの一部を示します。インライン要素。
<p>関数名は<code>getUserData()</code>です。</p>
<pre> 整形済みテキスト – 空白や改行がそのまま表示されるテキストブロックを示します。主にコードブロックに使用されます。
<pre><code class="language-css">
body {
  font-family: sans-serif;
}
</code></pre>
<span> インライングループ化 class, id, style など インライン要素をグループ化し、スタイル適用やスクリプト操作の対象とするための汎用コンテナです。
<p>この<span style="color: blue;">青いテキスト</span>はspan要素です。</p>
<br> 改行 – テキスト内で強制的に改行します。空要素。
住所：東京都千代田区...<br>
電話：03-xxxx-xxxx
<hr> テーマ区切り – 段落レベルでのテーマの区切りを示します。通常は水平線として表示されます。空要素。
<p>前のセクションの内容。</p>
<hr>
<p>新しいセクションの内容。</p>
<small> 小さい文字 – 著作権表示や免責事項などの付帯情報を示します。通常は小さい文字で表示されます。
<p><small>© 2025 会社名</small></p>
<sub> 下付き文字 – 化学式や数式などで下付き文字を示します。
<p>水の化学式は H<sub>2</sub>O です。</p>
<sup> 上付き文字 – 注釈番号や数式の指数などで上付き文字を示します。
<p>脚注はこちら<sup>1</sup>をご覧ください。 E=mc<sup>2</sup></p>
<time> 日時 datetime 特定の日付や時刻を示します。datetime属性で機械可読な形式を指定します。
<p>会議は<time datetime="2025-10-26T10:00">10月26日午前10時</time>からです。</p>
<mark> ハイライト – 参照や注意喚起のためにテキストの一部をハイライト（マーカー表示）します。
<p>検索結果の<mark>キーワード</mark>がハイライトされます。</p>
<del> 削除されたテキスト cite, datetime 文書から削除されたテキストを示します。通常は取り消し線で表示されます。
<p>価格: <del>1,000円</del> 800円</p>
<s> 不正確・無関係なテキスト – もはや正確ではない、または関連性がなくなったテキストを示します。通常は取り消し線で表示されます。
<p><s>セールは明日まで！</s> セールは終了しました。</p>
<ins> 挿入されたテキスト cite, datetime 文書に追加されたテキストを示します。通常は下線で表示されます。
<p>価格: <del>1,000円</del> <ins>800円</ins></p>
<u> 下線 (非テキスト的) – スペルミスなど、テキスト的でない注釈を示すテキスト。通常は下線で表示されます。リンクと混同しやすいため、使用は慎重に。
<p>これは<u>重要</u>な単語です。（特別な意味合いで下線が必要な場合）</p>
<dfn> 定義語 title 用語が定義される箇所を示します。
<p><dfn>HTML</dfn>は HyperText Markup Language の略です。</p>
<abbr> 略語・頭字語 title 略語や頭字語を示します。title属性で正式名称を提供できます。
<p><abbr title="World Wide Web Consortium">W3C</abbr>が仕様を策定しています。</p>
<address> 連絡先情報 – 文書や記事の作者/所有者の連絡先情報を示します。
<address>
  お問い合わせ: <a href="mailto:info@example.com">info@example.com</a><br>
  住所: 東京都...
</address>
<ruby>, <rt>, <rp> ルビ（ふりがな） – 東アジア言語の文字にルビ（ふりがな）を付けます。<ruby>が全体を囲み、<rt>がルビテキスト、<rp>はルビ非対応ブラウザ用の括弧です。
<ruby>漢<rp>(</rp><rt>かん</rt><rp>)</rp>字<rp>(</rp><rt>じ</rt><rp>)</rp></ruby>
<bdo> 書字方向の上書き dir (“ltr” or “rtl”) テキストの書字方向（左から右、右から左）を明示的に上書きします。
<p>This text is LTR.</p>
<p><bdo dir="rtl">This text will be RTL.</bdo></p>
<wbr> 改行可能位置 – 長い単語やURLなど、必要に応じてブラウザが改行してもよい位置を示します。ハイフンは表示されません。
<p>thisisaverylongword<wbr>thatmightbreaklayout.</p>

リスト関連タグ 📑

項目をリスト形式で表示するためのタグです。

タグ 目的 主な属性 説明・使用例
<ul> 順序なしリスト – 順序が重要でない項目のリストを作成します。通常はビュレット（点）で表示されます。<li>要素を子要素として含みます。
<ul>
  <li>りんご</li>
  <li>バナナ</li>
</ul>
<ol> 順序付きリスト type (‘1’, ‘a’, ‘A’, ‘i’, ‘I’), start (開始番号), reversed (逆順) 順序が重要な項目のリストを作成します。通常は数字やアルファベットで表示されます。<li>要素を子要素として含みます。
<ol start="3" type="a">
  <li>ステップ C</li>
  <li>ステップ D</li>
</ol>
<li> リスト項目 value (<ol>内での番号指定) <ul>または<ol>内の各項目を示します。
<ul>
  <li>項目1</li> <!-- このタグ -->
</ul>
<dl> 定義リスト – 用語とその定義のリストを作成します。<dt>（用語）と<dd>（定義）を子要素として含みます。
<dl>
  <dt>HTML</dt>
  <dd>ウェブページの構造を記述するためのマークアップ言語。</dd>
  <dt>CSS</dt>
  <dd>ウェブページのスタイルを指定するための言語。</dd>
</dl>
<dt> 定義する用語 – <dl>内で定義される用語を示します。
<dd> 用語の定義 – <dl>内で<dt>に対応する定義や説明を示します。

リンク関連タグ 🔗

他のページやリソースへのリンクを作成するためのタグです。

タグ 目的 主な属性 説明・使用例
<a> ハイパーリンク href (リンク先URL/パス), target (‘_blank’, ‘_self’, etc.), rel (リンク先との関係), download (ダウンロード指定) 他のウェブページ、ファイル、メールアドレス、またはページ内の特定箇所へのリンクを作成します。
外部リンク 
<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Google</a>
ページ内リンク 
<a href="#section2">セクション2へ移動</a>
<!-- ... -->
<h2 id="section2">セクション2</h2>
メールリンク 
<a href="mailto:info@example.com">お問い合わせ</a>
電話リンク 
<a href="tel:03-1234-5678">03-1234-5678</a>
ダウンロードリンク 
<a href="/files/document.pdf" download="資料.pdf">資料をダウンロード</a>

画像・メディア関連タグ 🖼️🔊🎬

画像、音声、動画などのメディアコンテンツを埋め込むためのタグです。

タグ 目的 主な属性 説明・使用例
<img> 画像表示 src (画像URL/パス), alt (代替テキスト), width, height, loading (‘lazy’, ‘eager’), decoding (‘async’, ‘sync’, ‘auto’) 画像をページに埋め込みます。空要素。alt属性は必須です（アクセシビリティのため）。
<img src="images/logo.png" alt="サイトロゴ" width="150" height="50" loading="lazy">
<figure> 図表コンテナ – 図（画像、図版、コード例など）とそのキャプション（<figcaption>）をグループ化します。
<figure>
  <img src="images/chart.png" alt="売上グラフ">
  <figcaption>図1: 年度別売上グラフ</figcaption>
</figure>
<figcaption> 図表キャプション – <figure>要素内の図に対するキャプション（説明文）を提供します。
<audio> 音声再生 src, controls, autoplay, loop, muted, preload (‘none’, ‘metadata’, ‘auto’) 音声ファイルを埋め込み、再生コントロールを表示します。
<audio controls src="audio/bgm.mp3">
  お使いのブラウザは音声再生に対応していません。
</audio>
<video> 動画再生 src, controls, autoplay, loop, muted, poster (プレビュー画像), width, height, preload 動画ファイルを埋め込み、再生コントロールを表示します。
<video controls width="640" height="360" poster="images/preview.jpg" src="video/promo.mp4">
  お使いのブラウザは動画再生に対応していません。
</video>
<source> メディアリソース指定 src, type (MIMEタイプ), media (メディアクエリ) <audio>や<video>, <picture>要素内で、複数のメディアフォーマットや解像度を提供します。ブラウザは対応している最初のソースを選択します。
<video controls>
  <source src="video/promo.webm" type="video/webm">
  <source src="video/promo.mp4" type="video/mp4">
  申し訳ありませんが、動画の再生に対応していません。
</video>
<track> テキストトラック src (トラックファイルURL), kind (‘subtitles’, ‘captions’, ‘descriptions’, ‘chapters’, ‘metadata’), srclang (言語コード), label (表示ラベル), default <audio>や<video>要素に、字幕、キャプション、説明などの時間指定テキストトラックを追加します。
<video controls src="video.mp4">
  <track kind="subtitles" src="subtitles_ja.vtt" srclang="ja" label="日本語" default>
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
</video>
<picture> レスポンシブ画像 – デバイスの特性（画面サイズ、解像度など）に応じて異なる画像ソースを提供するためのコンテナです。<source>と<img>を子要素に持ちます。
<picture>
  <source srcset="images/logo-large.webp" type="image/webp" media="(min-width: 960px)">
  <source srcset="images/logo-medium.webp" type="image/webp" media="(min-width: 640px)">
  <source srcset="images/logo-large.jpg" media="(min-width: 960px)">
  <source srcset="images/logo-medium.jpg" media="(min-width: 640px)">
  <img src="images/logo-small.jpg" alt="サイトロゴ">
</picture>
<map> イメージマップ定義 name クリッカブルな領域を持つイメージマップを定義します。<img>のusemap属性と連携します。
<area> イメージマップ領域 shape (‘rect’, ‘circle’, ‘poly’, ‘default’), coords (座標), href, alt, target, download, rel <map>内でクリック可能な領域を定義します。空要素。
<img src="image.png" usemap="#infographic" alt="図解">
<map name="infographic">
  <area shape="rect" coords="34,44,270,350" href="page1.html" alt="詳細1">
  <area shape="circle" coords="290,172,130" href="page2.html" alt="詳細2">
</map>
<svg> SVGグラフィック width, height, viewBox など多数 スケーラブルベクターグラフィック (SVG) を埋め込みます。
<canvas> グラフィック描画領域 width, height JavaScriptを使って図形やグラフィックを描画するための領域を提供します。

テーブル関連タグ 📊

データを表形式で表示するためのタグです。

タグ 目的 主な属性 説明・使用例
<table> 表 – 表全体を囲みます。
<table class="table is-bordered">
  <!-- 表の内容 -->
</table>
<caption> 表キャプション – 表の内容を示すタイトルや説明を記述します。<table>直下に配置します。
<table>
  <caption>商品リスト</caption>
  <!-- ... -->
</table>
<thead> ヘッダー行グループ – 表のヘッダー行（列の見出し）をグループ化します。
<tbody> 本体行グループ – 表の本体となるデータ行をグループ化します。<table>内に複数配置可能です。
<tfoot> フッター行グループ – 表のフッター行（合計など）をグループ化します。
<tr> 行 – 表の一行を定義します。<th>や<td>を子要素に持ちます。
<th> ヘッダーセル scope (‘col’, ‘row’, ‘colgroup’, ‘rowgroup’), colspan (結合列数), rowspan (結合行数), abbr (短縮形) ヘッダーセル（見出しセル）を定義します。通常は太字・中央揃えで表示されます。scope属性でどのセルに対する見出しかを示します。
<thead>
  <tr>
    <th scope="col">商品名</th>
    <th scope="col">価格</th>
  </tr>
</thead>
<td> データセル colspan (結合列数), rowspan (結合行数), headers (対応するヘッダーID) データセル（内容セル）を定義します。
<tbody>
  <tr>
    <td>りんご</td>
    <td>100円</td>
  </tr>
</tbody>
<colgroup> 列グループ span (対象列数) 表内の1つ以上の列をグループ化し、スタイルなどを一括指定するために使用します。<col>要素を含めることができます。<caption>の後、<thead>などの前に配置します。
<col> 列定義 span (対象列数), style, class <colgroup>内で、列のプロパティを定義します。空要素。
<colgroup>
  <col span="1" style="background-color: #f0f0f0;">
  <col span="2">
</colgroup>
テーブル構造の例: 
<table class="table is-bordered is-striped is-hoverable">
  <caption>部署別連絡先</caption>
  <colgroup>
    <col style="width: 15em;"> <!-- 部署列 -->
    <col style="width: 15em;"> <!-- 担当者列 -->
    <col style="width: 15em;"> <!-- 内線番号列 -->
  </colgroup>
  <thead>
    <tr>
      <th scope="col">部署</th>
      <th scope="col">担当者</th>
      <th scope="col">内線番号</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">営業部</th>
      <td>山田 太郎</td>
      <td>123</td>
    </tr>
    <tr>
      <th scope="row">開発部</th>
      <td>佐藤 花子</td>
      <td>456</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">代表電話</th>
      <td>000</td>
    </tr>
  </tfoot>
</table>

フォーム関連タグ ⌨️🖱️

ユーザーからのデータ入力を受け付けるためのタグです。

タグ 目的 主な属性 説明・使用例
<form> フォーム action (送信先URL), method (‘get’, ‘post’), enctype (送信データ形式), target, novalidate (バリデーション無効化), autocomplete (‘on’, ‘off’) 入力要素（<input>, <textarea>など）をまとめるコンテナです。
<form action="/submit-data" method="post">
  <!-- フォーム要素 -->
</form>
<input> 入力フィールド 多数（後述） 様々なタイプの入力フィールドを作成します。type属性で種類を指定します。空要素。
主なtype属性値: text, password, email, url, tel, number, search, date, time, datetime-local, month, week, color, range, checkbox, radio, file, hidden, submit, reset, button, image
共通の主な属性: name (送信時の名前), value (初期値/送信値), placeholder (入力例), required (必須), readonly (読取専用), disabled (無効), size (表示幅), maxlength (最大文字数), min, max, step (数値/日付/範囲), pattern (正規表現バリデーション), list (<datalist>連携), autocomplete (自動補完)
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username" required placeholder="例: Yamada Taro">

<label for="password">パスワード:</label>
<input type="password" id="password" name="password" required>

<input type="checkbox" id="agree" name="agree" value="yes" required>
<label for="agree">利用規約に同意する</label>

<input type="radio" id="male" name="gender" value="male">
<label for="male">男性</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女性</label>

<input type="file" id="avatar" name="avatar" accept="image/*">

<input type="submit" value="送信" class="button is-primary">
<textarea> 複数行テキスト入力 name, rows (表示行数), cols (表示幅), placeholder, required, readonly, disabled, maxlength, wrap (‘soft’, ‘hard’) 複数行のテキスト入力エリアを作成します。
<label for="message">メッセージ:</label>
<textarea id="message" name="message" rows="5" cols="30" placeholder="お問い合わせ内容を入力してください"></textarea>
<select> ドロップダウンリスト name, multiple (複数選択可), required, disabled, size (表示行数) 選択肢のリスト（ドロップダウンまたはリストボックス）を作成します。<option>や<optgroup>を子要素に持ちます。
<label for="country">国:</label>
<select id="country" name="country" required>
  <option value="">選択してください</option>
  <option value="jp">日本</option>
  <option value="us">アメリカ</option>
</select>
<option> 選択肢 value (送信値), selected (初期選択), disabled (選択不可), label (表示ラベル) <select>または<datalist>内で選択肢を定義します。
<optgroup> 選択肢グループ label (グループ名), disabled (グループ全体無効) <select>内で選択肢をグループ化します。
<select name="food">
  <optgroup label="果物">
    <option value="apple">りんご</option>
    <option value="orange">みかん</option>
  </optgroup>
  <optgroup label="野菜">
    <option value="carrot">にんじん</option>
    <option value="tomato">トマト</option>
  </optgroup>
</select>
<button> ボタン type (‘submit’, ‘reset’, ‘button’), name, value, disabled, formaction, formenctype, formmethod, formtarget, formnovalidate クリック可能なボタンを作成します。<input type="button">よりも柔軟な内容（画像やテキスト装飾など）を含めることができます。
<button type="submit" class="button is-link">
  <span class="icon">
    <i class="fas fa-check"></i> <!-- Font Awesome等のアイコン想定 -->
  </span>
  <span>登録する</span>
</button>

<button type="reset" class="button">リセット</button>

<button type="button" class="button" onclick="alert('クリックされました!')">カスタムボタン</button>
<label> ラベル for (対応する入力要素のID) フォームの入力要素（<input>, <textarea>, <select>など）に関連付けられるキャプションを提供します。ラベルをクリックすると関連する入力要素がフォーカスされたり、チェックボックス/ラジオボタンがトグルされたりします。
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">

<!-- または、入力要素を内包する -->
<label>
  <input type="checkbox" name="subscribe" value="yes">
  ニュースレターを購読する
</label>
<fieldset> フォーム要素グループ化 name, disabled, form 関連するフォームコントロールをグループ化します。通常は枠線で囲まれます。
<legend> グループキャプション – <fieldset>グループのキャプションを提供します。<fieldset>の最初の子要素として配置します。
<fieldset>
  <legend>個人情報</legend>
  <label for="name">氏名:</label>
  <input type="text" id="name" name="name"><br>
  <label for="email">メール:</label>
  <input type="email" id="email" name="email">
</fieldset>
<datalist> 入力候補リスト id <input>要素の入力候補を提供します。<input>のlist属性に<datalist>のidを指定します。<option>要素を子要素に持ちます。
<label for="browser">お使いのブラウザ:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>
<output> 計算結果表示 for (関連入力要素IDリスト), form, name スクリプトによる計算結果やユーザー操作の結果を表示します。
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="a" name="a" value="50"> +
  <input type="number" id="b" name="b" value="25"> =
  <output name="result" for="a b">75</output>
</form>
<progress> 進捗状況 value (現在値), max (最大値) タスクの進捗状況（プログレスバー）を示します。value属性がない場合は不確定な進捗を示します。
<label for="file">ファイルダウンロード:</label>
<progress id="file" max="100" value="70"> 70% </progress>
<meter> 計測値 value, min, max, low (下限閾値), high (上限閾値), optimum (最適値) 既知の範囲内の数量（ディスク使用量、検索結果の関連度など）を示します。ゲージ表示。
<label for="disk_usage">ディスク使用量:</label>
<meter id="disk_usage" min="0" max="100" low="30" high="80" optimum="0" value="85">85%</meter>

セマンティック関連タグ 🧱

ページの構造やコンテンツの意味を明確にするためのタグです。SEOやアクセシビリティ向上に役立ちます。

タグ 目的・意味 説明・使い分け
<header> ヘッダー ページ全体またはセクションの導入的なコンテンツ（ロゴ、タイトル、ナビゲーションなど）を配置します。<body>直下や<article>, <section>内に配置できます。
<footer> フッター ページ全体またはセクションのフッター情報（著作権、作者情報、関連リンクなど）を配置します。<body>直下や<article>, <section>内に配置できます。
<nav> ナビゲーション 主要なナビゲーションリンク（グローバルナビゲーション、目次、ページ内リンクなど）をグループ化します。全てのリンクを<nav>に入れる必要はありません。
<main> 主要コンテンツ ページの主題となる主要なコンテンツを囲みます。1つのページに1つだけ配置します。ヘッダー、フッター、ナビゲーション、サイドバーなどは含めません。
<article> 独立したコンテンツ それ自体で完結し、独立して配信・再利用可能なコンテンツ（ブログ投稿、ニュース記事、フォーラム投稿など）を囲みます。通常は見出し（<h1>–<h6>）を含みます。入れ子にすることも可能です。
<section> テーマ別セクション 文書内のテーマごとのセクション（章、節など）を定義します。通常は見出し（<h1>–<h6>）を含みます。<article>より汎用的なセクショニング要素です。意味的なまとまりがない場合は<div>を使用します。
<aside> 補足情報・サイドバー 主要コンテンツとは間接的に関連するコンテンツ（補足、用語解説、広告、関連リンク、著者プロフィールなど）を配置します。サイドバーとしてよく使われます。
<address> 連絡先情報 最も近い<article>または<body>要素の作者や所有者の連絡先情報を示します。（テキスト関連タグで既出）
<figure> & <figcaption> 図表とキャプション 自己完結した図表（画像、コード、引用など）とそのキャプションを関連付けます。（メディア関連タグで既出）
<time> 日時 機械可読な形式で日時を示します。（テキスト関連タグで既出）
<mark> ハイライト 現在の文脈で関連性の高いテキスト部分をマークします。（テキスト関連タグで既出）
使い分けのヒント💡:
  • ページ全体の骨格: <header>, <nav>, <main>, <aside>, <footer>
  • 主要コンテンツ内の分割: <article> (独立性の高いコンテンツ), <section> (テーマごとの区切り)
  • 単なるスタイル目的のグルーピング: <div> (ブロックレベル), <span> (インライン)

メタデータ関連タグ (<head>内) ⚙️

ページのメタ情報（文字コード、タイトル、外部リソースなど）を指定するためのタグです。通常は<head>要素内に記述します。

タグ 目的 主な属性 説明・使用例
<title> ページタイトル – ブラウザのタブや検索結果に表示されるページのタイトルを定義します。必須要素です。
<title>ページのタイトル | サイト名</title>
<meta> メタデータ charset, name, content, http-equiv, property (OGP) ページの様々なメタ情報（文字コード、説明文、キーワード、ビューポート設定など）を指定します。空要素。
文字コード指定 (必須) 
<meta charset="UTF-8">
ページの説明文 (SEO) 
<meta name="description" content="このページの内容を簡潔に説明します。">
ビューポート設定 (レスポンシブ対応) 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
キーワード (SEO効果は低い) 
<meta name="keywords" content="キーワード1,キーワード2,キーワード3">
リフレッシュ/リダイレクト 
<!-- 5秒後に再読み込み -->
<meta http-equiv="refresh" content="5">
<!-- 3秒後に指定URLへリダイレクト -->
<meta http-equiv="refresh" content="3;url=https://example.com/">
Open Graph Protocol (OGP) 
<meta property="og:title" content="ページのタイトル">
<meta property="og:type" content="website">
<meta property="og:url" content="ページのURL">
<meta property="og:image" content="画像のURL">
<meta property="og:description" content="ページの説明">
<meta property="og:site_name" content="サイト名">
<link> 外部リソース関連付け rel (リソースとの関係), href (リソースURL), type (MIMEタイプ), sizes (アイコンサイズ), media (適用メディア), as (プリロード対象種別), crossorigin 外部リソース（主にCSSファイル、ファビコンなど）をページに関連付けます。空要素。
外部CSS読み込み 
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
ファビコン指定 
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
リソースのプリロード 
<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
Canonical URL指定 
<link rel="canonical" href="正規のURL">
<base> 基準URL href (基準URL), target (デフォルトのリンク先) ページ内の相対URLの基準となるURLを指定します。<head>内に1つだけ配置できます。空要素。
<base href="https://example.com/docs/" target="_blank">
<style> 埋め込みスタイル media (適用メディア), type (“text/css”) ページ内に直接CSSルールを記述します。通常は外部CSSファイル（<link>）の使用が推奨されます。
<style>
  body { background-color: lightblue; }
  p { color: navy; }
</style>
<script> スクリプト src, type, async, defer など JavaScriptコードを埋め込むか、外部ファイルを読み込みます。<head>内または<body>の末尾に配置されることが多いです。（詳細は次セクション）
<noscript> スクリプト非対応時コンテンツ – JavaScriptが無効なブラウザに対して表示するコンテンツを指定します。

スクリプト・スタイル関連タグ 📜🎨

JavaScriptやCSSをページに適用するためのタグです。

タグ 目的 主な属性 説明・使用例
<script> JavaScript実行 src (外部ファイルURL), type (‘text/javascript’, ‘module’), async (非同期実行), defer (遅延実行), nomodule (module非対応用), crossorigin, integrity (改ざん検知) JavaScriptコードを埋め込むか、外部ファイルを読み込んで実行します。
埋め込み 
<script>
   alert('Hello, world!');
 </script>
外部ファイル読み込み (通常) 
<script src="js/main.js"></script> <!-- bodyの最後に置くことが多い -->
外部ファイル読み込み (遅延実行) 
<script src="js/main.js" defer></script> <!-- HTML解析後に実行、順序保証 -->
外部ファイル読み込み (非同期実行) 
<script src="js/analytics.js" async></script> <!-- HTML解析と並行実行、順序不定 -->
モジュールとして読み込み 
<script type="module" src="js/app.js"></script>
<noscript> スクリプト非対応時 – JavaScriptが無効なブラウザや環境で表示される代替コンテンツを提供します。
<noscript>
   <p>このサイトの機能をフルに利用するにはJavaScriptを有効にしてください。</p>
 </noscript>
<style> 埋め込みCSS media, type (“text/css”) HTML文書内に直接CSSルールを記述します。通常は<head>内に配置します。（メタデータ関連タグで既出）
<head>
   <style>
     .highlight { color: yellow; }
   </style>
 </head>
<link> 外部CSS読み込み rel="stylesheet", href, type, media, title (代替スタイルシート名), disabled (無効化) 外部のCSSファイルを読み込んでページに適用します。通常は<head>内に配置します。（メタデータ関連タグで既出）
<head>
   <link rel="stylesheet" href="css/main.css">
   <link rel="stylesheet" href="css/print.css" media="print"> <!-- 印刷用スタイル -->
 </head>

その他のタグ 🧩

上記カテゴリに含まれない、その他の有用なタグです。

タグ 目的 主な属性 説明・使用例
<!-- ... --> コメント – HTMLコード内にメモや説明を残します。ブラウザには表示されません。
<!-- ここはヘッダーセクションです -->
<header>...</header>
<div> ブロックレベルコンテナ class, id, style などグローバル属性 意味を持たない汎用のブロックレベルコンテナです。主にCSSでスタイリングしたり、JavaScriptで操作したりするためのグループ化に使用されます。
<div class="content-wrapper">
  <h2>セクションタイトル</h2>
  <p>テキストコンテンツ...</p>
</div>
<span> インラインコンテナ class, id, style などグローバル属性 意味を持たない汎用のインラインコンテナです。テキストの一部などをグループ化してスタイル適用やスクリプト操作の対象とします。（テキスト関連タグで既出）
<p>テキストの一部を<span class="highlight">ハイライト</span>します。</p>
<iframe> インラインフレーム src (埋込URL), width, height, frameborder (‘0’, ‘1’), allow (機能許可), allowfullscreen, sandbox (セキュリティ制限), loading (‘lazy’, ‘eager’) 現在のHTMLページ内に別のHTMLページを埋め込みます。YouTube動画やGoogleマップの埋め込みなどでよく使用されます。
<iframe src="https://example.com" width="600" height="400" title="埋め込みコンテンツ" loading="lazy"></iframe>
<embed> 外部コンテンツ埋め込み src, type (MIMEタイプ), width, height 外部アプリケーションやプラグインが必要なコンテンツ（PDF、Flashなど）を埋め込みます。現在ではあまり推奨されません。空要素。
<embed src="movie.swf" type="application/x-shockwave-flash" width="300" height="200">
<object> 外部リソース埋め込み data (リソースURL), type, width, height, usemap, name, form 様々な外部リソース（画像、ネストされたブラウジングコンテキスト、プラグインコンテンツなど）を埋め込みます。<param>タグでパラメータを指定できます。<embed>より柔軟ですが、複雑です。
<object data="file.pdf" type="application/pdf" width="100%" height="500px">
  <p>PDFを表示できません。<a href="file.pdf">こちらからダウンロード</a>してください。</p>
</object>
<param> オブジェクトパラメータ name, value <object>要素で使用するパラメータを定義します。空要素。
<object classid="clsid:...">
  <param name="movie" value="movie.swf">
  <!-- 他のパラメータ -->
</object>
<template> HTMLテンプレート id ページ読み込み時にはレンダリングされず、JavaScriptから後で利用するためのHTMLフラグメントを保持します。
<template id="user-card-template">
  <div class="card">
    <h3>ユーザー名</h3>
    <p>メールアドレス</p>
  </div>
</template>

<script>
  const template = document.getElementById('user-card-template');
  const clone = template.content.cloneNode(true);
  // cloneをDOMに追加する処理...
</script>
<slot> Web Components スロット name Web Components (Shadow DOM) 内で使用され、コンポーネント利用者が独自のHTMLを挿入できるプレースホルダー（挿入口）を定義します。
<!-- シャドウDOM内の定義 -->
<div>
  <h2>コンポーネントタイトル</h2>
  <slot name="content">デフォルトコンテンツ</slot>
</div>

<!-- コンポーネントの利用 -->
<my-component>
  <p slot="content">ここにカスタムコンテンツを挿入</p>
</my-component>
<!DOCTYPE html> 文書型宣言 – HTML文書の種類を宣言します。HTML5ではこの形式が標準です。ファイルの先頭に記述します。
<!DOCTYPE html>
<html> ルート要素 lang (文書の言語) HTML文書全体のルート要素です。<head>と<body>を子要素に持ちます。
<html lang="ja">
  <!-- head と body -->
</html>
<head> 文書ヘッダー – 文書に関するメタ情報（タイトル、スタイル、スクリプト、メタデータなど）を含みます。ブラウザには直接表示されません。
<body> 文書本体 グローバル属性 (onload, onunload などイベントハンドラも) 実際にブラウザに表示されるコンテンツ（テキスト、画像、リンク、フォームなど）を含みます。

コメント

タイトルとURLをコピーしました