</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="nofollow 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="nofollow noopener noreferrer">HTMLの改行方法｜brタグとpタグの違い</a>で整理しています。</p>
<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="nofollow noopener noreferrer">aタグの使い方</a>・<a href="https://awcs.org/learning/html/img-tag/" target="_blank" rel="nofollow 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="nofollow 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="nofollow 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>
<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>
<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="nofollow noopener noreferrer">Webデザイン独学ロードマップ</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>。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="nofollow 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="nofollow noopener noreferrer">HTMLタグ一覧</a>を辞書として手元に置き、見た目を整える<a href="https://awcs.org/learning/css/what-is-css/" target="_blank" rel="nofollow 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/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%e5%88%b6%e4%bd%9c/" data-tag-id="44">
Web制作 </a>
<a class="c-tagList__link hov-flash-up" href="https://awcs.org/tag/%e5%88%9d%e5%bf%83%e8%80%85/" 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 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/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/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="公開日">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":"7874777b52","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\/what-is-html\/","url":"https:\/\/awcs.org\/learning\/html\/what-is-html\/","name":"HTMLとは？初心者向けにわかりやすく解説【基本構造・書き方】","description":"この記事でわかること HTMLはWebページの「骨格」を作るマークアップ言語。プログラミング言語ではない HTMLが担うのは構造と内容。見た目はCSS、動きはJavaScriptが担当する役割分担 最小構成はDOCTYPE宣言→html→head・bodyの入れ子という決まった形 タグは「開始タグ・内容・終了タグ」のセット。属性で追加情報を渡す まず覚える基本タグは20個ほど。手元のエディタで書いて試すのが近道 公的情報源: 総務省「国民のためのサイバーセキュリティサイト」（参照）／W3C「HTML Standard」（参照） 用語をひと通りつかんだら、次はタグを実際に書いて動かすのが理解の近","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+0000","dateModified":"2026-06-18T14:49:47+0000","author":{"@type":"Person","@id":"https:\/\/awcs.org\/learning\/html\/what-is-html\/#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>
|
