◀ 3.

HTML 要素 (タグ) 一覧と用途完全リファレンス

▶

編集

この記事の要点

HTML5 の要素 (タグ) は用途別に セマンティック / 見出し / テキスト / リスト / 表 / フォーム / メディア / リンク / メタ に分類される
セマンティック要素

は意味を持つレイアウト。SEO とスクリーンリーダの両方で重要
見出しは
〜
の 6 段階。1 ページに
は原則 1 つ

フォームは

+ /

</code> / <code><select></code> / <code><button></code> + <code><label></code> で構成</li><li>非推奨タグ: <code><font></code> <code><center></code> <code><marquee></code> <code><blink></code> <code><frame></code> は HTML5 で廃止 → CSS で置き換える</li></ul></td></tr></table>
<h2>HTML 要素の全体像</h2>

<p>HTML5 の要素は、表現したいコンテンツの意味と構造によって 9 グループに分類できます。各要素は<strong>セマンティクス (意味)</strong> と <strong>表示</strong>を持ち、CSS で見た目を、HTML で意味を担当します。</p>

<h2>1. 文書構造とセマンティック要素</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>要素</th><th>用途</th><th>典型例</th></tr></thead>
<tbody>
<tr><td><code><html></code></td><td>HTML 文書のルート</td><td>ページ全体を囲む</td></tr>
<tr><td><code><head></code></td><td>メタ情報</td><td>title / meta / link / script</td></tr>
<tr><td><code><body></code></td><td>表示される本文</td><td>ユーザに見える全要素を内包</td></tr>
<tr><td><code><header></code></td><td>ページ / セクションのヘッダ</td><td>ロゴ・サイトタイトル・グローバルナビ</td></tr>
<tr><td><code><nav></code></td><td>ナビゲーション</td><td>メニュー、パンくず</td></tr>
<tr><td><code><main></code></td><td>ページの主要コンテンツ</td><td>1 ページに 1 つ</td></tr>
<tr><td><code><article></code></td><td>独立した記事</td><td>ブログ記事、ニュース、コメント</td></tr>
<tr><td><code><section></code></td><td>テーマ単位の区切り</td><td>「料金」「特徴」など章</td></tr>
<tr><td><code><aside></code></td><td>補足コンテンツ</td><td>サイドバー、関連リンク</td></tr>
<tr><td><code><footer></code></td><td>フッタ</td><td>コピーライト、利用規約リンク</td></tr>
<tr><td><code><div></code></td><td>意味のないブロック</td><td>CSS グルーピング用</td></tr>
<tr><td><code><span></code></td><td>意味のないインライン</td><td>CSS のためのインライン区切り</td></tr>
</tbody>
</table>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
</head>
<body>
  <header>
    <h1>サイト名</h1>
    <nav><a href="/">ホーム</a> | <a href="/about">概要</a></nav>
  </header>
  <main>
    <article>
      <h2>記事タイトル</h2>
      <section>
        <h3>第 1 章</h3>
        <p>本文...</p>
      </section>
      <aside>関連リンク</aside>
    </article>
  </main>
  <footer>© 2026 Example</footer>
</body>
</html></code></pre>
<h2>2. 見出し要素 h1-h6</h2>

<p>見出しは情報の階層構造を示します。スクリーンリーダや検索エンジンが目次として認識します。</p>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>要素</th><th>レベル</th><th>使い方</th></tr></thead>
<tbody>
<tr><td><code><h1></code></td><td>最上位</td><td>ページタイトル、原則 1 ページ 1 つ</td></tr>
<tr><td><code><h2></code></td><td>大見出し</td><td>章、主要セクション</td></tr>
<tr><td><code><h3></code></td><td>中見出し</td><td>節</td></tr>
<tr><td><code><h4></code>〜<code><h6></code></td><td>小見出し</td><td>項、より細かい区切り</td></tr>
</tbody>
</table>

<p><strong>注意</strong>: 見た目を整えたいだけの理由で <code><h1></code> をデザイン目的に使うのは厳禁。CSS の <code>font-size</code> で調整します。</p>

<h2>3. テキスト要素</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>要素</th><th>用途</th><th>備考</th></tr></thead>
<tbody>
<tr><td><code><p></code></td><td>段落</td><td>ブロック要素</td></tr>
<tr><td><code><strong></code></td><td>強い強調 (重要)</td><td>セマンティクスあり (太字)</td></tr>
<tr><td><code><em></code></td><td>強調</td><td>イタリック</td></tr>
<tr><td><code><b></code></td><td>キーワード強調</td><td>意味弱、太字だけ</td></tr>
<tr><td><code><i></code></td><td>専門用語・外国語</td><td>意味弱、斜体だけ</td></tr>
<tr><td><code><mark></code></td><td>ハイライト</td><td>蛍光ペン風</td></tr>
<tr><td><code><small></code></td><td>注意書き</td><td>免責、著作権</td></tr>
<tr><td><code><sub></code> / <code><sup></code></td><td>下付き/上付き</td><td>H<sub>2</sub>O, x<sup>2</sup></td></tr>
<tr><td><code><br></code></td><td>改行</td><td>空要素</td></tr>
<tr><td><code><hr></code></td><td>区切り線</td><td>意味的区切り</td></tr>
<tr><td><code><pre></code></td><td>整形済みテキスト</td><td>等幅、改行保持</td></tr>
<tr><td><code><code></code></td><td>ソースコード</td><td>インライン</td></tr>
<tr><td><code><blockquote></code></td><td>引用ブロック</td><td>cite 属性で出典 URL</td></tr>
<tr><td><code><q></code></td><td>インライン引用</td><td>自動で引用符</td></tr>
</tbody>
</table>

<h2>4. リスト要素</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- 順不同リスト -->
<ul>
  <li>項目 1</li>
  <li>項目 2</li>
</ul>

<!-- 順序付きリスト -->
<ol>
  <li>手順 1</li>
  <li>手順 2</li>
</ol>

<!-- 定義リスト -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl></code></pre>
<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>要素</th><th>用途</th></tr></thead>
<tbody>
<tr><td><code><ul></code></td><td>順不同リスト (Unordered List)</td></tr>
<tr><td><code><ol></code></td><td>順序付きリスト (Ordered List)</td></tr>
<tr><td><code><li></code></td><td>リスト項目</td></tr>
<tr><td><code><dl></code></td><td>定義リスト</td></tr>
<tr><td><code><dt></code></td><td>定義する語</td></tr>
<tr><td><code><dd></code></td><td>その定義</td></tr>
</tbody>
</table>

<h2>5. 表 (table) 要素</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><table>
  <caption>2026 年売上</caption>
  <thead>
    <tr><th>月</th><th>売上</th></tr>
  </thead>
  <tbody>
    <tr><td>1 月</td><td>100 万円</td></tr>
    <tr><td>2 月</td><td>120 万円</td></tr>
  </tbody>
  <tfoot>
    <tr><th>合計</th><td>220 万円</td></tr>
  </tfoot>
</table></code></pre>
<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>要素</th><th>用途</th></tr></thead>
<tbody>
<tr><td><code><table></code></td><td>表のルート</td></tr>
<tr><td><code><caption></code></td><td>表のタイトル</td></tr>
<tr><td><code><thead></code></td><td>ヘッダ行のグループ</td></tr>
<tr><td><code><tbody></code></td><td>本体行のグループ</td></tr>
<tr><td><code><tfoot></code></td><td>フッタ行のグループ</td></tr>
<tr><td><code><tr></code></td><td>行</td></tr>
<tr><td><code><th></code></td><td>見出しセル</td></tr>
<tr><td><code><td></code></td><td>データセル</td></tr>
</tbody>
</table>

<h2>6. フォーム要素</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><form action="/submit" method="post">
  <label for="name">名前</label>
  <input type="text" id="name" name="name" required>

  <label for="email">メール</label>
  <input type="email" id="email" name="email">

  <label for="comment">コメント</label>
  <textarea id="comment" name="comment" rows="5">

  年齢
  

   ニュース受信
   男
   女

要素 / type	用途
	フォーム全体 (action / method)
	1 行テキスト
	メール (バリデーション付)
	パスワード (伏字)
	数値
	日付
	チェックボックス
	ラジオボタン
	ファイル選択
	非表示 (CSRF トークン等)
</code></td><td>複数行テキスト</td></tr> <tr><td><code><select></code> + <code><option></code></td><td>セレクトボックス</td></tr> <tr><td><code><button></code></td><td>ボタン (submit / button / reset)</td></tr> <tr><td><code><label></code></td><td>入力欄のラベル (for で紐付け)</td></tr> <tr><td><code><fieldset></code> + <code><legend></code></td><td>入力欄のグループ化</td></tr> </tbody> </table> <h2>7. メディア要素</h2> <pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- 画像 --> <img src="/img/hero.jpg" alt="ヒーロー画像" width="800" height="400"> <!-- 動画 --> <video controls width="640"> <source src="/video/demo.mp4" type="video/mp4"> <source src="/video/demo.webm" type="video/webm"> お使いのブラウザは動画をサポートしていません </video> <!-- 音声 --> <audio controls> <source src="/audio/bgm.mp3" type="audio/mpeg"> </audio> <!-- 図と説明 --> <figure> <img src="/img/graph.png" alt="売上推移"> <figcaption>図 1: 2026 年売上推移</figcaption> </figure> <!-- iframe --> <iframe src="https://example.com" width="600" height="400" title="埋め込み"></iframe></code></pre> <h2>8. リンク / メタ要素</h2> <table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%"> <thead><tr style="background:#e3f2fd"><th>要素</th><th>用途</th></tr></thead> <tbody> <tr><td><code><a href="..."></code></td><td>ハイパーリンク (target / rel)</td></tr> <tr><td><code><meta charset="UTF-8"></code></td><td>文字コード指定</td></tr> <tr><td><code><meta name="viewport" ...></code></td><td>レスポンシブ設定</td></tr> <tr><td><code><meta name="description" ...></code></td><td>検索結果用の説明</td></tr> <tr><td><code><link rel="stylesheet"></code></td><td>CSS 読み込み</td></tr> <tr><td><code><link rel="canonical"></code></td><td>正規 URL</td></tr> <tr><td><code><title></code></td><td>ページタイトル (タブ表示)</td></tr> <tr><td><code><script></code></td><td>JavaScript</td></tr> <tr><td><code><style></code></td><td>インライン CSS</td></tr> </tbody> </table> <h2>HTML5 で廃止 / 非推奨の要素</h2> <table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%"> <thead><tr style="background:#fff3e0"><th>廃止要素</th><th>代替手段</th></tr></thead> <tbody> <tr><td><code><font></code></td><td>CSS <code>font-family</code> / <code>color</code></td></tr> <tr><td><code><center></code></td><td>CSS <code>text-align:center</code></td></tr> <tr><td><code><marquee></code></td><td>CSS animation / JS</td></tr> <tr><td><code><blink></code></td><td>CSS animation</td></tr> <tr><td><code><frame></code> / <code><frameset></code></td><td><code><iframe></code> または CSS レイアウト</td></tr> <tr><td><code><big></code></td><td>CSS <code>font-size</code></td></tr> <tr><td><code><u></code> (装飾用途)</td><td>CSS <code>text-decoration:underline</code></td></tr> </tbody> </table> <h2>FAQ</h2> <p><strong>Q: <code><div></code> ばかり使っても良い？</strong><br /> A: 動きますが SEO とアクセシビリティで損します。意味があるブロックは <code><article></code> <code><section></code> <code><nav></code> 等を優先。</p> <p><strong>Q: <code><b></code> と <code><strong></code> どちらを使う？</strong><br /> A: 重要な内容なら <code><strong></code>、見た目だけ太字なら CSS で <code>font-weight:bold</code>。<code><b></code> はキーワード強調等の限定用途。</p> <p><strong>Q: <code><h1></code> は本当に 1 ページ 1 つ？</strong><br /> A: HTML5 ではセクション内 <code><h1></code> も理屈上 OK ですが、<strong>SEO と互換性</strong>のため 1 つに統一する運用が安全。</p> <!-- Amazonアソシエイト --> <!--<a target="_blank" href="https://www.amazon.co.jp/b?_encoding=UTF8&node=2127209051&linkCode=ll2&tag=g54gj49gdgfdh-22&linkId=30afebe7feda42522ac5fb99fd71997e&language=ja_JP&ref_=as_li_ss_tl">人気パソコン・周辺機器はこちら</a>--> <div class=""> <div class="article-edit-area"> <a id="article_edit_btn" class="btn btn-primary btn-sm" onclick="displayArticleButtonsModalOpen()">編集</a> </div> <!-- 記事ボタンモーダル --> <div id="modal_display_article_buttons_main" class="modal_main_small center" role="dialog" aria-modal="true" aria-label="記事操作"> <div id="modal_display_article_buttons_content" class="article-actions-panel"> <div class="action-section"> <div class="action-section-title">ページ</div> <div class="action-grid"> <form method="GET" action="https://jpn.itlibra.com/article/put/form"> <input type="hidden" name="article_id" value="10083" /> <input type="hidden" name="version" value="17" /> <button class="action-btn action-btn-primary" type="submit"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg> <span>ページを更新</span> </button> </form> <button class="action-btn action-btn-success" type="button" onclick="createArticleModalOpen()"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> <span>ページの作成</span> </button> <button class="action-btn action-btn-danger" type="button" onclick="deleteArticleConfirm()"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg> <span>ページを削除</span> </button> </div> </div> <div class="action-section"> <div class="action-section-title">テンプレート</div> <div class="action-grid"> <form method="GET" action="https://jpn.itlibra.com/template/post/form"> <input type="hidden" name="site_id" value="9"/> <button class="action-btn action-btn-secondary" type="submit"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg> <span>テンプレートを作成</span> </button> </form> <button class="action-btn action-btn-secondary" type="button" onclick="templateModalOpen()"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg> <span>テンプレートを更新</span> </button> </div> </div> <div class="action-section"> <div class="action-section-title">テーマ設定</div> <div class="action-grid"> <form method="GET" action="https://jpn.itlibra.com/site/put/form"> <input type="hidden" name="site_id" value="9" /> <button class="action-btn action-btn-outline" type="submit"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg> <span>テーマ設定</span> </button> </form> </div> </div> <script> function deleteArticleConfirm() { var ans = confirm("本当にこのページを削除しますか？"); if (ans==true){ $('#delete_article_form').submit(); } } </script> <form id="delete_article_form" method="POST" action="https://jpn.itlibra.com/article/delete/submit"> <input id="page-form-method" name="_method" type="hidden" value="DELETE"> <input type="hidden" name="_token" value="FEwGmChT5ZmilZ7pBd6KLg3krbDZHfXO51VH7zYt" autocomplete="off"> <input type="hidden" name="article_id" value="10083" /> </form> <button class="action-close-btn" type="button" onclick="displayArticleButtonsModalClose()">閉じる</button> </div> </div> <!-- ページ作成モーダル --> <div id="modal_create_article_main" class="modal_main_small center" role="dialog" aria-modal="true" aria-label="記事作成"> <p class="font-size-1-5 margin-half">ページの作成</p> <span class="q-desc"> <p> 親となるページを選択してください。 <img class="q-desc-img" src="https://jpn.itlibra.com/img/question.png" alt=""> </p> <span class="q-desc-text"> ページは必ず何かしらの親ページに紐づきます。<br/>親ページに紐づくページを子ページといいます。<br/>例：親=スポーツ, 子1=サッカー, 子2=野球<br/><br/>子ページを親ページとして更に子ページを作成することも可能です。<br/>例：親=サッカー, 子=サッカーのルール<br/><br/>親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！ </span> </span> <!-- 同階層のページ作成ボタン --> <form method="GET" action="https://jpn.itlibra.com/article/post/form" class="margin"> <input type="hidden" name="parent_article_id" value="10032" /> <input class="modal_btn" type="submit" value="HTML"/> </form> <!-- 子ページ作成ボタン --> <form method="GET" action="https://jpn.itlibra.com/article/post/form" class="margin"> <input type="hidden" name="parent_article_id" value="10083" /> <input class="modal_btn" type="submit" value="要素一覧"/> </form> <div class="margin_top_2 margin_bottom"> <button class="btn horizontal" onclick="createArticleModalClose()">閉じる</button> </div> </div> <script src="https://jpn.itlibra.com/js/modal/create_article_modal.js"></script> <!-- テンプレートモーダル --> <div id="modal_template_main" class="modal_main" role="dialog" aria-modal="true" aria-label="テンプレート一覧"> <p class="modal-title">テンプレート</p> <div id="template-list-modal" class="modal-scroll-big"> <ul class="modal-link-list"> <li> <a href="https://jpn.itlibra.com/template/put/form?template_id=37">コード＋ヘッダ</a> </li> <li> <a href="https://jpn.itlibra.com/template/put/form?template_id=34">コード</a> </li> </ul> </div> <div class="modal-actions"> <form method="GET" action="https://jpn.itlibra.com/template/post/form"> <input type="hidden" name="site_id" value="9"/> <button class="btn btn-primary">新規作成</button> </form> <button class="btn" onclick="templateModalClose()">閉じる</button> </div> </div> <script src="https://jpn.itlibra.com/js/modal/template_modal.js"></script> <script src="https://jpn.itlibra.com/js/modal/display_article_buttons_modal.js"></script> </div> <div class="margin"> <!-- SNS共有ボタン --> <div class="sns-share-bar"> <a class="sns-btn sns-btn-x" id="twitter-sns-btn" href="" onClick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;" rel="nofollow"> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg> <span>Post</span> </a> <script> var pageTitle = document.title; var twitterUrl = "https://twitter.com/share?text=" + pageTitle + "&url=" + "https://jpn.itlibra.com/article/10083" + "&hashtags=" + "CWiki"; twitterUrl = encodeURI(twitterUrl); $("#twitter-sns-btn").attr("href", twitterUrl) </script> <a class="sns-btn sns-btn-fb" target="_blank" href="https://www.facebook.com/share.php?u=https://jpn.itlibra.com/article/10083" rel="nofollow"> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg> <span>Share</span> </a> </div> </div> <!-- 子記事リスト --> <div class="article-list-card"> <div class="article-list-header"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg> 子ページ </div> <ol class="article-list-ol"> <li> <a href="https://jpn.itlibra.com/article/10628"> 構造 </a> </li> <li> <a href="https://jpn.itlibra.com/article/10625"> セクション </a> </li> <li> <a href="https://jpn.itlibra.com/article/10624"> テキスト・フォント </a> </li> <li> <a href="https://jpn.itlibra.com/article/10637"> リスト </a> </li> <li> <a href="https://jpn.itlibra.com/article/10626"> リンク・ボタン </a> </li> <li> <a href="https://jpn.itlibra.com/article/10633"> ルビ </a> </li> <li> <a href="https://jpn.itlibra.com/article/10644"> 画像 </a> </li> <li> <a href="https://jpn.itlibra.com/article/10648"> オブジェクト </a> </li> <li> <a href="https://jpn.itlibra.com/article/10634"> 動画・音声 </a> </li> <li> <a href="https://jpn.itlibra.com/article/10635"> フォーム </a> </li> <li> <a href="https://jpn.itlibra.com/article/10636"> その他 </a> </li> </ol> </div> <!-- 同階層の記事リスト --> <div class="article-list-card"> <div class="article-list-header"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg> 同階層のページ </div> <ol class="article-list-ol"> <li class=""> <a href="https://jpn.itlibra.com/article/10389"> 環境構築 </a> </li> <li class=""> <a href="https://jpn.itlibra.com/article/10369"> 文法 </a> </li> <li class="is-current"> <span>要素一覧</span> </li> <li class=""> <a href="https://jpn.itlibra.com/article/10380"> API </a> </li> <li class=""> <a href="https://jpn.itlibra.com/article/10383"> テンプレートエンジン </a> </li> <li class=""> <a href="https://jpn.itlibra.com/article/11033"> <head>タグに書いた内容が<body>タグに移動する場合の解決方法 </a> </li> <li class=""> <a href="https://jpn.itlibra.com/article/20815"> 空白(スペース)の入力方法 </a> </li> <li class=""> <a href="https://jpn.itlibra.com/article/21090"> テキスト/セレクトボックス/ラジオボタン変更時にJavascriptの関数を呼び出す方法 </a> </li> <li class=""> <a href="https://jpn.itlibra.com/article/21399"> buttonでformをsubmitさせない方法 </a> </li> </ol> </div> </div> </div> <div class="margin_top"> <!-- 記事メタ情報（サマリー） --> <div class="article-meta"> <span> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;opacity:0.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> 2026-05-17 14:48:25 </span> <span> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;opacity:0.5"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg> <a href="https://jpn.itlibra.com/user?user_id=2">atom</a> </span> <span> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;opacity:0.5"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg> 773 </span> </div> <!-- 詳細情報トグル --> <div class="article-info-toggles"> <button class="article-info-toggle-btn" onclick="var el=document.getElementById('detail_article'); el.style.display=(el.style.display==='none')?'block':'none';"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg> ページの詳細情報 </button> <button class="article-info-toggle-btn" onclick="var el=document.getElementById('display_article'); el.style.display=(el.style.display==='none')?'block':'none';"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg> 過去バージョン </button> </div> <!-- 記事詳細情報 --> <div id="detail_article" style="display:none;"> <div class="article-detail-card"> <div class="article-detail-grid"> <div class="article-detail-item"> <span class="article-detail-label">ページ作成者</span> <span class="article-detail-value"> <a href="https://jpn.itlibra.com/user?user_id=1">guest</a> </span> </div> <div class="article-detail-item"> <span class="article-detail-label">ページ更新者</span> <span class="article-detail-value"> <a href="https://jpn.itlibra.com/user?user_id=2">atom</a> </span> </div> <div class="article-detail-item"> <span class="article-detail-label">作成日時</span> <span class="article-detail-value">2017-08-03 09:40:44</span> </div> <div class="article-detail-item"> <span class="article-detail-label">更新日時</span> <span class="article-detail-value">2026-05-17 14:48:25</span> </div> <div class="article-detail-item"> <span class="article-detail-label">バージョン</span> <span class="article-detail-value">17</span> </div> <div class="article-detail-item"> <span class="article-detail-label">閲覧数</span> <span class="article-detail-value">773</span> </div> <div class="article-detail-item"> <span class="article-detail-label">テーマ作成者</span> <span class="article-detail-value"> <a href="https://jpn.itlibra.com/user?user_id=6">T</a> </span> </div> </div> </div> </div> <!-- 過去バージョン --> <div id="display_article" style="display:none;"> <div class="article-detail-card"> <div class="old-version-item"> <a href="https://jpn.itlibra.com/article/10083/old?old_version=16" class="old-version-link"> <span class="old-version-num">v16</span> <span class="old-version-info"> 要素一覧 <small> atom ・ 2026-05-17 14:48:25 </small> </span> </a> </div> <div class="old-version-item"> <a href="https://jpn.itlibra.com/article/10083/old?old_version=15" class="old-version-link"> <span class="old-version-num">v15</span> <span class="old-version-info"> 要素一覧 <small> atom ・ 2026-05-13 04:49:43 </small> </span> </a> </div> <div class="old-version-item"> <a href="https://jpn.itlibra.com/article/10083/old?old_version=14" class="old-version-link"> <span class="old-version-num">v14</span> <span class="old-version-info"> 要素一覧 <small> guest ・ 2018-05-08 07:27:47 </small> </span> </a> </div> <div class="old-version-item"> <a href="https://jpn.itlibra.com/article/10083/old?old_version=13" class="old-version-link"> <span class="old-version-num">v13</span> <span class="old-version-info"> 要素一覧 <small> guest ・ 2018-05-08 07:27:38 </small> </span> </a> </div> <div class="old-version-item"> <a href="https://jpn.itlibra.com/article/10083/old?old_version=12" class="old-version-link"> <span class="old-version-num">v12</span> <span class="old-version-info"> 要素一覧 <small> guest ・ 2018-05-08 07:22:38 </small> </span> </a> </div> <div class="old-version-item"> <a href="https://jpn.itlibra.com/article/10083/old?old_version=11" class="old-version-link"> <span class="old-version-num">v11</span> <span class="old-version-info"> 要素一覧 <small> guest ・ 2018-05-08 07:22:09 </small> </span> </a> </div> <div class="old-version-item"> <a href="https://jpn.itlibra.com/article/10083/old?old_version=10" class="old-version-link"> <span class="old-version-num">v10</span> <span class="old-version-info"> HTML要素 <small> guest ・ 2017-09-05 04:34:55 </small> </span> </a> </div> <div class="old-version-item"> <a href="https://jpn.itlibra.com/article/10083/old?old_version=9" class="old-version-link"> <span class="old-version-num">v9</span> <span class="old-version-info"> HTML要素 <small> guest ・ 2017-08-04 23:02:18 </small> </span> </a> </div> <div class="old-version-item"> <a href="https://jpn.itlibra.com/article/10083/old?old_version=8" class="old-version-link"> <span class="old-version-num">v8</span> <span class="old-version-info"> HTML要素 <small> guest ・ 2017-08-04 23:00:19 </small> </span> </a> </div> <div class="old-version-item"> <a href="https://jpn.itlibra.com/article/10083/old?old_version=7" class="old-version-link"> <span class="old-version-num">v7</span> <span class="old-version-info"> HTML要素 <small> guest ・ 2017-08-03 13:28:58 </small> </span> </a> </div> <div class="old-version-item"> <a href="https://jpn.itlibra.com/article/10083/old?old_version=6" class="old-version-link"> <span class="old-version-num">v6</span> <span class="old-version-info"> HTML要素 <small> guest ・ 2017-08-03 13:27:37 </small> </span> </a> </div> <div class="old-version-item"> <a href="https://jpn.itlibra.com/article/10083/old?old_version=5" class="old-version-link"> <span class="old-version-num">v5</span> <span class="old-version-info"> HTML要素 <small> guest ・ 2017-08-03 10:34:59 </small> </span> </a> </div> <div class="old-version-item"> <a href="https://jpn.itlibra.com/article/10083/old?old_version=4" class="old-version-link"> <span class="old-version-num">v4</span> <span class="old-version-info"> HTML要素 <small> guest ・ 2017-08-03 10:33:42 </small> </span> </a> </div> <div class="old-version-item"> <a href="https://jpn.itlibra.com/article/10083/old?old_version=3" class="old-version-link"> <span class="old-version-num">v3</span> <span class="old-version-info"> HTML要素 <small> guest ・ 2017-08-03 10:08:02 </small> </span> </a> </div> <div class="old-version-item"> <a href="https://jpn.itlibra.com/article/10083/old?old_version=2" class="old-version-link"> <span class="old-version-num">v2</span> <span class="old-version-info"> HTML要素 <small> guest ・ 2017-08-03 10:06:53 </small> </span> </a> </div> <div class="old-version-item"> <a href="https://jpn.itlibra.com/article/10083/old?old_version=1" class="old-version-link"> <span class="old-version-num">v1</span> <span class="old-version-info"> HTML要素 <small> guest ・ 2017-08-03 09:40:44 </small> </span> </a> </div> </div> </div> </div> <div class="margin_top"> <div style="text-align:center"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-4154575156543726" data-ad-slot="8959417453"></ins> <script> (adsbygoogle = window.adsbygoogle \|\| []).push({}); </script> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-4154575156543726" data-ad-slot="8959417453"></ins> <script> (adsbygoogle = window.adsbygoogle \|\| []).push({}); </script> </div> </div> <div class="margin_top"> <!-- 人気のページ --> <div class="info-card"> <h3 class="info-card-title"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;opacity:0.5"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg> 人気ページ </h3> <ul class="info-card-list"> <li> <span class="rank-num rank-top" style="background:#201e7d;color:#ffffff;">1</span> <a href="https://jpn.itlibra.com/article/20557"> Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法 </a> </li> <li> <span class="rank-num rank-top" style="background:#201e7d;color:#ffffff;">2</span> <a href="https://jpn.itlibra.com/article/20846"> tomcat の起動 / 停止ログと catalina.log・catalina.out の違い </a> </li> <li> <span class="rank-num rank-top" style="background:#201e7d;color:#ffffff;">3</span> <a href="https://jpn.itlibra.com/article/21056"> JavaScript base URL 取得方法｜window.location.origin と SSR/Node.js 対応 </a> </li> <li> <span class="rank-num rank-normal">4</span> <a href="https://jpn.itlibra.com/article/11017"> YouTube Data API v3 エラー一覧｜403/400/404 の主要原因と切り分け </a> </li> <li> <span class="rank-num rank-normal">5</span> <a href="https://jpn.itlibra.com/article/20514"> Spring Frameworkのアノテーション一覧 </a> </li> <li> <span class="rank-num rank-normal">6</span> <a href="https://jpn.itlibra.com/article/20317"> Laravel エラー一覧｜500/Blade/DB 接続/ルーティングの代表エラー </a> </li> <li> <span class="rank-num rank-normal">7</span> <a href="https://jpn.itlibra.com/article/10960"> 3Dグラフィックスとは｜モデリング/レンダリング/主要ソフトウェア (Blender / Maya) </a> </li> <li> <span class="rank-num rank-normal">8</span> <a href="https://jpn.itlibra.com/article/20560"> 【Spring】@Valueアノテーションとは </a> </li> <li> <span class="rank-num rank-normal">9</span> <a href="https://jpn.itlibra.com/article/20675"> CATALINA_HOME の確認方法 (Linux / Mac) </a> </li> <li> <span class="rank-num rank-normal">10</span> <a href="https://jpn.itlibra.com/article/20537"> 【Spring】@Autowiredアノテーションとは </a> </li> </ul> </div> <!-- 最近更新された記事 --> <div class="info-card"> <h3 class="info-card-title"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;opacity:0.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> 最近更新/作成されたページ </h3> <ul class="info-card-list"> <li> <a href="https://jpn.itlibra.com/article/20759"> Laravel キャッシュクリア完全ガイド（cache:clear / config:clear / </a> <span class="info-card-date">2026-05-18 07:42:07</span> </li> <li> <a href="https://jpn.itlibra.com/article/20754"> プロジェクトの作成と削除 </a> <span class="info-card-date">2026-05-18 07:42:07</span> </li> <li> <a href="https://jpn.itlibra.com/article/20507"> インストール直後にNetbeansが反応しない </a> <span class="info-card-date">2026-05-18 07:42:07</span> </li> <li> <a href="https://jpn.itlibra.com/article/11019"> 動画やチャンネルの検索 </a> <span class="info-card-date">2026-05-18 07:42:07</span> </li> <li> <a href="https://jpn.itlibra.com/article/11013"> APIキー取得方法 </a> <span class="info-card-date">2026-05-18 07:42:07</span> </li> <li> <a href="https://jpn.itlibra.com/article/11016"> チャンネル情報の取得 </a> <span class="info-card-date">2026-05-18 07:42:07</span> </li> <li> <a href="https://jpn.itlibra.com/article/10009"> API 入門 — Web API（REST / GraphQL / gRPC / </a> <span class="info-card-date">2026-05-18 07:42:07</span> </li> <li> <a href="https://jpn.itlibra.com/article/20488"> インストール(eclipseプラグイン) </a> <span class="info-card-date">2026-05-18 07:42:07</span> </li> <li> <a href="https://jpn.itlibra.com/article/20758"> Laravel「Dotenv values containing spaces must be surrounded </a> <span class="info-card-date">2026-05-18 07:42:07</span> </li> <li> <a href="https://jpn.itlibra.com/article/11023"> エラー一覧 </a> <span class="info-card-date">2026-05-18 07:42:07</span> </li> <li> <a href="https://jpn.itlibra.com/article/20501"> curl: (51) SSL: certificate subject name '～' does not match </a> <span class="info-card-date">2026-05-18 07:42:07</span> </li> <li> <a href="https://jpn.itlibra.com/article/20487"> インストール方法(Windows版) </a> <span class="info-card-date">2026-05-18 07:42:07</span> </li> <li> <a href="https://jpn.itlibra.com/article/11025"> JSONから配列に変換 </a> <span class="info-card-date">2026-05-18 07:42:07</span> </li> <li> <a href="https://jpn.itlibra.com/article/11022"> 処理を一定時間待つ </a> <span class="info-card-date">2026-05-18 07:42:07</span> </li> <li> <a href="https://jpn.itlibra.com/article/20746"> A non well formed numeric value encountered </a> <span class="info-card-date">2026-05-18 07:42:07</span> </li> </ul> </div> </div> <div class="margin_top"> <!-- ページコメント削除モーダル --> <div id="modal_delete_comment_main" class="modal_main_small center" role="dialog" aria-modal="true" aria-label="コメント削除"> <p class="font-size-1-5 margin-half">コメントを削除してもよろしいでしょうか？</p> <form class="horizontal" method="POST" name="delete_comment" action="https://jpn.itlibra.com/article/comment/delete/submit"> <input type="hidden" name="_token" value="FEwGmChT5ZmilZ7pBd6KLg3krbDZHfXO51VH7zYt" autocomplete="off"> <input name="_method" type="hidden" value="DELETE"> <input type="hidden" name="article_id" value="10083"> <input id="delete_comment_id" type="hidden" name="comment_id"> <button type="submit" class="btn btn-danger">はい</button> </form> <div class="margin_top_2 margin_bottom"> <button class="btn horizontal" onclick="deleteCommentModalClose()">キャンセル</button> </div> </div> <script src="https://jpn.itlibra.com/js/modal/delete_comment_modal.js"></script> </div> <script src="https://jpn.itlibra.com/js/articleViewCountUp.js?11111"></script> <script src="https://jpn.itlibra.com/js/siteViewCountUp.js?11111"></script> <script> articleViewCountUp(10083); siteViewCountUp(9); </script> </div> </div> </div> <!--<div id="footer_menu" class="flex"> <a href="https://jpn.itlibra.com/article/11040"> <p><img class="icon" src="https://jpn.itlibra.com/img/top.png" alt="top"></p> <p>トップ</p> </a> <a class="pointer" onclick="articlesModalOpen()"> <p><img class="icon" src="https://jpn.itlibra.com/img/page.png" alt="page"></p> <p>全ページ</p> </a> <a class="pointer" onclick="boardsModalOpen()"> <p><img class="icon" src="https://jpn.itlibra.com/img/board.png" alt="board"></p> <p>掲示板</p> </a> <a href="https://jpn.itlibra.com/questionBoard?site_id=9"> <p><img class="icon" src="https://jpn.itlibra.com/img/help.png" alt="help"></p> <p><span class="middle">質問</p> </a> </div>--> <!-- ページ一覧モーダル --> <script src="https://jpn.itlibra.com/js/modal/articles_modal.js"></script> <div id="modal_site_articles_main" class="modal_main" role="dialog" aria-modal="true" aria-label="ページ一覧"> <p class="modal-title">ページ一覧</p> <div id="board-list-modal" class="modal-scroll-big modal-scroll-x padding"> <div class="modal_article_item"> <a class="modal_article_item_a" href="https://jpn.itlibra.com/article/11040">トップページ</a> </div> <div id="modal_article_id_0"> </div> <script> var imagePlus = "\/img\/plus_2.png"; var imageMinus = "\/img\/minus_2.png"; var displayArticle = "\/article"; var getChildArticle = "\/api\/article\/children\/json"; var parent_article_id = 11040; var no_child_article = "\u5b50\u30da\u30fc\u30b8\u306f\u3042\u308a\u307e\u305b\u3093"; //子記事取得 var data = {parent_article_id: parent_article_id}; var menuFirst = 1; var result = getChidArticleModal( data ,imagePlus ,imageMinus ,displayArticle ,getChildArticle ,menuFirst ,no_child_article ); </script> </div> <div class="modal-actions"> <button class="btn" onclick="articlesModalClose()">閉じる</button> </div> </div> <!-- 掲示板一覧モーダル --> <div id="modal_site_boards_main" class="modal_main" role="dialog" aria-modal="true" aria-label="掲示板一覧"> <p class="modal-title">掲示板</p> <div id="board-list-modal" class="modal-scroll-big"> <ul class="modal-link-list"> </ul> </div> <div class="modal-actions"> <form method="get" action="https://jpn.itlibra.com/board/post/form"> <input type="hidden" name="site_id" value="9"> <button class="btn btn-primary">新規作成</button> </form> <button class="btn" onclick="boardsModalClose()">閉じる</button> </div> </div> <script src="https://jpn.itlibra.com/js/modal/boards_modal.js"></script> <div class="move-top"></div> <div class="move-bottom"></div> <!-- フッタ開始 --> <footer id="footer"> <div class="footer-inner"> <div class="footer-grid"> <div class="footer-col"> <h4 class="footer-heading">CWiki</h4> <a href="https://jpn.itlibra.com">CWiki</a> <a href="https://jpn.itlibra.com/help">ヘルプ</a> <a href="https://jpn.itlibra.com/inquiry/post/form">問い合わせ</a> </div> <div class="footer-col"> <h4 class="footer-heading">Legal</h4> <a href="https://jpn.itlibra.com/termsOfService">利用規約</a> <a href="https://jpn.itlibra.com/privacyPolicy">プライバシーポリシー</a> </div> <div class="footer-col"> <h4 class="footer-heading">Feed</h4> <a href="https://jpn.itlibra.com/sitemap/sitemap-index.xml">サイトマップ</a> <a href="https://jpn.itlibra.com/feed/articles">ページのフィード</a> <a href="https://jpn.itlibra.com/feed/boards">掲示板のフィード</a> </div> <div class="footer-col"> <h4 class="footer-heading">Account</h4> <a href="https://jpn.itlibra.com/login">ログイン</a> </div> </div> <div class="footer-bottom"> <span>© 2017 Libra</span> </div> </div> </footer> <span id="page-bottom"></span> </div> <!-- Scripts --> <!-- 表示速度とSEOの観点からbodyタグの一番下に記載する --> <!--<script src="https://jpn.itlibra.com/js/app.js" async></script>--> <script src="https://jpn.itlibra.com/js/common.js" async></script> <script src="https://jpn.itlibra.com/js/scroll.js" async></script> <script src="https://jpn.itlibra.com/js/jquery.sidebar.min.js"></script> <span></span> <!-- ローディング --> <div id="loading"> <div class="cv-spinner"> <span class="spinner"></span> </div> </div> </body> </html>

ページ一覧

その他

HTML 要素 (タグ) 一覧と用途完全リファレンス

〜
の 6 段階。1 ページに
は原則 1 つ

の 6 段階。1 ページに
は原則 1 つ

は原則 1 つ

ページ一覧

その他

HTML 要素 (タグ) 一覧と用途完全リファレンス

〜 の 6 段階。1 ページに は原則 1 つ

の 6 段階。1 ページに は原則 1 つ

は原則 1 つ

〜
の 6 段階。1 ページに
は原則 1 つ

の 6 段階。1 ページに
は原則 1 つ