</code></td><td>ブラウザのタブや検索結果に出るタイトル</td></tr><tr><td><code><body></code></td><td>実際に画面へ表示される内容を書く場所</td></tr></tbody></table></figure>
<p class="wp-block-paragraph">ポイントは、<strong><code>head</code> は裏方の情報、<code>body</code> は表に出る中身</strong>という区別です。「画面に出したいものは body の中に書く」と覚えておけば、まず迷いません。基本構造をさらに深掘りしたい方は、<a href="https://awcs.org/learning/html/basic-structure/" target="_blank" rel="noopener noreferrer">HTMLの基本構造を徹底解説</a>もあわせてどうぞ。</p>
<h2 class="wp-block-heading">HTMLタグとは？開始タグと終了タグの仕組み</h2>
<p class="wp-block-paragraph">HTMLはすべて<strong>タグ</strong>で構成されています。タグは <code><</code> と <code>></code> で囲んで書き、多くの場合は開始タグと終了タグがセットになります。</p>
<p class="wp-block-paragraph"><pre><code class="language-html"><p>これは段落です。</p> </code></pre></p>
<ul class="wp-block-list"><li><code><p></code> ：開始タグ</li><li><code></p></code> ：終了タグ（先頭に <code>/</code> がつく）</li><li>開始タグから終了タグまでの間が「内容」</li></ul>
<p class="wp-block-paragraph">この「開始 → 内容 → 終了」の3点セットが、HTMLの基本パターンです。慣れるまでは、終了タグの書き忘れに注意しましょう。</p>
<h3 class="wp-block-heading">終了タグが不要な単独タグもある</h3>
<p class="wp-block-paragraph">すべてのタグがセットになるわけではありません。終了タグを持たない「単独タグ（自己終了タグ）」もあります。</p>
<p class="wp-block-paragraph"><pre><code class="language-html"><br> <!-- 改行 --> <img src="photo.jpg" alt="写真"> <!-- 画像 --> <hr> <!-- 水平線 --> </code></pre></p>
<p class="wp-block-paragraph">改行（<code><br></code>）と段落（<code><p></code>）は混同しやすいので、最初に使い分けを押さえておくと安心です。詳しくは<a href="https://awcs.org/learning/html/html-line-break/" target="_blank" rel="noopener noreferrer">HTMLの改行方法｜brタグとpタグの違い</a>で整理しています。</p>
<div class="cc-ad" style="min-height:280px;margin:2.2em 0;text-align:center;overflow:hidden;"><ins class="adsbygoogle" style="display:block;text-align:center;" data-ad-client="ca-pub-1296595038663921" data-ad-slot="3999688822" data-ad-format="fluid" data-ad-layout="in-article"></ins><script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></div><h2 class="wp-block-heading">よく使うHTMLタグ一覧：まず覚えたい基本セット</h2>
<p class="wp-block-paragraph">ここでは、最初に手に馴染ませたいタグをカテゴリ別に並べます。すべてを暗記する必要はありません。<strong>「こういう種類がある」と把握しておき、書きながら覚える</strong>のが現実的です。</p>
<h3 class="wp-block-heading">文章・見出し</h3>
<p class="wp-block-paragraph"><pre><code class="language-html"><h1>最大見出し（ページに1つ）</h1> <h2>大見出し</h2> <h3>中見出し</h3> <p>段落テキスト</p> <strong>強調（太字）</strong> <em>強調（斜体）</em> </code></pre></p>
<p class="wp-block-paragraph">見出しは <code>h1</code> から <code>h6</code> まであり、数字が小さいほど大きな見出しです。<code>h1</code> はページに1つだけが基本になります。</p>
<h3 class="wp-block-heading">リンク・画像</h3>
<p class="wp-block-paragraph"><pre><code class="language-html"><!-- リンク --> <a href="https://example.com">リンクテキスト</a></p>
<p class="wp-block-paragraph"><!-- 別タブで開く --> <a href="https://example.com" target="_blank" rel="noopener">外部リンク</a></p>
<p class="wp-block-paragraph"><!-- 画像 --> <img src="image.jpg" alt="画像の説明"> </code></pre></p>
<p class="wp-block-paragraph">リンクの <code>a</code> タグ、画像の <code>img</code> タグは登場頻度が高い基本タグです。それぞれの細かい使い方は<a href="https://awcs.org/learning/html/a-tag/" target="_blank" rel="noopener noreferrer">aタグの使い方</a>・<a href="https://awcs.org/learning/html/img-tag/" target="_blank" rel="noopener noreferrer">imgタグの使い方</a>で個別に解説しています。</p>
<h3 class="wp-block-heading">リスト・表</h3>
<p class="wp-block-paragraph"><pre><code class="language-html"><!-- 箇条書き --> <ul> <li>項目1</li> <li>項目2</li> </ul></p>
<p class="wp-block-paragraph"><!-- 番号付きリスト --> <ol> <li>手順1</li> <li>手順2</li> </ol> </code></pre></p>
<p class="wp-block-paragraph">順序が関係ないなら <code>ul</code>（箇条書き）、手順のように順番があるなら <code>ol</code>（番号付き）を使います。比較や対照を見せたいときは表（<code><a href="https://awcs.org/learning/html/table-tag/" target="_blank" rel="noopener noreferrer">tableタグ</a></code>）が役立ちます。</p>
<h3 class="wp-block-heading">構造タグ（セクション）</h3>
<p class="wp-block-paragraph"><pre><code class="language-html"><header>ヘッダー</header> <nav>ナビゲーション</nav> <main>メインコンテンツ</main> <article>記事コンテンツ</article> <section>セクション</section> <aside>サイドバー</aside> <footer>フッター</footer> </code></pre></p>
<p class="wp-block-paragraph">これらは「ページのどこが何の役割か」を示す構造タグです。意味のあるタグで区切ると、検索エンジンや支援技術にも内容が伝わりやすくなります。網羅的に確認したいときは<a href="https://awcs.org/learning/html/html-tag-list/" target="_blank" rel="noopener noreferrer">HTMLタグ一覧（コピペで使えるリファレンス）</a>を辞書代わりにどうぞ。</p>
<h2 class="wp-block-heading">属性とは？タグに追加情報を渡す仕組み</h2>
<p class="wp-block-paragraph">タグに追加の情報を付け加えるものが<strong>属性（attribute）</strong>です。たとえばリンク先のURLや、画像のファイルパスは属性で指定します。</p>
<p class="wp-block-paragraph"><pre><code class="language-html"><a href="https://example.com" target="_blank">リンク</a> </code></pre></p>
<ul class="wp-block-list"><li><code>href="..."</code> ：リンク先URL（<code>href</code> が属性名、URLが属性値）</li><li><code>target="_blank"</code> ：リンクを別タブで開く指定</li></ul>
<p class="wp-block-paragraph">画像の場合は、ファイルの場所と代替テキストを属性で渡します。</p>
<p class="wp-block-paragraph"><pre><code class="language-html"><img src="photo.jpg" alt="自然の風景"> </code></pre></p>
<ul class="wp-block-list"><li><code>src="..."</code> ：画像ファイルのパス</li><li><code>alt="..."</code> ：画像が表示されないときの代替テキスト</li></ul>
<p class="wp-block-paragraph">なかでも <code>alt</code> 属性は大切です。画像が読み込めないときの説明になるうえ、検索エンジンや読み上げソフトにも内容を伝えます。<strong>画像には必ず alt を書く</strong>、と習慣づけておきましょう。</p>
<h2 class="wp-block-heading">HTMLを書いてみよう：5分でできる最初の1ページ</h2>
<p class="wp-block-paragraph">知識を入れたら、すぐ手を動かすのが上達の近道です。次の手順で、はじめてのHTMLページを表示してみましょう。</p>
<figure class="dgk"><div class="dgk__card"><div class="dgk__hd"><p class="dgk__ttl">最初の1ページを表示するまで</p></div><div class="dgk__body"><ul class="dgk__flow"><li class="dgk__step"><em>STEP1</em><b>テキストエディタを開く</b><small>VSCodeなど</small></li><li class="dgk__step"><em>STEP2</em><b>コードを貼り付ける</b><small>記事のひな形をコピーする</small></li><li class="dgk__step"><em>STEP3</em><b>index.html として保存する</b><small>ファイル名を index.html にする</small></li><li class="dgk__step"><em>STEP4</em><b>ブラウザで開く</b><small>保存したファイルをダブルクリックする</small></li><li class="dgk__step"><em>STEP5</em><b>表示を確認する</b><small>「こんにちは！」と出れば成功</small></li></ul></div><p class="dgk__cap">図：エディタ→保存→ブラウザで開く→確認の、最初の1ページの手順。</p></div></figure>
<p class="wp-block-paragraph"><div class="preview-box"> <ol class="box-list is-num"> <li>テキストエディタ（VSCodeなど）を開く</li> <li>下のコードをコピーして貼り付ける</li> <li>ファイル名を <code>index.html</code> として保存する</li> <li>保存したファイルをダブルクリックしてブラウザで開く</li> <li>「こんにちは！」と表示されれば成功</li> </ol> </div></p>
<p class="wp-block-paragraph"><pre><code class="language-html"><!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>はじめてのHTML</title> </head> <body> <h1>こんにちは！</h1> <p>これは私の最初のHTMLページです。</p> <a href="https://awcs.org">Webサイト制作ノートへ</a> </body> </html> </code></pre></p>
<p class="wp-block-paragraph">うまく表示されたら、見出しの文字を変えたり、<code><p></code> をもう1つ増やしたりしてみてください。<strong>小さく変えて、結果を見る</strong>。この反復が、いちばん速い学び方です。</p>
<h2 class="wp-block-heading">HTMLを学ぶ順番：基本タグ20個から始める</h2>
<p class="wp-block-paragraph">何から手をつけるか迷ったら、次の順序が無理なく積み上がります。難しい機能はあとまわしでかまいません。</p>
<figure class="dgk"><div class="dgk__card"><div class="dgk__hd"><p class="dgk__ttl">HTMLを学ぶ順番</p></div><div class="dgk__body"><ul class="dgk__flow"><li class="dgk__step"><em>①</em><b>基本構造</b><small>html / head / body</small></li><li class="dgk__step"><em>②</em><b>テキスト系タグ</b><small>h1〜h6 / p / strong</small></li><li class="dgk__step"><em>③</em><b>リンク・画像</b><small>a / img</small></li><li class="dgk__step"><em>④</em><b>リスト・表</b><small>ul / ol / table</small></li><li class="dgk__step"><em>⑤</em><b>フォーム</b><small>form / input / button</small></li><li class="dgk__step"><em>⑥</em><b>セクション構造</b><small>header / main / footer</small></li><li class="dgk__step"><em>⑦</em><b>CSSと組み合わせる</b><small>見た目を整える段階へ</small></li></ul><p class="dgk__foot">基本タグを20個ほど覚えれば、シンプルなWebページは作れる</p></div><p class="dgk__cap">図：基本構造からCSS連携まで、HTMLを学ぶ順番。</p></div></figure>
<p class="wp-block-paragraph"><div class="preview-box"> <ol class="box-list is-num"> <li><strong>基本構造</strong>（<code>html</code> / <code>head</code> / <code>body</code>）</li> <li><strong>テキスト系タグ</strong>（<code>h1〜h6</code> / <code>p</code> / <code>strong</code>）</li> <li><strong>リンク・画像</strong>（<code>a</code> / <code>img</code>）</li> <li><strong>リスト・表</strong>（<code>ul</code> / <code>ol</code> / <code>table</code>）</li> <li><strong>フォーム</strong>（<code>form</code> / <code>input</code> / <code>button</code>）</li> <li><strong>セクション構造</strong>（<code>header</code> / <code>main</code> / <code>footer</code>）</li> <li><strong>CSSと組み合わせる</strong></li> </ol> </div></p>
<p class="wp-block-paragraph">基本タグを20個ほど覚えれば、シンプルなWebページは作れます。焦らず一つずつ試しましょう。HTMLとCSSの基礎が固まったら、全体像は<a href="https://awcs.org/web-design/web-design-self-study-roadmap-2026/" target="_blank" rel="noopener noreferrer">Webデザイン独学ロードマップ</a>で学習の順番を確認すると、次の一歩が見えてきます。</p>
<div class="cc-ad" style="min-height:280px;margin:2.2em 0;text-align:center;overflow:hidden;"><ins class="adsbygoogle" style="display:block;text-align:center;" data-ad-client="ca-pub-1296595038663921" data-ad-slot="3999688822" data-ad-format="fluid" data-ad-layout="in-article"></ins><script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></div><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>。HTMLは文章に「これは見出し」「これはリンク」という意味の印をつける言語で、計算や条件分岐といった処理は行いません。</p>
<p class="wp-block-paragraph">そのため、初学者が最初に触れる言語として扱いやすいのが特長です。処理が必要な部分はJavaScriptが担当します。</p>
<p class="wp-block-paragraph"></div></p>
<p class="wp-block-paragraph"><div class="qa-card"></p>
<h3 class="wp-block-heading">Q2：HTMLの勉強にはどれくらい時間がかかりますか？</h3>
<p class="wp-block-paragraph"><strong>基本タグの理解だけなら、数日〜2週間程度</strong>が目安です。基本構造とよく使うタグ20個ほどを覚えれば、シンプルなページは作れます。</p>
<p class="wp-block-paragraph">ただし、CSSやJavaScriptと組み合わせて本格的なサイトを作るには、もう少し継続的な練習が必要になります。</p>
<p class="wp-block-paragraph"></div></p>
<p class="wp-block-paragraph"><div class="qa-card"></p>
<h3 class="wp-block-heading">Q3：HTMLを書くのに専用ソフトは必要ですか？</h3>
<p class="wp-block-paragraph"><strong>メモ帳でも書けますが、VSCodeなどのエディタが便利です</strong>。色分け表示や入力補完があるため、ミスに気づきやすく、書く速度も上がります。</p>
<p class="wp-block-paragraph">無料で使えるエディタが多いので、まずは1つ入れて、コードを書いて保存してブラウザで開く流れに慣れましょう。</p>
<p class="wp-block-paragraph"></div></p>
<p class="wp-block-paragraph"><div class="qa-card"></p>
<h3 class="wp-block-heading">Q4：HTMLとCSSはどちらを先に学ぶべきですか？</h3>
<p class="wp-block-paragraph"><strong>HTMLが先です</strong>。HTMLでページの構造を作り、その上にCSSで見た目を重ねる、という順序が自然だからです。</p>
<p class="wp-block-paragraph">土台のHTMLが分かっていないと、CSSで何を装飾しているのか分かりにくくなります。HTMLの基本タグを押さえてから、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：alt属性はなぜ書いたほうがよいのですか？</h3>
<p class="wp-block-paragraph"><strong>画像が表示されないときの代替説明になり、検索エンジンや読み上げソフトにも内容を伝えるためです</strong>。</p>
<p class="wp-block-paragraph">通信状況やエラーで画像が出ないとき、<code>alt</code> の文字が代わりに表示されます。アクセシビリティとSEOの両面で役立つため、画像には必ず書く習慣をつけましょう。SEOの基礎は<a href="https://awcs.org/marketing/what-is-seo/" target="_blank" rel="noopener noreferrer">SEOとは？</a>で確認できます。</p>
<p class="wp-block-paragraph"></div></p>
<h2 class="wp-block-heading">まとめ：HTMLは「意味をつける」言語</h2>
<p class="wp-block-paragraph">最後にこの記事の要点を整理します。</p>
<p class="wp-block-paragraph"><div class="summary-box"> <strong>この記事のまとめ</strong> <ul class="box-list"> <li>HTMLはWebページの<strong>構造と内容を定義するマークアップ言語</strong>。プログラミング言語ではない</li> <li>タグで文章に意味をつけることで、ブラウザが正しく表示できる</li> <li>CSS（見た目）・JavaScript（動き）と<strong>役割を分担</strong>してWebページが完成する</li> <li>基本構造は<code>DOCTYPE</code>→<code>html</code>→<code>head</code>・<code>body</code>の入れ子</li> <li>学習は<strong>書いてブラウザで開く反復</strong>が近道。基本タグ20個から始める</li> </ul> </div></p>
<p class="wp-block-paragraph">HTMLの基本がつかめたら、次はよく使う<a href="https://awcs.org/learning/html/html-tag-list/" target="_blank" rel="noopener noreferrer">HTMLタグ一覧</a>を辞書として手元に置き、見た目を整える<a href="https://awcs.org/learning/css/what-is-css/" target="_blank" rel="noopener noreferrer">CSSの基本</a>へ進みましょう。手を動かしながら少しずつ広げていけば、自分のWebページは確実に形になります。</p>
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- DISCLAIMER_FOOTER -->
<p class="wp-block-paragraph"><div class="disclaimer-box"> <p>※本記事はWeb制作の公開情報をもとにした初心者向けの整理です。HTMLの仕様やブラウザの挙動は更新される場合があるため、最新の仕様は<a href="https://www.w3.org/TR/html52/" target="_blank" rel="noopener noreferrer">W3C</a>等の公式情報をご確認のうえご判断ください。</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/what-is-html/"
},
"headline": "HTMLとは？初心者向けにわかりやすく解説【基本構造・書き方】",
"description": "HTMLとはWebページの構造と内容を定義するマークアップ言語。CSS・JavaScriptとの違い、基本構造（DOCTYPE・html・head・body）、タグと属性の仕組み、よく使うタグ、実際の書き方までを初心者向けに解説。",
"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/2026/01/awcs-logo.png"
}
},
"datePublished": "2026-05-14T09:00:00+09:00",
"dateModified": "2026-06-18T09:00:00+09:00",
"articleSection": "html",
"keywords": "HTMLとは, HTML 基本構造, 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/what-is-html/"
}
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "HTMLはプログラミング言語ですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "いいえ、マークアップ言語です。HTMLは文章に「これは見出し」「これはリンク」という意味の印をつける言語で、計算や条件分岐といった処理は行いません。そのため、初学者が最初に触れる言語として扱いやすいのが特長です。処理が必要な部分はJavaScriptが担当します。"
}
},
{
"@type": "Question",
"name": "HTMLの勉強にはどれくらい時間がかかりますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "基本タグの理解だけなら、数日から2週間程度が目安です。基本構造とよく使うタグ20個ほどを覚えれば、シンプルなページは作れます。ただし、CSSやJavaScriptと組み合わせて本格的なサイトを作るには、もう少し継続的な練習が必要になります。"
}
},
{
"@type": "Question",
"name": "HTMLを書くのに専用ソフトは必要ですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "メモ帳でも書けますが、VSCodeなどのエディタが便利です。色分け表示や入力補完があるため、ミスに気づきやすく、書く速度も上がります。無料で使えるエディタが多いので、まずは1つ入れて、コードを書いて保存してブラウザで開く流れに慣れましょう。"
}
},
{
"@type": "Question",
"name": "HTMLとCSSはどちらを先に学ぶべきですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "HTMLが先です。HTMLでページの構造を作り、その上にCSSで見た目を重ねるという順序が自然だからです。土台のHTMLが分かっていないと、CSSで何を装飾しているのか分かりにくくなります。HTMLの基本タグを押さえてから、CSSに進むのがおすすめです。"
}
},
{
"@type": "Question",
"name": "alt属性はなぜ書いたほうがよいのですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "画像が表示されないときの代替説明になり、検索エンジンや読み上げソフトにも内容を伝えるためです。通信状況やエラーで画像が出ないとき、altの文字が代わりに表示されます。アクセシビリティとSEOの両面で役立つため、画像には必ず書く習慣をつけましょう。"
}
}
]
}
</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 class="p-articleMetas__termList c-tagList">
<a class="c-tagList__link hov-flash-up" href="https://awcs.org/tag/html/" data-tag-id="37">
html </a>
<a class="c-tagList__link hov-flash-up" href="https://awcs.org/tag/web-production/" data-tag-id="44">
Web制作 </a>
<a class="c-tagList__link hov-flash-up" href="https://awcs.org/tag/beginner/" data-tag-id="45">
初心者 </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%2Fwhat-is-html%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%2Fwhat-is-html%2F&text=HTML%E3%81%A8%E3%81%AF%EF%BC%9F%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91%E3%81%AB%E3%82%8F%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%8F%E8%A7%A3%E8%AA%AC%E3%80%90%E5%9F%BA%E6%9C%AC%E6%A7%8B%E9%80%A0%E3%83%BB%E6%9B%B8%E3%81%8D%E6%96%B9%E3%80%91" 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%2Fwhat-is-html%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%2Fwhat-is-html%2F&title=HTML%E3%81%A8%E3%81%AF%EF%BC%9F%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91%E3%81%AB%E3%82%8F%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%8F%E8%A7%A3%E8%AA%AC%E3%80%90%E5%9F%BA%E6%9C%AC%E6%A7%8B%E9%80%A0%E3%83%BB%E6%9B%B8%E3%81%8D%E6%96%B9%E3%80%91" 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%2Fwhat-is-html%2F&text=HTML%E3%81%A8%E3%81%AF%EF%BC%9F%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91%E3%81%AB%E3%82%8F%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%8F%E8%A7%A3%E8%AA%AC%E3%80%90%E5%9F%BA%E6%9C%AC%E6%A7%8B%E9%80%A0%E3%83%BB%E6%9B%B8%E3%81%8D%E6%96%B9%E3%80%91" 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/what-is-html/" 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/web-design/what-is-landing-page/" rel="prev" class="p-pnLinks__link">
<span class="p-pnLinks__title">ランディングページとは？目的・構成・作り方を現役ディレクターが解説</span>
</a>
</li>
<li class="p-pnLinks__item -next">
<a href="https://awcs.org/cms/what-is-canva/" rel="next" class="p-pnLinks__link">
<span class="p-pnLinks__title">Canvaとは？使い方・無料でできること・有料版との違いを解説</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のアバター' src='https://awcs.org/wp-content/uploads/2026/09/author-photo-awcs.org-96ab5f0f.png' srcset='https://awcs.org/wp-content/uploads/2026/09/author-photo-awcs.org-96ab5f0f.png 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 </a>
</div>
<div class="p-authorBox__r">
<p class="p-authorBox__desc u-thin">
制作会社でWebディレクターとして10年、コーポレートサイトやECサイト、キャンペーンページの案件を担当してきたSatoです。企画や設計だけでなく、デザインの方向を決め、進行を管理し、公開したあとの改善まで手を動かしてきました。<br />
<br />
10年やって思うのは、Webサイトは公開した日がゴールではないということです。むしろそこがスタートで、数字を見ながら直していく時間の方がずっと長い。きれいに作っても問い合わせが増えなければ意味がなく、逆に地味でも導線を整えるだけで反応が変わることも何度もありました。<br />
<br />
このサイトでは、制作で実際に効いた考え方や、逆にやりがちな失敗を、できるだけ具体的に書いていきます。 </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/08/awcs-org_table-tag-1-300x158.jpg" data-srcset="https://awcs.org/wp-content/uploads/2026/08/awcs-org_table-tag-1-300x158.jpg 300w, https://awcs.org/wp-content/uploads/2026/08/awcs-org_table-tag-1-1024x538.jpg 1024w, https://awcs.org/wp-content/uploads/2026/08/awcs-org_table-tag-1-768x403.jpg 768w, https://awcs.org/wp-content/uploads/2026/08/awcs-org_table-tag-1.jpg 1200w" data-aspectratio="300/158" ><noscript><img src="https://awcs.org/wp-content/uploads/2026/08/awcs-org_table-tag-1-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="公開日">2026年5月18日</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/08/awcs-org_html-line-break-1-300x158.jpg" data-srcset="https://awcs.org/wp-content/uploads/2026/08/awcs-org_html-line-break-1-300x158.jpg 300w, https://awcs.org/wp-content/uploads/2026/08/awcs-org_html-line-break-1-1024x538.jpg 1024w, https://awcs.org/wp-content/uploads/2026/08/awcs-org_html-line-break-1-768x403.jpg 768w, https://awcs.org/wp-content/uploads/2026/08/awcs-org_html-line-break-1.jpg 1200w" data-aspectratio="300/158" ><noscript><img src="https://awcs.org/wp-content/uploads/2026/08/awcs-org_html-line-break-1-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="公開日">2026年5月17日</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/08/awcs-org_img-tag-1-300x158.jpg" data-srcset="https://awcs.org/wp-content/uploads/2026/08/awcs-org_img-tag-1-300x158.jpg 300w, https://awcs.org/wp-content/uploads/2026/08/awcs-org_img-tag-1-1024x538.jpg 1024w, https://awcs.org/wp-content/uploads/2026/08/awcs-org_img-tag-1-768x403.jpg 768w, https://awcs.org/wp-content/uploads/2026/08/awcs-org_img-tag-1.jpg 1200w" data-aspectratio="300/158" ><noscript><img src="https://awcs.org/wp-content/uploads/2026/08/awcs-org_img-tag-1-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="公開日">2026年5月16日</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/08/awcs-org_a-tag-1-300x158.jpg" data-srcset="https://awcs.org/wp-content/uploads/2026/08/awcs-org_a-tag-1-300x158.jpg 300w, https://awcs.org/wp-content/uploads/2026/08/awcs-org_a-tag-1-1024x538.jpg 1024w, https://awcs.org/wp-content/uploads/2026/08/awcs-org_a-tag-1-768x403.jpg 768w, https://awcs.org/wp-content/uploads/2026/08/awcs-org_a-tag-1.jpg 1200w" data-aspectratio="300/158" ><noscript><img src="https://awcs.org/wp-content/uploads/2026/08/awcs-org_a-tag-1-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="公開日">2026年5月13日</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="公開日">2026年5月6日</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="公開日">2025年8月14日</time></div>
</div> </div>
</a>
</li>
<li class="p-postList__item">
<a href="https://awcs.org/learning/html/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="" class="c-postThumb__img u-obf-cover lazyload" sizes="(min-width: 600px) 320px, 50vw" data-src="https://awcs.org/wp-content/uploads/2025/08/html-tekisutowo-shi-yongshitafurokuraminkuno-bei-jing-300x200.jpg" data-srcset="https://awcs.org/wp-content/uploads/2025/08/html-tekisutowo-shi-yongshitafurokuraminkuno-bei-jing-300x200.jpg 300w, https://awcs.org/wp-content/uploads/2025/08/html-tekisutowo-shi-yongshitafurokuraminkuno-bei-jing-1024x684.jpg 1024w, https://awcs.org/wp-content/uploads/2025/08/html-tekisutowo-shi-yongshitafurokuraminkuno-bei-jing-768x513.jpg 768w, https://awcs.org/wp-content/uploads/2025/08/html-tekisutowo-shi-yongshitafurokuraminkuno-bei-jing-1536x1025.jpg 1536w, https://awcs.org/wp-content/uploads/2025/08/html-tekisutowo-shi-yongshitafurokuraminkuno-bei-jing-2048x1367.jpg 2048w" data-aspectratio="300/200" ><noscript><img src="https://awcs.org/wp-content/uploads/2025/08/html-tekisutowo-shi-yongshitafurokuraminkuno-bei-jing-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="2025-08-14" aria-label="公開日">2025年8月14日</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="公開日">2025年8月7日</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-859"><a href="https://awcs.org/profile/">運営者プロフィール</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-860"><a href="https://awcs.org/contact/">お問い合わせ</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1264"><a href="https://awcs.org/privacy/">プライバシーポリシー</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1293"><a href="https://awcs.org/./web-design/">Webデザイン</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-1294"><a href="https://awcs.org/./learning/html/">HTML</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1295"><a href="https://awcs.org/./cms/">CMS・ノーコード</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1296"><a href="https://awcs.org/./web-direction/">Webディレクション</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1297"><a href="https://awcs.org/./seo/tools/">SEOツール</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1298"><a href="https://awcs.org/./marketing/">マーケティング</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1299"><a href="https://awcs.org/./freelance/">フリーランス・案件獲得</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1300"><a href="https://awcs.org/./blog/">Blog</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1301"><a href="https://awcs.org/./school/">スクール・教材</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1302"><a href="https://awcs.org/./server/">サーバー・ドメイン</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":"5372dec733","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":""};
//# 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>
<script id="cc-click-metrics">
(function(){
var EP = "https:\/\/awcs.org\/wp-json\/cc-click\/v1\/hit";
var PID = 73;
var DEBUG = false;
// ASPの計測ホスト（クリックが記録される側）。広告主の直リンクは outbound_click として別に数える
var ASP = [
['a8','px.a8.net'],['moshimo','af.moshimo.com'],['afb','t.afi-b.com'],
['townlife','townlife-aff.com'],['rentracks','rentracks.jp'],
['valuecommerce','ck.jp.ap.valuecommerce.com'],['trafficgate','trafficgate.net'],
['accesstrade','accesstrade.net'],['linksynergy','click.linksynergy.com'],
['felmat','felmat.net'],['amazon','amzn.to']
];
// 出典として張る公的機関のホスト（成果に結びつかない離脱＝別枠で数える）
var AUTH = /\.(go|lg|ac|gr|or)\.jp$|\.gov$/;
var DEV = (window.matchMedia && window.matchMedia('(max-width: 781px)').matches) ? 'mobile' : 'desktop';
var sent = {};
var DBG = {ver:'1.3.0', post_id:PID, device:DEV, endpoint:EP,
handler_attached:false, links_in_scope:0, asp_links:[], classified:{}, would_send:[]};
function send(kind, o){
o = o || {};
// ★診断モードでは一切送らない（記録して見せるだけ）。計測を汚さずに導通を確認するための唯一の経路。
if (DEBUG) {
DBG.would_send.push({kind:kind, host:o.host||'', asp:o.asp||'', pos:o.pos||0,
text:(o.text||'').slice(0,60)});
DBG.classified[kind] = (DBG.classified[kind]||0) + 1;
if (window.__ccAspDebugRender) { window.__ccAspDebugRender(); }
return;
}
var body = JSON.stringify({
kind: kind, post_id: PID, host: o.host || '', asp: o.asp || '',
pos: o.pos || 0, device: DEV, text: (o.text || '').slice(0, 60)
});
try {
if (navigator.sendBeacon) { navigator.sendBeacon(EP, new Blob([body], {type:'application/json'})); }
else { var x = new XMLHttpRequest(); x.open('POST', EP, true); x.setRequestHeader('Content-Type','application/json'); x.send(body); }
} catch(e){}
// GTM 側でトリガーを作れるように dataLayer にも積む。⛔gtag() は呼ばない（GTM下では消えるため）
try {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({event:'cc_'+kind, cc_kind:kind, cc_post_id:PID,
cc_host:o.host||'', cc_asp:o.asp||'', cc_pos:o.pos||0, cc_text:(o.text||'').slice(0,60)});
} catch(e){}
}
// ---- リンククリック（遷移は絶対に妨げない） ----
var links = [].slice.call(document.querySelectorAll('article a[href], .post_content a[href], main a[href]'));
var idx = {};
document.addEventListener('click', function(ev){
var a = ev.target && ev.target.closest ? ev.target.closest('a[href]') : null;
if (!a) { return; }
// ⛔本文の外（グローバルナビ・サイドバー・フッター）は数えない。
// 数えると internal_click がナビに支配され、CTAの効きが読めなくなる。
if (!a.closest('.post_content, article, main')) { return; }
var href = a.getAttribute('href') || '';
if (href.indexOf('#') === 0 || href.indexOf('mailto:') === 0 || href.indexOf('tel:') === 0) { return; }
var host = '';
try { host = new URL(a.href, location.href).hostname; } catch(e){ return; }
var kind = 'outbound_click', asp = '';
if (host === location.hostname) { kind = 'internal_click'; }
else {
for (var i=0;i<ASP.length;i++){ if (host.indexOf(ASP[i][1]) !== -1) { kind='asp_click'; asp=ASP[i][0]; break; } }
// ⛔出典（官公庁・公的機関）を outbound_click に混ぜない。当社記事の外部リンクは68.1%がこれ。
// 混ぜると「無償で客を流している」という読みが全面で誤発火する。
if (!asp && AUTH.test(host)) { kind = 'citation_click'; }
}
// ★診断モードでは遷移そのものを止める。ASPの計測URLを踏まずにハンドラの導通を確かめるため。
// ⛔ これが無いと「動いているか確かめる」ために自分のASPリンクを踏むことになり、計測が狂う。
if (DEBUG) { ev.preventDefault(); ev.stopPropagation(); }
idx[kind] = (idx[kind] || 0) + 1;
send(kind, {host: host, asp: asp, pos: (links.indexOf(a)+1) || idx[kind], text: (a.textContent||'').trim()});
}, true);
DBG.handler_attached = true;
// ---- CTAが画面に入った（分母を「到達」にする） ----
if (window.IntersectionObserver) {
var ctas = document.querySelectorAll('.cta-box, .cta-soft');
var io = new IntersectionObserver(function(es){
es.forEach(function(e){
if (!e.isIntersecting) { return; }
var n = e.target.getAttribute('data-cc-pos') || 0;
if (sent['cta'+n]) { return; }
sent['cta'+n] = 1;
send('cta_view', {pos: parseInt(n,10)||0});
io.unobserve(e.target);
});
}, {threshold: 0.5});
for (var j=0;j<ctas.length;j++){ ctas[j].setAttribute('data-cc-pos', j+1); io.observe(ctas[j]); }
}
// ---- ASPリンクが画面に入った（★換金効率の分母・markupに依存しない） ----
// ⛔ 分母を .cta-box/.cta-soft に置いてはいけない。ASPリンクを持つ記事の16.2%
// （27サイト288本・2026-08-28実測）はどちらのクラスも持たず、cta_view が構造的に0になる。
if (window.IntersectionObserver) {
var av = [];
for (var k=0;k<links.length;k++){
var hh = ''; try { hh = new URL(links[k].href, location.href).hostname; } catch(e){ continue; }
for (var q=0;q<ASP.length;q++){
if (hh.indexOf(ASP[q][1]) !== -1) { av.push([links[k], ASP[q][0], hh]); break; }
}
}
var io2 = new IntersectionObserver(function(es){
es.forEach(function(e){
if (!e.isIntersecting) { return; }
var n = e.target.getAttribute('data-cc-avpos') || 0;
if (sent['av'+n]) { return; }
sent['av'+n] = 1;
send('asp_view', {pos: parseInt(n,10)||0,
asp: e.target.getAttribute('data-cc-asp') || '',
host: e.target.getAttribute('data-cc-avhost') || ''});
io2.unobserve(e.target);
});
}, {threshold: 0.5});
for (var k2=0;k2<av.length;k2++){
av[k2][0].setAttribute('data-cc-avpos', k2+1);
av[k2][0].setAttribute('data-cc-asp', av[k2][1]);
av[k2][0].setAttribute('data-cc-avhost', av[k2][2]);
io2.observe(av[k2][0]);
}
window.__ccAspLinks = av.length; // 検証用（ASPリンクを踏まずに本数を確認できる）
}
// ---- 本文末尾への到達 ----
// ⛔ 旧実装は「ドキュメント全体の90%」を見ていた。SWELLはフッター・関連記事・広告が
// ドキュメント高の2〜4割を占めるため、本文を読み切っても発火しない（＝到達率を過小に出す）。
// さらに scroll イベントだけに頼ると、1画面に収まる短い記事では永久に発火しない。
var fired90 = false;
var bodyEl = document.querySelector('.post_content') ||
document.querySelector('article') || document.querySelector('main');
function check90(){
if (fired90 || !bodyEl) { return; }
var r = bodyEl.getBoundingClientRect();
var read = (window.innerHeight - r.top) / (r.height || 1);
if (read >= 0.9) { fired90 = true; send('scroll_90', {}); }
}
window.addEventListener('scroll', check90, {passive:true});
window.addEventListener('load', check90);
check90();
window.__ccClickReady = links.length; // 検証用マーカー（ASPリンクを踏まずに導通を確認する）
// ---- 自己診断（?cc_asp_debug=1）----
// ⛔ DevTools も GA4 DebugView も使わずに、ASPリンクを踏まずに次を確認できる:
// ① スクリプトが読者に届いているか ② クリックハンドラが付いているか
// ③ 何本のリンクをどう分類したか ④ 押したら何が送られるはずか
if (DEBUG) {
DBG.links_in_scope = links.length;
for (var d1=0; d1<links.length; d1++){
var dh=''; try { dh = new URL(links[d1].href, location.href).hostname; } catch(e){ continue; }
if (dh === location.hostname) { continue; }
var dasp='';
for (var d2=0; d2<ASP.length; d2++){ if (dh.indexOf(ASP[d2][1]) !== -1) { dasp=ASP[d2][0]; break; } }
if (dasp) { DBG.asp_links.push({pos:d1+1, asp:dasp, host:dh,
text:(links[d1].textContent||'').trim().slice(0,40)}); }
}
window.__ccAspDebug = DBG;
var box = document.createElement('div');
box.setAttribute('style','position:fixed;left:8px;bottom:8px;z-index:2147483647;max-width:min(560px,94vw);'
+ 'max-height:62vh;overflow:auto;background:#101418;color:#e6edf3;font:12px/1.6 ui-monospace,Menlo,monospace;'
+ 'padding:12px 14px;border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.45)');
window.__ccAspDebugRender = function(){
var h = '<b>cc_click_metrics 自己診断 v' + DBG.ver + '</b><br>'
+ 'このモードでは <b>何も送信しません</b>／リンクは遷移しません<br><hr style="border:0;border-top:1px solid #333">'
+ 'post_id: ' + DBG.post_id + ' device: ' + DBG.device + '<br>'
+ 'クリックハンドラ: ' + (DBG.handler_attached ? '<span style="color:#4ade80">付いている</span>'
: '<span style="color:#f87171">付いていない</span>') + '<br>'
+ '本文内リンク総数: ' + DBG.links_in_scope + '<br>'
+ 'ASPリンクとして認識: <b>' + DBG.asp_links.length + '</b> 本<br>';
for (var i=0;i<DBG.asp_links.length && i<25;i++){
var L = DBG.asp_links[i];
h += ' #' + L.pos + ' [' + L.asp + '] ' + L.host + ' — ' + L.text + '<br>';
}
h += '<hr style="border:0;border-top:1px solid #333">送信されるはずだったイベント:<br>';
var any=false;
for (var k in DBG.classified){ any=true; h += ' ' + k + ': ' + DBG.classified[k] + '<br>'; }
if (!any) { h += ' （まだ無し。ASPリンクを押すと、遷移せずにここへ出ます）<br>'; }
h += '<span style="color:#94a3b8">window.__ccAspDebug にも同じ内容が入っています</span>';
box.innerHTML = h;
};
window.__ccAspDebugRender();
(document.body || document.documentElement).appendChild(box);
try { console.log('[cc_click_metrics] 自己診断', DBG); } catch(e){}
}
})();
</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\/what-is-html\/","url":"https:\/\/awcs.org\/learning\/html\/what-is-html\/","name":"HTMLとは？初心者向けにわかりやすく解説【基本構造・書き方】","description":"HTMLはWebページの骨格を作るマークアップ言語で、プログラミング言語ではありません。構造はHTML・見た目はCSS・動きはJavaScriptという役割分担、DOCTYPE→html→head\/bodyの最小構成、タグと属性の基本を解説します。 この記事でわかること HTMLはWebページの「骨格」を作るマークアップ言語。プログラミング言語ではない HTMLが担うのは構造と内容。見た目はCSS、動きはJavaScriptが担当する役割分担 最小構成はDOCTYPE宣言→html→head・bodyの入れ子という決まった形 タグは「開始タグ・内容・終了タグ」のセット。属性で追加情報を渡す ま","isPartOf":{"@id":"https:\/\/awcs.org\/#website"}},{"@type":"Article","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/awcs.org\/learning\/html\/what-is-html\/"},"headline":"HTMLとは？初心者向けにわかりやすく解説【基本構造・書き方】","image":{"@type":"ImageObject","url":"https:\/\/awcs.org\/wp-content\/uploads\/2026\/05\/what-is-html.jpg"},"datePublished":"2026-05-04T09:00:00+0900","dateModified":"2026-08-27T00:47:32+0900","author":{"@type":"Person","@id":"https:\/\/awcs.org\/learning\/html\/what-is-html\/#author","name":"Sato","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 -->
<script>
(function () {
var tries = 0, MAX = 120; // 0.5秒刻み。60秒まで見張る（遅延読み込みの枠を待てる長さ）
function sweep() {
// .cc-ad = 自前の枠 / .google-auto-placed = 自動広告が差し込む枠（空白の実体はこちら）
var boxes = document.querySelectorAll('.cc-ad, .google-auto-placed'), pending = 0;
tries++;
for (var i = 0; i < boxes.length; i++) {
var box = boxes[i];
if (box.style.display === 'none') { continue; }
var ins = box.querySelector('ins.adsbygoogle');
if (!ins) { continue; }
// ⛔ 畳んでよいのは AdSense が明示的に「広告を返さない」と言った枠だけ。
// data-ad-status が未設定＝まだリクエストしていない可能性がある（遅延読み込み）。
// ここを「未配信」と決めつけると、スクロール前の枠を消してリクエストを止める
// （2026-08-08 に実測 -95%。上のコメント参照）。
// ⛔ AdSense の未配信は `unfilled` と `unfill-optimized` の2通りある（2026-08-30 実測）。
// 完全一致で見ていたので `unfill-optimized` に1件も当たらず、1枠368pxの空白が残っていた。
var st = ins.getAttribute('data-ad-status');
if (st && st.indexOf('unfill') === 0) {
box.style.display = 'none';
} else if (st !== 'filled') {
pending++; // filled でも unfill* でもない＝まだ結果が出ていない。待つ
}
}
if (pending && tries < MAX) { setTimeout(sweep, 500); }
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function () { setTimeout(sweep, 500); });
} else {
setTimeout(sweep, 500);
}
})();
</script>
</body></html>
|
