HTMLタグ チートシート

<p>これは段落です。</p>

<h1>大見出し</h1>
<h2>中見出し</h2>

<p>これは<strong>重要</strong>な情報です。</p>

<p>この文章の<b>キーワード</b>はこれです。</p>

<p>この点を<em>特に</em>強調します。</p>

<p>彼は<i>E=mc²</i>と説明した。</p>

<blockquote cite="引用元URL"> <p>引用文が入ります。</p>
</blockquote>

<p>彼は<q cite="引用元URL">短い引用文</q>と言った。</p>

<p>詳しくは<cite>作品名</cite>を参照してください。</p>

<p>関数名は<code>getUserData()</code>です。</p>

<pre><code class="language-css">
body { font-family: sans-serif;
}
</code></pre>

<p>この<span style="color: blue;">青いテキスト</span>はspan要素です。</p>

住所：東京都千代田区...<br>
電話：03-xxxx-xxxx

<p>前のセクションの内容。</p>
<hr>
<p>新しいセクションの内容。</p>

<p><small> 2025 会社名</small></p>

<p>水の化学式は H<sub>2</sub>O です。</p>

<p>脚注はこちら<sup>1</sup>をご覧ください。 E=mc<sup>2</sup></p>

<p>会議は<time datetime="2025-10-26T10:00">10月26日午前10時</time>からです。</p>

<p>検索結果の<mark>キーワード</mark>がハイライトされます。</p>

<p>価格: <del>1,000円</del> 800円</p>

<p><s>セールは明日まで！</s> セールは終了しました。</p>

<p>価格: <del>1,000円</del> <ins>800円</ins></p>

<p>これは<u>重要</u>な単語です。（特別な意味合いで下線が必要な場合）</p>

<p><dfn>HTML</dfn>は HyperText Markup Language の略です。</p>

<p><abbr title="World Wide Web Consortium">W3C</abbr>が仕様を策定しています。</p>

<address> お問い合わせ: <a href="mailto:info@example.com">info@example.com</a><br> 住所: 東京都...
</address>

<ruby>漢<rp>(</rp><rt>かん</rt><rp>)</rp>字<rp>(</rp><rt>じ</rt><rp>)</rp></ruby>

<p>This text is LTR.</p>
<p><bdo dir="rtl">This text will be RTL.</bdo></p>

<p>thisisaverylongword<wbr>thatmightbreaklayout.</p>

<ul> <li>りんご</li> <li>バナナ</li>
</ul>

<ol start="3" type="a"> <li>ステップ C</li> <li>ステップ D</li>
</ol>

<ul> <li>項目1</li> <!-- このタグ -->
</ul>

<dl> <dt>HTML</dt> <dd>ウェブページの構造を記述するためのマークアップ言語。</dd> <dt>CSS</dt> <dd>ウェブページのスタイルを指定するための言語。</dd>
</dl>

<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="images/logo.png" alt="サイトロゴ" width="150" height="50" loading="lazy">

<figure> <img src="images/chart.png" alt="売上グラフ"> <figcaption>図1: 年度別売上グラフ</figcaption>
</figure>

<audio controls src="audio/bgm.mp3"> お使いのブラウザは音声再生に対応していません。
</audio>

<video controls width="640" height="360" poster="images/preview.jpg" src="video/promo.mp4"> お使いのブラウザは動画再生に対応していません。
</video>

<video controls> <source src="video/promo.webm" type="video/webm"> <source src="video/promo.mp4" type="video/mp4"> 申し訳ありませんが、動画の再生に対応していません。
</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 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>

<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>

<table class="table is-bordered"> <!-- 表の内容 -->
</table>

<table> <caption>商品リスト</caption> <!-- ... -->
</table>

<thead> <tr> <th scope="col">商品名</th> <th scope="col">価格</th> </tr>
</thead>

<tbody> <tr> <td>りんご</td> <td>100円</td> </tr>
</tbody>

<colgroup> <col span="1" style="background-color: #f0f0f0;"> <col span="2">
</colgroup>

<form action="/submit-data" method="post"> <!-- フォーム要素 -->
</form>

<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">

<label for="message">メッセージ:</label>
<textarea id="message" name="message" rows="5" cols="30" placeholder="お問い合わせ内容を入力してください"></textarea>

<label for="country">国:</label>
<select id="country" name="country" required> <option value="">選択してください</option> <option value="jp">日本</option> <option value="us">アメリカ</option>
</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" 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="email">メールアドレス:</label>
<input type="email" id="email" name="email">
<!-- または、入力要素を内包する -->
<label> <input type="checkbox" name="subscribe" value="yes"> ニュースレターを購読する
</label>

<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>

<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>

<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>

<label for="file">ファイルダウンロード:</label>
<progress id="file" max="100" value="70"> 70% </progress>

<label for="disk_usage">ディスク使用量:</label>
<meter id="disk_usage" min="0" max="100" low="30" high="80" optimum="0" value="85">85%</meter>

<title>ページのタイトル | サイト名</title>

<meta charset="UTF-8">

<meta name="description" content="このページの内容を簡潔に説明します。">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<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/">

<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="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>

<link rel="canonical" href="正規のURL">

<base href="https://example.com/docs/" target="_blank">

<style> body { background-color: lightblue; } p { color: navy; }
</style>

<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> <p>このサイトの機能をフルに利用するにはJavaScriptを有効にしてください。</p> </noscript>

<head> <style> .highlight { color: yellow; } </style> </head>

<head> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/print.css" media="print"> <!-- 印刷用スタイル --> </head>

<!-- ここはヘッダーセクションです -->
<header>...</header>

<div class="content-wrapper"> <h2>セクションタイトル</h2> <p>テキストコンテンツ...</p>
</div>

<p>テキストの一部を<span class="highlight">ハイライト</span>します。</p>

<iframe src="https://example.com" width="600" height="400" title="埋め込みコンテンツ" loading="lazy"></iframe>

<embed src="movie.swf" type="application/x-shockwave-flash" width="300" height="200">

<object data="file.pdf" type="application/pdf" width="100%" height="500px"> <p>PDFを表示できません。<a href="file.pdf">こちらからダウンロード</a>してください。</p>
</object>

<object classid="clsid:..."> <param name="movie" value="movie.swf"> <!-- 他のパラメータ -->
</object>

<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>

<!-- シャドウDOM内の定義 -->
<div> <h2>コンポーネントタイトル</h2> <slot name="content">デフォルトコンテンツ</slot>
</div>
<!-- コンポーネントの利用 -->
<my-component> <p slot="content">ここにカスタムコンテンツを挿入</p>
</my-component>

<!DOCTYPE html>

<html lang="ja"> <!-- head と body -->
</html>