</code></td><td>タブ・検索結果に出るタイトル。SEOに直結</td></tr><tr><td><code><meta name="description"></code></td><td>検索結果の説明文。クリック率に影響</td></tr><tr><td><code><link rel="stylesheet"></code></td><td>外部CSSファイルの読み込み</td></tr></tbody></table></figure>
<p class="wp-block-paragraph">補足を3点だけ。<code>charset</code> は head のできるだけ先頭に書きます。<code>title</code> はキーワードを含めた30〜35文字が目安です。<code>description</code> は80〜90文字が目安で、直接の順位要因ではないものの、クリック率（CTR）に影響します。</p>
<p class="wp-block-paragraph">CSSの役割や書き方をまだ知らない方は、<a href="https://awcs.org/learning/css/what-is-css/" target="_blank" rel="nofollow noopener noreferrer">CSSとは？書き方の基本・HTMLとの違いをわかりやすく解説</a> もあわせて読むと、<code><link></code> の意味がつかみやすくなります。</p>
<h2 class="wp-block-heading">bodyタグとセマンティック構造</h2>
<p class="wp-block-paragraph">最後が <code><body></code> です。読者が実際に目にするのは、ここに書いた中身だけです。</p>
<p class="wp-block-paragraph"><pre><code><body> <header> <h1>サイト名</h1> <nav>...</nav> </header> <main> <article> <h2>記事タイトル</h2> <p>本文テキスト</p> </article> </main> <footer> <p>© 2026 サイト名</p> </footer> </body> </code></pre></p>
<h3 class="wp-block-heading">bodyは「画面に出る中身」のエリア</h3>
<p class="wp-block-paragraph"><code><body></code> には、<strong>実際に表示されるすべての内容</strong>を書きます。テキスト・画像・リンク・フォームなど、ユーザーが見るものはすべてbody内です。</p>
<h3 class="wp-block-heading">body内のセマンティックタグ</h3>
<p class="wp-block-paragraph">HTML5以降は、ページ内の役割に応じた<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></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></tbody></table></figure>
<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">ここまでの要素をまとめた、実用テンプレートです。コピーしてそのまま使えます。</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"> <meta name="description" content="ここにページの説明文を書く（80〜90文字）"> <title>ページタイトル | サイト名</title> <link rel="stylesheet" href="style.css"> </head> <body></p>
<p class="wp-block-paragraph"> <header> <div class="header-inner"> <a href="https://example.com/" class="logo">サイト名</a> <nav> <ul> <li><a href="https://example.com/about/">サービスについて</a></li> <li><a href="https://example.com/blog/">ブログ</a></li> <li><a href="https://example.com/contact/">お問い合わせ</a></li> </ul> </nav> </div> </header></p>
<p class="wp-block-paragraph"> <main> <article> <h1>ページのメインタイトル</h1> <p>ここに本文を書きます。</p> </article> </main></p>
<p class="wp-block-paragraph"> <footer> <p>© 2026 サイト名. All rights reserved.</p> </footer></p>
<p class="wp-block-paragraph"></body> </html> </code></pre></p>
<p class="wp-block-paragraph">リンクの書き方を詳しく知りたい場合は <a href="https://awcs.org/learning/html/a-tag/" target="_blank" rel="nofollow noopener noreferrer">aタグの使い方</a>、表組みは <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">最後に、初学者がつまずきやすい構造ミスを2つ紹介します。</p>
<h3 class="wp-block-heading">bodyの外にコンテンツを書く</h3>
<p class="wp-block-paragraph"><code><body></code> の外に書いた内容は、正しく扱われません。表示されるべき中身は、必ずbody内に入れます。</p>
<p class="wp-block-paragraph"><pre><code><!-- × --> <html> <head>...</head> <body>...</body> <p>これはbodyの外</p> <!-- 無効 --> </html></p>
<p class="wp-block-paragraph"><!-- 〇 --> <body> <p>コンテンツはすべてbody内に</p> </body> </code></pre></p>
<h3 class="wp-block-heading">headとbodyを入れ子にする</h3>
<p class="wp-block-paragraph">headとbodyは<strong>並列</strong>の関係です。一方をもう一方の中に入れてはいけません。</p>
<p class="wp-block-paragraph"><pre><code><!-- × --> <head> <body>...</body> <!-- bodyをheadの中に入れるのはNG --> </head></p>
<p class="wp-block-paragraph"><!-- 〇 headとbodyは並列 --> <html> <head>...</head> <body>...</body> </html> </code></pre></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. DOCTYPE宣言は省略しても表示されますか</h3>
<p class="wp-block-paragraph">省略しても画面には表示されます。ただしブラウザが互換モードで動くため、CSSのレイアウトが意図どおりに出ない不具合が起きやすくなります。1行目に必ず書く前提で覚えておきましょう。</p>
<p class="wp-block-paragraph"></div></p>
<p class="wp-block-paragraph"><div class="qa-card"></p>
<h3 class="wp-block-heading">Q2. lang属性を書かないとどうなりますか</h3>
<p class="wp-block-paragraph">エラーにはなりません。ただし読み上げツールの言語判定や、ブラウザ翻訳・検索エンジンの言語認識が不正確になりやすくなります。日本語サイトなら <code>lang="ja"</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. headとbodyの違いがわかりません</h3>
<p class="wp-block-paragraph">シンプルに「画面に出るか出ないか」で分けると整理できます。headはブラウザ向けの情報（文字コード・タイトル・CSS読み込み）で画面に出ません。bodyはユーザーに見せる中身で、ここだけが画面に表示されます。</p>
<p class="wp-block-paragraph"></div></p>
<p class="wp-block-paragraph"><div class="qa-card"></p>
<h3 class="wp-block-heading">Q4. charsetはUTF-8以外でもいいですか</h3>
<p class="wp-block-paragraph">特別な事情がなければ <code>UTF-8</code> を使います。日本語を含む多言語を正しく扱え、現在のWeb標準として広く採用されています。古い文字コードを指定すると文字化けの原因になります。</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">基本構造を覚えたら、body内で使う個別タグの使い方に進むのがおすすめです。<a href="https://awcs.org/learning/html/html-tag-list/" target="_blank" rel="nofollow noopener noreferrer">HTMLタグ一覧</a> でよく使うタグを把握し、<a href="https://awcs.org/learning/html/what-is-css/" target="_blank" rel="nofollow noopener noreferrer">CSSとは</a> で見た目の付け方を学ぶと、ページを形にできるようになります。</p>
<p class="wp-block-paragraph"></div></p>
<h2 class="wp-block-heading">まとめ</h2>
<p class="wp-block-paragraph">HTMLの基本構造は、次の4要素で成り立っています。</p>
<p class="wp-block-paragraph"><div class="summary-box"> <strong>この記事のまとめ</strong> <ul class="box-list"> <li><code><!DOCTYPE html></code>：HTML5文書の宣言。1行目に必須</li> <li><code><html lang="ja"></code>：文書全体のルート・言語指定</li> <li><code><head></code>：ブラウザ向けのメタ情報（title・charset・viewport・CSS）。画面に出ない</li> <li><code><body></code>：画面に表示されるすべてのコンテンツ</li> <li>headとbodyは<strong>並列</strong>。入れ子にしない</li> </ul> </div></p>
<p class="wp-block-paragraph">この骨組みを覚えたら、次は各タグの具体的な使い方を <a href="https://awcs.org/learning/html/html-tag-list/" target="_blank" rel="nofollow noopener noreferrer">HTMLタグ一覧</a> で確認してみましょう。あわせて <a href="https://awcs.org/learning/html/a-tag/" target="_blank" rel="nofollow noopener noreferrer">aタグ</a>・<a href="https://awcs.org/learning/html/table-tag/" target="_blank" rel="nofollow noopener noreferrer">tableタグ</a>・<a href="https://awcs.org/learning/html/img-tag/" target="_blank" rel="nofollow noopener noreferrer">imgタグ</a> といった頻出タグを押さえると、実際にページを組み立てられるようになります。</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/css/what-is-css/" target="_blank" rel="nofollow noopener noreferrer">CSSとは？書き方の基本・HTMLとの違い</a></li><li><a href="https://awcs.org/learning/html/display/" target="_blank" rel="nofollow noopener noreferrer">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>※本記事はWeb制作・HTMLに関する公開情報をもとにした整理です。仕様は更新される場合があるため、最新の挙動はMDN Web DocsやW3Cの公式ドキュメントをあわせてご確認ください。</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/basic-structure/"
},
"headline": "HTMLの基本構造を徹底解説｜DOCTYPE・html・head・bodyの役割",
"description": "HTMLの基本構造であるDOCTYPE・html・head・bodyの4要素の役割を初心者向けに解説。lang属性やcharset、セマンティックタグの使い分け、コピペで使えるテンプレート、よくある構造ミスの直し方まで整理。",
"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 基本構造, DOCTYPE, head, body, lang属性",
"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の基本構造を徹底解説｜DOCTYPE・html・head・bodyの役割",
"item": "https://awcs.org/learning/html/basic-structure/"
}
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "DOCTYPE宣言は省略しても表示されますか",
"acceptedAnswer": {
"@type": "Answer",
"text": "省略しても画面には表示されます。ただしブラウザが互換モードで動くため、CSSのレイアウトが意図どおりに出ない不具合が起きやすくなります。1行目に必ず書く前提で覚えておきましょう。"
}
},
{
"@type": "Question",
"name": "lang属性を書かないとどうなりますか",
"acceptedAnswer": {
"@type": "Answer",
"text": "エラーにはなりません。ただし読み上げツールの言語判定や、ブラウザ翻訳・検索エンジンの言語認識が不正確になりやすくなります。日本語サイトならlang=jaを設定しておくのが無難です。"
}
},
{
"@type": "Question",
"name": "headとbodyの違いがわかりません",
"acceptedAnswer": {
"@type": "Answer",
"text": "画面に出るか出ないかで分けると整理できます。headはブラウザ向けの情報（文字コード・タイトル・CSS読み込み）で画面に出ません。bodyはユーザーに見せる中身で、ここだけが画面に表示されます。"
}
},
{
"@type": "Question",
"name": "charsetはUTF-8以外でもいいですか",
"acceptedAnswer": {
"@type": "Answer",
"text": "特別な事情がなければUTF-8を使います。日本語を含む多言語を正しく扱え、現在のWeb標準として広く採用されています。古い文字コードを指定すると文字化けの原因になります。"
}
},
{
"@type": "Question",
"name": "次は何を学べばいいですか",
"acceptedAnswer": {
"@type": "Answer",
"text": "基本構造を覚えたら、body内で使う個別タグの使い方に進むのがおすすめです。HTMLタグ一覧でよく使うタグを把握し、CSSの基本で見た目の付け方を学ぶと、ページを形にできるようになります。"
}
}
]
}
</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%2Fbasic-structure%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%2Fbasic-structure%2F&text=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%A7%8B%E9%80%A0%E3%82%92%E5%BE%B9%E5%BA%95%E8%A7%A3%E8%AA%AC%EF%BD%9CDOCTYPE%E3%83%BBhtml%E3%83%BBhead%E3%83%BBbody%E3%81%AE%E5%BD%B9%E5%89%B2" 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%2Fbasic-structure%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%2Fbasic-structure%2F&title=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%A7%8B%E9%80%A0%E3%82%92%E5%BE%B9%E5%BA%95%E8%A7%A3%E8%AA%AC%EF%BD%9CDOCTYPE%E3%83%BBhtml%E3%83%BBhead%E3%83%BBbody%E3%81%AE%E5%BD%B9%E5%89%B2" 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%2Fbasic-structure%2F&text=HTML%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%A7%8B%E9%80%A0%E3%82%92%E5%BE%B9%E5%BA%95%E8%A7%A3%E8%AA%AC%EF%BD%9CDOCTYPE%E3%83%BBhtml%E3%83%BBhead%E3%83%BBbody%E3%81%AE%E5%BD%B9%E5%89%B2" 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/basic-structure/" 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 -next">
<a href="https://awcs.org/learning/html/basis/" rel="next" class="p-pnLinks__link">
<span class="p-pnLinks__title">HTML入門｜はじめてのHTML・基本の書き方と学習ロードマップ</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/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>
</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":"95328b5c69","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\/basic-structure\/","url":"https:\/\/awcs.org\/learning\/html\/basic-structure\/","name":"HTMLの基本構造を徹底解説｜DOCTYPE・html・head・bodyの役割","description":"HTMLの基本構造はDOCTYPE・html・head・bodyの4要素で成り立ちます。それぞれの役割と書く理由、lang属性やcharset・viewportの意味、header／main／article／footerの使い分けを解説し、コピーして使えるテンプレートも紹介します。 この記事でわかること HTMLの基本構造はDOCTYPE・html・head・bodyの4つで成り立つこと 4要素それぞれの役割と書く理由（互換モード回避・文字化け防止など） lang属性・charset・viewportなどheadに置く要素の意味 HTML5のセマンティックタグ（header／main／arti","isPartOf":{"@id":"https:\/\/awcs.org\/#website"}},{"@type":"Article","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/awcs.org\/learning\/html\/basic-structure\/"},"headline":"HTMLの基本構造を徹底解説｜DOCTYPE・html・head・bodyの役割","image":{"@type":"ImageObject","url":"https:\/\/awcs.org\/wp-content\/uploads\/2025\/08\/close-up-information-sign.jpg"},"datePublished":"2025-07-10T14:28:00+0000","dateModified":"2026-07-02T07:52:44+0000","author":{"@type":"Person","@id":"https:\/\/awcs.org\/learning\/html\/basic-structure\/#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>
|
