</code></td><td>ブラウザタブと検索結果に表示されるページタイトル</td></tr><tr><td><code><link></code></td><td>外部CSSやfaviconの読み込み</td></tr><tr><td><code><script></code></td><td>JavaScriptの記述・外部JSファイルの読み込み</td></tr><tr><td><code><style></code></td><td>インラインCSSの記述</td></tr></tbody></table></figure>
<p class="wp-block-paragraph">下が最小限の骨格です。新規ファイルはここからコピーして書き始めると確実です。</p>
<p class="wp-block-paragraph"><pre><code><!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ページタイトル</title> <link rel="stylesheet" href="https://example.com/style.css"> </head> <body> <!-- コンテンツをここに書く --> </body> </html> </code></pre></p>
<p class="wp-block-paragraph"><span style="background:linear-gradient(transparent 60%,#fff462 60%);font-weight:bold;"><strong><code><head></code>の中身は読者に表示されず、<code><body></code>の中身だけが画面に出る</strong></span>——この役割分担が骨格理解の第一歩です。構造の詳しい解説は<a href="https://awcs.org/learning/html/basic-structure/" target="_blank" rel="nofollow noopener noreferrer">HTMLの基本構造を徹底解説</a>で扱っています。</p>
<h2 class="wp-block-heading">セクション・レイアウトタグ</h2>
<p class="wp-block-paragraph">ページの構造を示す<strong>セマンティック（意味を持つ）なタグ</strong>です。SEOとアクセシビリティに直結します。</p>
<figure class="wp-block-table" style="overflow-x:auto;-webkit-overflow-scrolling:touch;"><table style="font-size:0.85em;white-space:nowrap;"><thead><tr><th>タグ</th><th>意味・役割</th></tr></thead><tbody><tr><td><code><header></code></td><td>ページまたはセクションのヘッダー（ロゴ・ナビなど）</td></tr><tr><td><code><nav></code></td><td>ナビゲーションリンクのまとまり</td></tr><tr><td><code><main></code></td><td>ページのメインコンテンツ。1ページに1つ</td></tr><tr><td><code><article></code></td><td>独立した記事コンテンツ（ブログ記事・ニュースなど）</td></tr><tr><td><code><section></code></td><td>テーマでまとまったコンテンツのセクション</td></tr><tr><td><code><aside></code></td><td>メインコンテンツに関連するサイドバーや補足情報</td></tr><tr><td><code><footer></code></td><td>ページまたはセクションのフッター</td></tr><tr><td><code><div></code></td><td>グループ化用の汎用ブロック要素（意味なし）</td></tr><tr><td><code><span></code></td><td>グループ化用の汎用インライン要素（意味なし）</td></tr></tbody></table></figure>
<p class="wp-block-paragraph"><code><div></code>や<code><span></code>は便利ですが、意味を持ちません。<strong>意味のあるタグ（<code><nav></code>や<code><article></code>など）が使える場面では、そちらを優先</strong>しましょう。検索エンジンやスクリーンリーダーが構造を正しく理解できます。</p>
<h2 class="wp-block-heading">見出しタグ</h2>
<p class="wp-block-paragraph">文書の階層を示すタグです。SEO上も重要な役割を持ちます。</p>
<figure class="wp-block-table" style="overflow-x:auto;-webkit-overflow-scrolling:touch;"><table style="font-size:0.85em;white-space:nowrap;"><thead><tr><th>タグ</th><th>意味・役割</th></tr></thead><tbody><tr><td><code><h1></code></td><td>最上位の見出し。ページに1つだけが基本</td></tr><tr><td><code><h2></code></td><td>2番目の見出し。大項目</td></tr><tr><td><code><h3></code></td><td>3番目の見出し。中項目</td></tr><tr><td><code><h4></code></td><td>4番目の見出し</td></tr><tr><td><code><h5></code></td><td>5番目の見出し</td></tr><tr><td><code><h6></code></td><td>最下位の見出し</td></tr></tbody></table></figure>
<p class="wp-block-paragraph"><div class="point-box"> <strong>見出しの鉄則</strong> <ul class="box-list"> <li><strong>h1→h2→h3</strong>の順番を守り、階層をスキップしない（h2の次にいきなりh4を使わない）</li> <li>見た目の大きさで選ばず、<strong>文書構造として選ぶ</strong>（大きく見せたいだけならCSSで）</li> </ul> </div></p>
<h2 class="wp-block-heading">テキスト・インラインタグ</h2>
<p class="wp-block-paragraph">文章の意味づけや装飾に使うタグです。<strong>見た目より「意味」で選ぶ</strong>のがポイントになります。</p>
<figure class="wp-block-table" style="overflow-x:auto;-webkit-overflow-scrolling:touch;"><table style="font-size:0.85em;white-space:nowrap;"><thead><tr><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><br></code></td><td>改行（終了タグなし）</td><td>—</td></tr><tr><td><code><hr></code></td><td>水平線・区切り線</td><td>—</td></tr><tr><td><code><small></code></td><td>補足・注釈などの小さいテキスト</td><td>小さい文字</td></tr><tr><td><code><mark></code></td><td>ハイライト・マーカー</td><td>背景に色</td></tr><tr><td><code><code></code></td><td>コード（インライン）</td><td>等幅フォント</td></tr><tr><td><code><pre></code></td><td>整形済みテキスト（インデント・改行保持）</td><td>—</td></tr><tr><td><code><blockquote></code></td><td>引用ブロック</td><td>—</td></tr><tr><td><code><cite></code></td><td>引用元の出典</td><td>—</td></tr><tr><td><code><time></code></td><td>日時の表示</td><td>—</td></tr><tr><td><code><abbr></code></td><td>略語（ホバーで正式名称を表示）</td><td>—</td></tr></tbody></table></figure>
<p class="wp-block-paragraph"><code><br></code>での改行と<code><p></code>での段落分けは混同しがちです。違いと正しい使い分けは<a href="https://awcs.org/learning/html/html-line-break/" target="_blank" rel="nofollow noopener noreferrer">HTMLの改行方法｜brタグとpタグの違い</a>で詳しく整理しています。</p>
<h2 class="wp-block-heading">リンク・画像タグ</h2>
<p class="wp-block-paragraph">ページをつなぐリンク、コンテンツを彩る画像のタグです。</p>
<figure class="wp-block-table" style="overflow-x:auto;-webkit-overflow-scrolling:touch;"><table style="font-size:0.85em;white-space:nowrap;"><thead><tr><th>タグ</th><th>主要属性</th><th>役割</th></tr></thead><tbody><tr><td><code><a></code></td><td><code>href</code> <code>target</code> <code>rel</code></td><td>ハイパーリンク</td></tr><tr><td><code><img></code></td><td><code>src</code> <code>alt</code> <code>width</code> <code>height</code></td><td>画像の表示</td></tr><tr><td><code><picture></code></td><td>—</td><td>レスポンシブ画像（複数ソース指定）</td></tr><tr><td><code><figure></code></td><td>—</td><td>画像・図表などのキャプション付きコンテンツ</td></tr><tr><td><code><figcaption></code></td><td>—</td><td>figureのキャプション</td></tr></tbody></table></figure>
<p class="wp-block-paragraph"><pre><code><!-- リンク --> <a href="https://example.com/" target="_blank" rel="noopener noreferrer">外部リンク</a></p>
<p class="wp-block-paragraph"><!-- 画像（alt属性必須） --> <img src="https://example.com/photo.jpg" alt="富士山の風景" width="800" height="600"></p>
<p class="wp-block-paragraph"><!-- キャプション付き画像 --> <figure> <img src="https://example.com/photo.jpg" alt="富士山の風景"> <figcaption>富士山（静岡県・山梨県）</figcaption> </figure> </code></pre></p>
<p class="wp-block-paragraph">画像では<strong><code>alt</code>属性が必須</strong>です。代替テキストは視覚障害者向けの読み上げにも、画像が表示できないときの代わりにも使われます。<code><a></code>タグの<code>target</code>・<code>rel</code>属性の使い分けは<a href="https://awcs.org/learning/html/a-tag/" target="_blank" rel="nofollow noopener noreferrer">aタグの使い方</a>、画像の最適化は<a href="https://awcs.org/learning/html/img-tag/" target="_blank" rel="nofollow noopener noreferrer">imgタグの使い方</a>で掘り下げています。</p>
<h2 class="wp-block-heading">リストタグ</h2>
<p class="wp-block-paragraph">項目を整理して見せるタグです。<strong>3種類の使い分け</strong>を覚えると、文書がぐっと読みやすくなります。</p>
<figure class="wp-block-table" style="overflow-x:auto;-webkit-overflow-scrolling:touch;"><table style="font-size:0.85em;white-space:nowrap;"><thead><tr><th>タグ</th><th>役割</th></tr></thead><tbody><tr><td><code><ul></code></td><td>順不同リスト（箇条書き・黒丸）</td></tr><tr><td><code><ol></code></td><td>順序付きリスト（番号付き）</td></tr><tr><td><code><li></code></td><td>リストの各項目（ul/olの子要素）</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></figure>
<h3 class="wp-block-heading">リストの使い分けの判断軸</h3>
<p class="wp-block-paragraph">どのリストを使うかは、<strong>「並びに順番の意味があるか」</strong>で決まります。</p>
<p class="wp-block-paragraph"><div class="preview-box"> <ol class="box-list is-num"> <li><strong>順番に意味がない</strong>（好きな食べ物・特徴の列挙など）→ <code>ul</code>（順不同リスト）</li> <li><strong>順番に意味がある</strong>（手順・ランキング・ステップなど）→ <code>ol</code>（順序付きリスト）</li> <li><strong>「用語」と「その説明」のペア</strong>（用語集・FAQ・スペック表など）→ <code>dl</code>（定義リスト）</li> </ol> </div></p>
<p class="wp-block-paragraph">たとえば料理の材料は順番が関係ないので<code>ul</code>、調理の手順は順番が大事なので<code>ol</code>、という具合です。<code>li</code>は必ず<code>ul</code>か<code>ol</code>の<strong>直接の子要素</strong>として置きます。</p>
<p class="wp-block-paragraph"><pre><code><!-- 箇条書き（順番に意味なし） --> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul></p>
<p class="wp-block-paragraph"><!-- 番号付き（順番に意味あり） --> <ol> <li>ドメイン取得</li> <li>サーバー契約</li> <li>WordPress設置</li> </ol></p>
<p class="wp-block-paragraph"><!-- 定義リスト（用語と説明） --> <dl> <dt>HTML</dt> <dd>HyperText Markup Language の略。Webページの構造を定義する言語。</dd> </dl> </code></pre></p>
<p class="wp-block-paragraph"><span style="background:linear-gradient(transparent 60%,#fff462 60%);font-weight:bold;">リストは「見た目を点や数字にしたいから」ではなく「項目の関係を示すために」使う</span>のが正しい考え方です。インデントや記号の見た目はCSSで自由に変えられます。CSSの役割は<a href="https://awcs.org/learning/css/what-is-css/" target="_blank" rel="nofollow noopener noreferrer">CSSとは？書き方の基本</a>で確認してください。</p>
<h2 class="wp-block-heading">テーブルタグ</h2>
<p class="wp-block-paragraph">行と列で整理したデータを表示するタグです。比較表やスペック表で活躍します。</p>
<figure class="wp-block-table" style="overflow-x:auto;-webkit-overflow-scrolling:touch;"><table style="font-size:0.85em;white-space:nowrap;"><thead><tr><th>タグ</th><th>役割</th></tr></thead><tbody><tr><td><code><table></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><tr><td><code><caption></code></td><td>テーブルのキャプション（タイトル）</td></tr></tbody></table></figure>
<p class="wp-block-paragraph"><pre><code><table> <caption>HTML学習ロードマップ</caption> <thead> <tr> <th>ステップ</th> <th>学ぶ内容</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>基本タグ（h1・p・a・img）</td> </tr> <tr> <td>2</td> <td>リスト・テーブル</td> </tr> </tbody> </table> </code></pre></p>
<p class="wp-block-paragraph"><code><table></code>はあくまで<strong>データの表</strong>に使うタグです。かつてはページのレイアウト（段組み）にも使われましたが、現在はCSSで組むのが標準になっています。書き方の詳細は<a href="https://awcs.org/learning/html/table-tag/" target="_blank" rel="nofollow noopener noreferrer">tableタグの書き方</a>で解説しています。</p>
<h2 class="wp-block-heading">フォームタグ</h2>
<p class="wp-block-paragraph">ユーザーからの入力を受け取るタグです。お問い合わせ・検索・申し込みなどに使います。</p>
<figure class="wp-block-table" style="overflow-x:auto;-webkit-overflow-scrolling:touch;"><table style="font-size:0.85em;white-space:nowrap;"><thead><tr><th>タグ</th><th>主要属性</th><th>役割</th></tr></thead><tbody><tr><td><code><form></code></td><td><code>action</code> <code>method</code></td><td>フォーム全体</td></tr><tr><td><code><input></code></td><td><code>type</code> <code>name</code> <code>value</code> <code>placeholder</code></td><td>入力欄（テキスト・チェックボックスなど）</td></tr><tr><td><code><textarea></code></td><td><code>rows</code> <code>cols</code> <code>placeholder</code></td><td>複数行テキスト入力</td></tr><tr><td><code><select></code></td><td><code>name</code></td><td>セレクトボックス</td></tr><tr><td><code><option></code></td><td><code>value</code> <code>selected</code></td><td>セレクトの選択肢</td></tr><tr><td><code><label></code></td><td><code>for</code></td><td>入力欄のラベル</td></tr><tr><td><code><button></code></td><td><code>type</code></td><td>ボタン</td></tr><tr><td><code><fieldset></code></td><td>—</td><td>フォームのグループ化</td></tr><tr><td><code><legend></code></td><td>—</td><td>fieldsetのキャプション</td></tr></tbody></table></figure>
<p class="wp-block-paragraph"><code><input></code>は<code>type</code>属性を変えるだけで、まったく違う入力欄になります。よく使うtype値を整理します。</p>
<figure class="wp-block-table" style="overflow-x:auto;-webkit-overflow-scrolling:touch;"><table style="font-size:0.85em;white-space:nowrap;"><thead><tr><th>type値</th><th>用途</th></tr></thead><tbody><tr><td><code>text</code></td><td>1行テキスト</td></tr><tr><td><code>email</code></td><td>メールアドレス</td></tr><tr><td><code>password</code></td><td>パスワード（マスク）</td></tr><tr><td><code>tel</code></td><td>電話番号</td></tr><tr><td><code>number</code></td><td>数値</td></tr><tr><td><code>checkbox</code></td><td>チェックボックス</td></tr><tr><td><code>radio</code></td><td>ラジオボタン</td></tr><tr><td><code>submit</code></td><td>送信ボタン</td></tr><tr><td><code>file</code></td><td>ファイル選択</td></tr><tr><td><code>date</code></td><td>日付</td></tr><tr><td><code>hidden</code></td><td>非表示の値</td></tr></tbody></table></figure>
<p class="wp-block-paragraph">入力欄には<code><label></code>を必ず関連付けましょう。クリックできる範囲が広がり、スクリーンリーダーでも何の入力欄かが正しく伝わります。</p>
<h2 class="wp-block-heading">メディアタグ</h2>
<p class="wp-block-paragraph">動画・音声・外部コンテンツなどを埋め込むタグです。</p>
<figure class="wp-block-table" style="overflow-x:auto;-webkit-overflow-scrolling:touch;"><table style="font-size:0.85em;white-space:nowrap;"><thead><tr><th>タグ</th><th>役割</th></tr></thead><tbody><tr><td><code><video></code></td><td>動画の埋め込み</td></tr><tr><td><code><audio></code></td><td>音声の埋め込み</td></tr><tr><td><code><source></code></td><td>video/audioの複数ソース指定</td></tr><tr><td><code><noscript><iframe></noscript><iframe class="lazyload" ></code></td><td>外部ページの埋め込み（YouTube・Google Mapsなど）</td></tr><tr><td><code><canvas></code></td><td>JavaScriptで描画する領域</td></tr><tr><td><code><svg></code></td><td>ベクター画像（スケーラブルグラフィクス）</td></tr></tbody></table></figure>
<p class="wp-block-paragraph">YouTube動画や地図の埋め込みは<code><noscript><iframe></noscript><iframe class="lazyload" ></code>で行います。アイコンやロゴなど拡大しても劣化させたくない画像は、<code><svg></code>が向いています。</p>
<h2 class="wp-block-heading">まとめ：よく使うタグ TOP10</h2>
<p class="wp-block-paragraph">最後に、初心者がまず覚えるべき10タグを整理します。<strong>この10個を使いこなせれば、たいていのページは組める</strong>ようになります。</p>
<figure class="wp-block-table" style="overflow-x:auto;-webkit-overflow-scrolling:touch;"><table style="font-size:0.85em;white-space:nowrap;"><thead><tr><th>#</th><th>タグ</th><th>使う場面</th></tr></thead><tbody><tr><td>1</td><td><code><h1></code>〜<code><h3></code></td><td>ページタイトル・見出し</td></tr><tr><td>2</td><td><code><p></code></td><td>本文の段落</td></tr><tr><td>3</td><td><code><a></code></td><td>リンク</td></tr><tr><td>4</td><td><code><img></code></td><td>画像</td></tr><tr><td>5</td><td><code><ul></code> / <code><li></code></td><td>箇条書きリスト</td></tr><tr><td>6</td><td><code><div></code></td><td>レイアウトのグループ化</td></tr><tr><td>7</td><td><code><span></code></td><td>インラインのグループ化</td></tr><tr><td>8</td><td><code><strong></code></td><td>重要な強調</td></tr><tr><td>9</td><td><code><table></code></td><td>比較表・データ表</td></tr><tr><td>10</td><td><code><form></code> / <code><input></code></td><td>お問い合わせ・入力フォーム</td></tr></tbody></table></figure>
<p class="wp-block-paragraph"><div class="summary-box"> <strong>この記事のまとめ</strong> <ul class="box-list"> <li>HTMLタグは数百あるが、<strong>実務で使うのは30〜40個</strong>。全部の暗記は不要</li> <li>タグは見た目でなく<strong>意味（セマンティクス）で選ぶ</strong>。見た目はCSSで整える</li> <li>リストは<strong>順不同=ul／順序あり=ol／用語と説明=dl</strong>で使い分ける</li> <li>正しい入れ子と<strong>h1→h2→h3の階層</strong>がSEO・アクセシビリティの土台</li> <li>まずは<strong>TOP10</strong>から手を動かして覚えるのが最短ルート</li> </ul> </div></p>
<p class="wp-block-paragraph">タグの全体像をつかんだら、次は1つずつ手を動かして書いてみるのが上達の近道です。HTMLの始め方は<a href="https://awcs.org/learning/html/basis/" target="_blank" rel="nofollow noopener noreferrer">HTML入門｜はじめてのHTML</a>、ブラウザに表示される仕組みは<a href="https://awcs.org/learning/html/display/" target="_blank" rel="nofollow noopener noreferrer">HTMLがブラウザに表示される仕組み</a>で学べます。</p>
<h2 class="wp-block-heading">よくある質問</h2>
<p class="wp-block-paragraph">HTMLタグについて、初心者の方からよく受ける質問をまとめました。</p>
<p class="wp-block-paragraph"><div class="qa-card"></p>
<h3 class="wp-block-heading">Q1：HTMLタグは全部覚えないといけませんか？</h3>
<p class="wp-block-paragraph"><strong>覚える必要はありません</strong>。実務で日常的に使うのは30〜40個程度です。</p>
<p class="wp-block-paragraph">本記事のTOP10をまず手で書いて覚え、残りは「このカテゴリにこんなタグがある」という地図だけ持っておけば十分です。必要なときに調べ直せれば問題ありません。</p>
<p class="wp-block-paragraph"></div></p>
<p class="wp-block-paragraph"><div class="qa-card"></p>
<h3 class="wp-block-heading">Q2：<code><b></code>と<code><strong></code>、<code><i></code>と<code><em></code>はどちらを使うべきですか？</h3>
<p class="wp-block-paragraph"><strong>意味の強調には<code><strong></code>と<code><em></code>を使うのが基本</strong>です。</p>
<p class="wp-block-paragraph"><code><b></code>と<code><i></code>は「見た目を太字・斜体にするだけ」で意味を持ちません。一方<code><strong></code>は「重要」、<code><em></code>は「強調」という意味を持ち、スクリーンリーダーや検索エンジンに伝わります。意味があるなら後者を選びましょう。</p>
<p class="wp-block-paragraph"></div></p>
<p class="wp-block-paragraph"><div class="qa-card"></p>
<h3 class="wp-block-heading">Q3：<code><ul></code>と<code><ol></code>はどう使い分けますか？</h3>
<p class="wp-block-paragraph"><strong>順番に意味があるかどうか</strong>で判断します。</p>
<p class="wp-block-paragraph">材料リストや特徴の列挙のように順番が関係ないものは<code><ul></code>（順不同）、調理手順やランキングのように順番が重要なものは<code><ol></code>（順序付き）を使います。</p>
<p class="wp-block-paragraph"></div></p>
<p class="wp-block-paragraph"><div class="qa-card"></p>
<h3 class="wp-block-heading">Q4：見た目を変えたいときもタグで調整するのですか？</h3>
<p class="wp-block-paragraph"><strong>いいえ、見た目はCSSで調整します</strong>。</p>
<p class="wp-block-paragraph">HTMLは「文書の構造・意味」を担当し、色・サイズ・余白などの見た目はCSSが担当します。たとえば見出しを大きく見せたいだけで<code><h1></code>を選ぶのは誤りで、文書構造に合った見出しを選んだうえでCSSでサイズを変えるのが正解です。</p>
<p class="wp-block-paragraph"></div></p>
<p class="wp-block-paragraph"><div class="qa-card"></p>
<h3 class="wp-block-heading">Q5：終了タグが不要なタグはありますか？</h3>
<p class="wp-block-paragraph"><strong>あります</strong>。<code><br></code>（改行）・<code><hr></code>（水平線）・<code><img></code>（画像）・<code><meta></code>・<code><input></code>などは、内容を持たない「空要素」のため終了タグが不要です。</p>
<p class="wp-block-paragraph">これらは<code><br></code>のように単独で記述します（<code></br></code>は書きません）。</p>
<p class="wp-block-paragraph"></div></p>
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<h2 class="wp-block-heading">関連記事</h2>
<ul class="wp-block-list"><li><a href="https://awcs.org/learning/html/what-is-html/" target="_blank" rel="nofollow noopener noreferrer">HTMLとは？初心者向けにわかりやすく解説</a></li><li><a href="https://awcs.org/learning/html/html-tag-list/" target="_blank" rel="nofollow noopener noreferrer">HTMLタグ一覧【全タグ解説・コピペで使えるリファレンス完全版】</a></li><li><a href="https://awcs.org/learning/html/basic-structure/" target="_blank" rel="nofollow noopener noreferrer">HTMLの基本構造を徹底解説</a></li><li><a href="https://awcs.org/learning/css/what-is-css/" target="_blank" rel="nofollow noopener noreferrer">CSSとは？書き方の基本・HTMLとの違い</a></li></ul>
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<p class="wp-block-paragraph"><strong>免責事項</strong></p>
<!-- DISCLAIMER_FOOTER -->
<p class="wp-block-paragraph"><div class="disclaimer-box"> <p>※本記事はHTMLの公開仕様と一般的な実装慣行をもとにした学習向けの整理です。HTMLの仕様は更新される場合があるため、最新の正確な情報はWHATWG「HTML Living Standard」など公式の一次情報をご確認ください。</p> </div></p>
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://awcs.org/learning/html/list/"
},
"headline": "HTMLタグ一覧【完全版】基本から応用タグをカテゴリ別に解説",
"description": "HTMLタグを基本構造・レイアウト・見出し・テキスト・リンク/画像・リスト・テーブル・フォーム・メディアの9カテゴリ別に一覧で解説。リストの使い分けやコピペで使えるコード例、よく使うタグTOP10も紹介します。",
"author": {
"@type": "Person",
"name": "Sato",
"url": "https://awcs.org/profile/"
},
"publisher": {
"@type": "Organization",
"name": "WEB制作ノート",
"url": "https://awcs.org/",
"logo": {
"@type": "ImageObject",
"url": "https://awcs.org/wp-content/uploads/logo.png"
}
},
"datePublished": "2026-05-14T09:00:00+09:00",
"dateModified": "2026-06-19T09:00:00+09:00",
"articleSection": "html",
"keywords": "HTMLタグ一覧, HTMLタグ, リストタグ, テーブルタグ, フォームタグ",
"inLanguage": "ja-JP"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "ホーム",
"item": "https://awcs.org/"
},
{
"@type": "ListItem",
"position": 2,
"name": "HTML学習",
"item": "https://awcs.org/category/html/"
},
{
"@type": "ListItem",
"position": 3,
"name": "HTMLタグ一覧【完全版】基本から応用タグをカテゴリ別に解説",
"item": "https://awcs.org/learning/html/list/"
}
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "HTMLタグは全部覚えないといけませんか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "覚える必要はありません。実務で日常的に使うのは30〜40個程度です。まずTOP10を手で書いて覚え、残りは「このカテゴリにこんなタグがある」という地図だけ持っておけば十分です。必要なときに調べ直せれば問題ありません。"
}
},
{
"@type": "Question",
"name": "bタグとstrongタグ、iタグとemタグはどちらを使うべきですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "意味の強調にはstrongタグとemタグを使うのが基本です。bタグとiタグは見た目を太字・斜体にするだけで意味を持ちません。strongは「重要」、emは「強調」という意味を持ち、スクリーンリーダーや検索エンジンに伝わるため、意味があるなら後者を選びましょう。"
}
},
{
"@type": "Question",
"name": "ulタグとolタグはどう使い分けますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "順番に意味があるかどうかで判断します。材料リストや特徴の列挙のように順番が関係ないものはul（順不同）、調理手順やランキングのように順番が重要なものはol（順序付き）を使います。"
}
},
{
"@type": "Question",
"name": "見た目を変えたいときもタグで調整するのですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "いいえ、見た目はCSSで調整します。HTMLは文書の構造・意味を担当し、色・サイズ・余白などの見た目はCSSが担当します。見出しを大きく見せたいだけでh1を選ぶのは誤りで、文書構造に合った見出しを選んだうえでCSSでサイズを変えるのが正解です。"
}
},
{
"@type": "Question",
"name": "終了タグが不要なタグはありますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "あります。brタグ（改行）・hrタグ（水平線）・imgタグ（画像）・metaタグ・inputタグなどは、内容を持たない空要素のため終了タグが不要です。これらは単独で記述します。"
}
}
]
}
</script>
</div>
<div class="p-articleFoot">
<div class="p-articleMetas -bottom">
<div class="p-articleMetas__termList c-categoryList">
<a class="c-categoryList__link hov-flash-up" href="https://awcs.org/./learning/html/" data-cat-id="5">
HTML </a>
</div>
</div>
</div>
<div class="c-shareBtns -bottom -style-btn-small">
<div class="c-shareBtns__message">
<span class="__text">
よかったらシェアしてね！ </span>
</div>
<ul class="c-shareBtns__list">
<li class="c-shareBtns__item -facebook">
<a class="c-shareBtns__btn hov-flash-up" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fawcs.org%2Flearning%2Fhtml%2Flist%2F" title="Facebookでシェア" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=600');return false;" target="_blank" role="button" tabindex="0">
<i class="snsicon c-shareBtns__icon icon-facebook" aria-hidden="true"></i>
</a>
</li>
<li class="c-shareBtns__item -twitter-x">
<a class="c-shareBtns__btn hov-flash-up" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fawcs.org%2Flearning%2Fhtml%2Flist%2F&text=HTML%E3%82%BF%E3%82%B0%E4%B8%80%E8%A6%A7%E3%80%90%E5%AE%8C%E5%85%A8%E7%89%88%E3%80%91%E5%9F%BA%E6%9C%AC%E3%81%8B%E3%82%89%E5%BF%9C%E7%94%A8%E3%82%BF%E3%82%B0%E3%82%92%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%E5%88%A5%E3%81%AB%E8%A7%A3%E8%AA%AC" title="X(Twitter)でシェア" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');return false;" target="_blank" role="button" tabindex="0">
<i class="snsicon c-shareBtns__icon icon-twitter-x" aria-hidden="true"></i>
</a>
</li>
<li class="c-shareBtns__item -hatebu">
<a class="c-shareBtns__btn hov-flash-up" href="//b.hatena.ne.jp/add?mode=confirm&url=https%3A%2F%2Fawcs.org%2Flearning%2Fhtml%2Flist%2F" title="はてなブックマークに登録" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=1000');return false;" target="_blank" role="button" tabindex="0">
<i class="snsicon c-shareBtns__icon icon-hatebu" aria-hidden="true"></i>
</a>
</li>
<li class="c-shareBtns__item -pocket">
<a class="c-shareBtns__btn hov-flash-up" href="https://getpocket.com/edit?url=https%3A%2F%2Fawcs.org%2Flearning%2Fhtml%2Flist%2F&title=HTML%E3%82%BF%E3%82%B0%E4%B8%80%E8%A6%A7%E3%80%90%E5%AE%8C%E5%85%A8%E7%89%88%E3%80%91%E5%9F%BA%E6%9C%AC%E3%81%8B%E3%82%89%E5%BF%9C%E7%94%A8%E3%82%BF%E3%82%B0%E3%82%92%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%E5%88%A5%E3%81%AB%E8%A7%A3%E8%AA%AC" title="Pocketに保存" target="_blank" role="button" tabindex="0">
<i class="snsicon c-shareBtns__icon icon-pocket" aria-hidden="true"></i>
</a>
</li>
<li class="c-shareBtns__item -line">
<a class="c-shareBtns__btn hov-flash-up" href="https://social-plugins.line.me/lineit/share?url=https%3A%2F%2Fawcs.org%2Flearning%2Fhtml%2Flist%2F&text=HTML%E3%82%BF%E3%82%B0%E4%B8%80%E8%A6%A7%E3%80%90%E5%AE%8C%E5%85%A8%E7%89%88%E3%80%91%E5%9F%BA%E6%9C%AC%E3%81%8B%E3%82%89%E5%BF%9C%E7%94%A8%E3%82%BF%E3%82%B0%E3%82%92%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%E5%88%A5%E3%81%AB%E8%A7%A3%E8%AA%AC" title="LINEに送る" target="_blank" role="button" tabindex="0">
<i class="snsicon c-shareBtns__icon icon-line" aria-hidden="true"></i>
</a>
</li>
<li class="c-shareBtns__item -copy">
<button class="c-urlcopy c-plainBtn c-shareBtns__btn hov-flash-up" data-clipboard-text="https://awcs.org/learning/html/list/" title="URLをコピーする">
<span class="c-urlcopy__content">
<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-copy c-shareBtns__icon -to-copy" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M38,5.5h-9c0-2.8-2.2-5-5-5s-5,2.2-5,5h-9c-2.2,0-4,1.8-4,4v33c0,2.2,1.8,4,4,4h28c2.2,0,4-1.8,4-4v-33
C42,7.3,40.2,5.5,38,5.5z M24,3.5c1.1,0,2,0.9,2,2s-0.9,2-2,2s-2-0.9-2-2S22.9,3.5,24,3.5z M38,42.5H10v-33h5v3c0,0.6,0.4,1,1,1h16
c0.6,0,1-0.4,1-1v-3h5L38,42.5z"/><polygon points="24,37 32.5,28 27.5,28 27.5,20 20.5,20 20.5,28 15.5,28 "/></svg> <svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-copied c-shareBtns__icon -copied" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M38,5.5h-9c0-2.8-2.2-5-5-5s-5,2.2-5,5h-9c-2.2,0-4,1.8-4,4v33c0,2.2,1.8,4,4,4h28c2.2,0,4-1.8,4-4v-33
C42,7.3,40.2,5.5,38,5.5z M24,3.5c1.1,0,2,0.9,2,2s-0.9,2-2,2s-2-0.9-2-2S22.9,3.5,24,3.5z M38,42.5H10v-33h5v3c0,0.6,0.4,1,1,1h16
c0.6,0,1-0.4,1-1v-3h5V42.5z"/><polygon points="31.9,20.2 22.1,30.1 17.1,25.1 14.2,28 22.1,35.8 34.8,23.1 "/></svg> </span>
</button>
<div class="c-copyedPoppup">URLをコピーしました！</div>
</li>
</ul>
</div>
<div id="after_article" class="l-articleBottom">
<ul class="p-pnLinks -style-normal">
<li class="p-pnLinks__item -prev">
<a href="https://awcs.org/learning/html/basis/" rel="prev" class="p-pnLinks__link">
<span class="p-pnLinks__title">HTML入門｜はじめてのHTML・基本の書き方と学習ロードマップ</span>
</a>
</li>
<li class="p-pnLinks__item -next">
<a href="https://awcs.org/learning/html/display/" rel="next" class="p-pnLinks__link">
<span class="p-pnLinks__title">HTMLがブラウザに表示される仕組み｜DNS・HTTPリクエスト・レンダリングを解説</span>
</a>
</li>
</ul>
<section class="l-articleBottom__section -author">
<h2 class="l-articleBottom__title c-secTitle">
この記事を書いた人 </h2>
<div class="p-authorBox">
<div class="p-authorBox__l">
<img alt='Sato Daisukeのアバター' src='https://secure.gravatar.com/avatar/a9daa7ebccd9865edb60abfba5fa013927b585d0a352ffe49690cf070a60867b?s=100&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/a9daa7ebccd9865edb60abfba5fa013927b585d0a352ffe49690cf070a60867b?s=200&d=mm&r=g 2x' class='avatar avatar-100 photo' height='100' width='100' loading='lazy' decoding='async'/> <a href="https://awcs.org/author/sato/" class="p-authorBox__name hov-col-main u-fz-m">
Sato Daisuke </a>
</div>
<div class="p-authorBox__r">
<p class="p-authorBox__desc u-thin">
大学卒業後、Web制作会社に入社し、コーポレートサイトやECサイト、キャンペーンサイトなど幅広い案件を担当。企画・設計からデザインディレクション、進行管理、納品後の運用改善までトータルで携わる。クライアントの課題整理から戦略立案まで踏み込む提案力と、円滑なチームマネジメントに定評がある。<br />
<br />
・Webサイト構築の企画・情報設計<br />
・UI/UX改善提案<br />
・制作進行管理・品質管理<br />
・マーケティング視点での運用改善<br />
<br />
Webサイトは“つくって終わり”ではなく、運用しながら成果を伸ばしていくものだと考えています。お客様のビジネスとユーザーの両方にとって価値のあるWebサイトを、戦略から実装まで全力でサポートいたします。 </p>
</div>
</div>
</section>
<section class="l-articleBottom__section -related">
<h2 class="l-articleBottom__title c-secTitle">関連記事</h2><ul class="p-postList p-relatedPosts -type-card"><li class="p-postList__item">
<a href="https://awcs.org/learning/html/table-tag/" class="p-postList__link">
<div class="p-postList__thumb c-postThumb">
<figure class="c-postThumb__figure">
<img width="300" height="158" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="" class="c-postThumb__img u-obf-cover lazyload" sizes="(min-width: 600px) 320px, 50vw" data-src="https://awcs.org/wp-content/uploads/2026/05/awcs-org_table-tag-300x158.jpg" data-srcset="https://awcs.org/wp-content/uploads/2026/05/awcs-org_table-tag-300x158.jpg 300w, https://awcs.org/wp-content/uploads/2026/05/awcs-org_table-tag-1024x538.jpg 1024w, https://awcs.org/wp-content/uploads/2026/05/awcs-org_table-tag-768x403.jpg 768w, https://awcs.org/wp-content/uploads/2026/05/awcs-org_table-tag.jpg 1200w" data-aspectratio="300/158" ><noscript><img src="https://awcs.org/wp-content/uploads/2026/05/awcs-org_table-tag-300x158.jpg" class="c-postThumb__img u-obf-cover" alt=""></noscript> </figure>
</div>
<div class="p-postList__body">
<div class="p-postList__title">tableタグの書き方｜HTMLテーブル（表）の作り方を基礎から解説</div>
<div class="p-postList__meta"><div class="p-postList__times c-postTimes u-thin">
<time class="c-postTimes__posted icon-posted" datetime="2026-05-18" aria-label="公開日">May 18, 2026</time></div>
</div> </div>
</a>
</li>
<li class="p-postList__item">
<a href="https://awcs.org/learning/html/html-line-break/" class="p-postList__link">
<div class="p-postList__thumb c-postThumb">
<figure class="c-postThumb__figure">
<img width="300" height="158" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="" class="c-postThumb__img u-obf-cover lazyload" sizes="(min-width: 600px) 320px, 50vw" data-src="https://awcs.org/wp-content/uploads/2026/05/awcs-org_html-line-break-300x158.jpg" data-srcset="https://awcs.org/wp-content/uploads/2026/05/awcs-org_html-line-break-300x158.jpg 300w, https://awcs.org/wp-content/uploads/2026/05/awcs-org_html-line-break-1024x538.jpg 1024w, https://awcs.org/wp-content/uploads/2026/05/awcs-org_html-line-break-768x403.jpg 768w, https://awcs.org/wp-content/uploads/2026/05/awcs-org_html-line-break.jpg 1200w" data-aspectratio="300/158" ><noscript><img src="https://awcs.org/wp-content/uploads/2026/05/awcs-org_html-line-break-300x158.jpg" class="c-postThumb__img u-obf-cover" alt=""></noscript> </figure>
</div>
<div class="p-postList__body">
<div class="p-postList__title">HTMLの改行方法｜brタグとpタグの違い・正しい使い分けを解説</div>
<div class="p-postList__meta"><div class="p-postList__times c-postTimes u-thin">
<time class="c-postTimes__posted icon-posted" datetime="2026-05-17" aria-label="公開日">May 17, 2026</time></div>
</div> </div>
</a>
</li>
<li class="p-postList__item">
<a href="https://awcs.org/learning/html/img-tag/" class="p-postList__link">
<div class="p-postList__thumb c-postThumb">
<figure class="c-postThumb__figure">
<img width="300" height="158" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="" class="c-postThumb__img u-obf-cover lazyload" sizes="(min-width: 600px) 320px, 50vw" data-src="https://awcs.org/wp-content/uploads/2026/05/awcs-org_img-tag-300x158.jpg" data-srcset="https://awcs.org/wp-content/uploads/2026/05/awcs-org_img-tag-300x158.jpg 300w, https://awcs.org/wp-content/uploads/2026/05/awcs-org_img-tag-1024x538.jpg 1024w, https://awcs.org/wp-content/uploads/2026/05/awcs-org_img-tag-768x403.jpg 768w, https://awcs.org/wp-content/uploads/2026/05/awcs-org_img-tag.jpg 1200w" data-aspectratio="300/158" ><noscript><img src="https://awcs.org/wp-content/uploads/2026/05/awcs-org_img-tag-300x158.jpg" class="c-postThumb__img u-obf-cover" alt=""></noscript> </figure>
</div>
<div class="p-postList__body">
<div class="p-postList__title">imgタグの使い方｜HTML画像表示の書き方・alt属性・レスポンシブ対応</div>
<div class="p-postList__meta"><div class="p-postList__times c-postTimes u-thin">
<time class="c-postTimes__posted icon-posted" datetime="2026-05-16" aria-label="公開日">May 16, 2026</time></div>
</div> </div>
</a>
</li>
<li class="p-postList__item">
<a href="https://awcs.org/learning/html/a-tag/" class="p-postList__link">
<div class="p-postList__thumb c-postThumb">
<figure class="c-postThumb__figure">
<img width="300" height="158" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="" class="c-postThumb__img u-obf-cover lazyload" sizes="(min-width: 600px) 320px, 50vw" data-src="https://awcs.org/wp-content/uploads/2026/05/awcs-org_a-tag-300x158.jpg" data-srcset="https://awcs.org/wp-content/uploads/2026/05/awcs-org_a-tag-300x158.jpg 300w, https://awcs.org/wp-content/uploads/2026/05/awcs-org_a-tag-1024x538.jpg 1024w, https://awcs.org/wp-content/uploads/2026/05/awcs-org_a-tag-768x403.jpg 768w, https://awcs.org/wp-content/uploads/2026/05/awcs-org_a-tag.jpg 1200w" data-aspectratio="300/158" ><noscript><img src="https://awcs.org/wp-content/uploads/2026/05/awcs-org_a-tag-300x158.jpg" class="c-postThumb__img u-obf-cover" alt=""></noscript> </figure>
</div>
<div class="p-postList__body">
<div class="p-postList__title">aタグの使い方｜リンクの書き方・target属性・rel属性を徹底解説</div>
<div class="p-postList__meta"><div class="p-postList__times c-postTimes u-thin">
<time class="c-postTimes__posted icon-posted" datetime="2026-05-13" aria-label="公開日">May 13, 2026</time></div>
</div> </div>
</a>
</li>
<li class="p-postList__item">
<a href="https://awcs.org/learning/html/html-tag-list/" class="p-postList__link">
<div class="p-postList__thumb c-postThumb">
<figure class="c-postThumb__figure">
<img width="300" height="200" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="HTMLタグ一覧【全タグ解説・コピペで使えるリファレンス完全版】" class="c-postThumb__img u-obf-cover lazyload" sizes="(min-width: 600px) 320px, 50vw" data-src="https://awcs.org/wp-content/uploads/2026/05/html-tag-list-300x200.jpg" data-srcset="https://awcs.org/wp-content/uploads/2026/05/html-tag-list-300x200.jpg 300w, https://awcs.org/wp-content/uploads/2026/05/html-tag-list-1024x683.jpg 1024w, https://awcs.org/wp-content/uploads/2026/05/html-tag-list-768x512.jpg 768w, https://awcs.org/wp-content/uploads/2026/05/html-tag-list-1536x1025.jpg 1536w, https://awcs.org/wp-content/uploads/2026/05/html-tag-list-2048x1366.jpg 2048w" data-aspectratio="300/200" ><noscript><img src="https://awcs.org/wp-content/uploads/2026/05/html-tag-list-300x200.jpg" class="c-postThumb__img u-obf-cover" alt=""></noscript> </figure>
</div>
<div class="p-postList__body">
<div class="p-postList__title">HTMLタグ一覧【全タグ解説・コピペで使えるリファレンス完全版】</div>
<div class="p-postList__meta"><div class="p-postList__times c-postTimes u-thin">
<time class="c-postTimes__posted icon-posted" datetime="2026-05-06" aria-label="公開日">May 6, 2026</time></div>
</div> </div>
</a>
</li>
<li class="p-postList__item">
<a href="https://awcs.org/learning/html/what-is-html/" class="p-postList__link">
<div class="p-postList__thumb c-postThumb">
<figure class="c-postThumb__figure">
<img width="300" height="171" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="HTMLとは？初心者向けにわかりやすく解説【基本構造・書き方】" class="c-postThumb__img u-obf-cover lazyload" sizes="(min-width: 600px) 320px, 50vw" data-src="https://awcs.org/wp-content/uploads/2026/05/what-is-html-300x171.jpg" data-srcset="https://awcs.org/wp-content/uploads/2026/05/what-is-html-300x171.jpg 300w, https://awcs.org/wp-content/uploads/2026/05/what-is-html-1024x585.jpg 1024w, https://awcs.org/wp-content/uploads/2026/05/what-is-html-768x439.jpg 768w, https://awcs.org/wp-content/uploads/2026/05/what-is-html.jpg 1344w" data-aspectratio="300/171" ><noscript><img src="https://awcs.org/wp-content/uploads/2026/05/what-is-html-300x171.jpg" class="c-postThumb__img u-obf-cover" alt=""></noscript> </figure>
</div>
<div class="p-postList__body">
<div class="p-postList__title">HTMLとは？初心者向けにわかりやすく解説【基本構造・書き方】</div>
<div class="p-postList__meta"><div class="p-postList__times c-postTimes u-thin">
<time class="c-postTimes__posted icon-posted" datetime="2026-05-04" aria-label="公開日">May 4, 2026</time></div>
</div> </div>
</a>
</li>
<li class="p-postList__item">
<a href="https://awcs.org/learning/html/display/" class="p-postList__link">
<div class="p-postList__thumb c-postThumb">
<figure class="c-postThumb__figure">
<img width="300" height="200" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="" class="c-postThumb__img u-obf-cover lazyload" sizes="(min-width: 600px) 320px, 50vw" data-src="https://awcs.org/wp-content/uploads/2025/08/discover-streamlined-representation-web-server-concepts-information-data-captivating-300x200.jpg" data-srcset="https://awcs.org/wp-content/uploads/2025/08/discover-streamlined-representation-web-server-concepts-information-data-captivating-300x200.jpg 300w, https://awcs.org/wp-content/uploads/2025/08/discover-streamlined-representation-web-server-concepts-information-data-captivating-1024x683.jpg 1024w, https://awcs.org/wp-content/uploads/2025/08/discover-streamlined-representation-web-server-concepts-information-data-captivating-768x512.jpg 768w, https://awcs.org/wp-content/uploads/2025/08/discover-streamlined-representation-web-server-concepts-information-data-captivating-1536x1024.jpg 1536w, https://awcs.org/wp-content/uploads/2025/08/discover-streamlined-representation-web-server-concepts-information-data-captivating-2048x1366.jpg 2048w" data-aspectratio="300/200" ><noscript><img src="https://awcs.org/wp-content/uploads/2025/08/discover-streamlined-representation-web-server-concepts-information-data-captivating-300x200.jpg" class="c-postThumb__img u-obf-cover" alt=""></noscript> </figure>
</div>
<div class="p-postList__body">
<div class="p-postList__title">HTMLがブラウザに表示される仕組み｜DNS・HTTPリクエスト・レンダリングを解説</div>
<div class="p-postList__meta"><div class="p-postList__times c-postTimes u-thin">
<time class="c-postTimes__posted icon-posted" datetime="2025-08-14" aria-label="公開日">August 14, 2025</time></div>
</div> </div>
</a>
</li>
<li class="p-postList__item">
<a href="https://awcs.org/learning/html/basis/" class="p-postList__link">
<div class="p-postList__thumb c-postThumb">
<figure class="c-postThumb__figure">
<img width="300" height="200" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="" class="c-postThumb__img u-obf-cover lazyload" sizes="(min-width: 600px) 320px, 50vw" data-src="https://awcs.org/wp-content/uploads/2025/08/closeup-printed-html-code-300x200.jpg" data-srcset="https://awcs.org/wp-content/uploads/2025/08/closeup-printed-html-code-300x200.jpg 300w, https://awcs.org/wp-content/uploads/2025/08/closeup-printed-html-code-1024x683.jpg 1024w, https://awcs.org/wp-content/uploads/2025/08/closeup-printed-html-code-768x512.jpg 768w, https://awcs.org/wp-content/uploads/2025/08/closeup-printed-html-code-1536x1024.jpg 1536w, https://awcs.org/wp-content/uploads/2025/08/closeup-printed-html-code-2048x1366.jpg 2048w" data-aspectratio="300/200" ><noscript><img src="https://awcs.org/wp-content/uploads/2025/08/closeup-printed-html-code-300x200.jpg" class="c-postThumb__img u-obf-cover" alt=""></noscript> </figure>
</div>
<div class="p-postList__body">
<div class="p-postList__title">HTML入門｜はじめてのHTML・基本の書き方と学習ロードマップ</div>
<div class="p-postList__meta"><div class="p-postList__times c-postTimes u-thin">
<time class="c-postTimes__posted icon-posted" datetime="2025-08-07" aria-label="公開日">August 7, 2025</time></div>
</div> </div>
</a>
</li>
</ul></section>
</div>
</article>
</main>
</div>
<footer id="footer" class="l-footer">
<div class="l-footer__inner">
<div class="l-footer__foot">
<div class="l-container">
<ul class="l-footer__nav"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-370"><a href="https://awcs.org/profile/">運営者プロフィール</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-371"><a href="https://awcs.org/contact/">お問い合わせ</a></li>
</ul> <p class="copyright">
<span lang="en">©</span>
WEB制作ノート. </p>
</div>
</div>
</div>
</footer>
<div class="p-fixBtnWrap">
<button id="pagetop" class="c-fixBtn c-plainBtn hov-bg-main" data-onclick="pageTop" aria-label="ページトップボタン" data-has-text="">
<i class="c-fixBtn__icon icon-chevron-up" role="presentation"></i>
</button>
</div>
<div id="search_modal" class="c-modal p-searchModal">
<div class="c-overlay" data-onclick="toggleSearch"></div>
<div class="p-searchModal__inner">
<form role="search" method="get" class="c-searchForm" action="https://awcs.org/" role="search">
<input type="text" value="" name="s" class="c-searchForm__s s" placeholder="検索" aria-label="検索ワード">
<button type="submit" class="c-searchForm__submit icon-search hov-opacity u-bg-main" value="search" aria-label="検索を実行する"></button>
</form>
<button class="c-modal__close c-plainBtn" data-onclick="toggleSearch">
<i class="icon-batsu"></i> 閉じる </button>
</div>
</div>
<div id="index_modal" class="c-modal p-indexModal">
<div class="c-overlay" data-onclick="toggleIndex"></div>
<div class="p-indexModal__inner">
<div class="p-toc post_content -modal"><span class="p-toc__ttl">目次</span></div>
<button class="c-modal__close c-plainBtn" data-onclick="toggleIndex">
<i class="icon-batsu"></i> 閉じる </button>
</div>
</div>
</div><!--/ #all_wrapp-->
<div class="l-scrollObserver" aria-hidden="true"></div><script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/swell_child/*","/wp-content/themes/swell/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script id="swell_script-js-extra">
var swellVars = {"siteUrl":"https://awcs.org/","restUrl":"https://awcs.org/wp-json/wp/v2/","ajaxUrl":"https://awcs.org/wp-admin/admin-ajax.php","ajaxNonce":"cee53e91f5","isLoggedIn":"","useAjaxAfterPost":"","useAjaxFooter":"","usePvCount":"1","isFixHeadSP":"1","tocListTag":"ol","tocTarget":"h3","tocPrevText":"\u524d\u306e\u30da\u30fc\u30b8\u3078","tocNextText":"\u6b21\u306e\u30da\u30fc\u30b8\u3078","tocCloseText":"\u6298\u308a\u305f\u305f\u3080","tocOpenText":"\u3082\u3063\u3068\u898b\u308b","tocOmitType":"ct","tocOmitNum":"15","tocMinnum":"2","tocAdPosition":"before","offSmoothScroll":"","psNum":"5","psNumSp":"2","psSpeed":"1500","psDelay":"5000"};
//# sourceURL=swell_script-js-extra
</script>
<script id="swell_script-js" src="https://awcs.org/wp-content/themes/swell/build/js/main.min.js?ver=2.16.0"></script>
<script id="swell_lazysizes-js" src="https://awcs.org/wp-content/themes/swell/assets/js/plugins/lazysizes.min.js?ver=5.3.1"></script>
<script id="swell_set_fix_header-js" src="https://awcs.org/wp-content/themes/swell/build/js/front/set_fix_header.min.js?ver=2.16.0"></script>
<script id="clipboard-js" src="https://awcs.org/wp-includes/js/clipboard.min.js?ver=2.0.11"></script>
<script id="swell_set_urlcopy-js" src="https://awcs.org/wp-content/themes/swell/build/js/front/set_urlcopy.min.js?ver=2.16.0"></script>
<!-- JSON-LD @SWELL -->
<script type="application/ld+json">{"@context": "https://schema.org","@graph": [{"@type":"Organization","@id":"https:\/\/awcs.org\/#organization","name":"WEB制作ノート","url":"https:\/\/awcs.org\/","logo":{"@type":"ImageObject","url":"https:\/\/awcs.org\/wp-content\/uploads\/2026\/01\/awcs-logo.png","width":850,"height":180}},{"@type":"WebSite","@id":"https:\/\/awcs.org\/#website","url":"https:\/\/awcs.org\/","name":"WEB制作ノート","description":"Webディレクター10年・300案件超の観察者が、Webサイト制作費の相場・コーポレートサイトのリニューアル・WordPress\/SWELL選びを現場目線で解説。"},{"@type":"WebPage","@id":"https:\/\/awcs.org\/learning\/html\/list\/","url":"https:\/\/awcs.org\/learning\/html\/list\/","name":"HTMLタグ一覧【完全版】基本から応用タグをカテゴリ別に解説","description":"HTMLタグは基本構造・レイアウト・見出し・テキストなど9カテゴリに分けて把握すると効率的です。各タグの意味・役割・主要属性を表でまとめ、コピペで使えるコード例、ul\/ol\/dlの使い分け、初心者向けよく使うタグTOP10まで一覧で解説します。 この記事でわかること HTMLタグを9カテゴリ（基本構造・レイアウト・見出し・テキスト・リンク\/画像・リスト・テーブル・フォーム・メディア）に分けて一覧で把握できる 各タグの意味・役割・主要属性を表でまとめて確認できる コピペで使える基本構造・リスト・テーブルのコード例 リスト系タグ（ul\/ol\/dl）の使い分けの判断軸 初心者がまず覚えるべきよく使う","isPartOf":{"@id":"https:\/\/awcs.org\/#website"}},{"@type":"Article","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/awcs.org\/learning\/html\/list\/"},"headline":"HTMLタグ一覧【完全版】基本から応用タグをカテゴリ別に解説","image":{"@type":"ImageObject","url":"https:\/\/awcs.org\/wp-content\/uploads\/2025\/08\/html-tekisutowo-shi-yongshitafurokuraminkuno-bei-jing.jpg"},"datePublished":"2025-08-14T13:02:50+0000","dateModified":"2026-07-02T07:34:20+0000","author":{"@type":"Person","@id":"https:\/\/awcs.org\/learning\/html\/list\/#author","name":"Sato Daisuke","url":"https:\/\/awcs.org\/"},"publisher":{"@id":"https:\/\/awcs.org\/#organization"}},{"@type":"BreadcrumbList","@id":"https:\/\/awcs.org\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https:\/\/awcs.org\/.\/learning\/","name":"Web制作基礎"}},{"@type":"ListItem","position":2,"item":{"@id":"https:\/\/awcs.org\/.\/learning\/html\/","name":"HTML"}}]}]}</script>
<!-- / JSON-LD @SWELL -->
</body></html>
|
