JavaScript | HTML / CSS 連携：HTML基礎－ HTMLの役割

JavaScript

2026.05.31

HTML の役割は「中身の意味を伝えること」
HTML は「文書の骨組み」を作る
1. 見出し・段落・リストで“アウトライン”を作る
2. なぜ“意味”がそんなに大事なのか
HTML は「意味」と「役割」をタグで表現する
1. ボタンは <button>、リンクは <a> にする理由
HTML・CSS・JavaScript の役割分担を具体例で見る
1. 悪い例：全部 HTML でやろうとする
2. 良い例：意味は HTML、見た目は CSS
HTML は「JavaScript の土台」でもある
1. JS は HTML があって初めて“意味のある動き”になる
HTML の“役割”を意識して書くための小さなチェック
1. 書いたあとに、自分にこう問いかけてみる
初心者として「HTML の役割」で絶対に掴んでほしいこと

HTML の役割は「中身の意味を伝えること」

まず一番大事なことから。

HTML の役割は
「見た目を決めること」ではなく
「中身の意味（構造）を伝えること」です。

人間にとっては「画面にどう見えるか」ですが、
ブラウザ・検索エンジン・スクリーンリーダーにとっては
「これは見出しなのか」「これは本文なのか」「これはボタンなのか」
という“意味”が重要になります。

CSS が「見た目担当」
JavaScript が「動き担当」
HTML は「中身と構造担当」

この役割分担を、まず頭に置いておいてください。

HTML は「文書の骨組み」を作る

見出し・段落・リストで“アウトライン”を作る

HTML の基本タグは、
「文章の構造」を表すために存在します。

見出しには <h1>〜<h6>
段落には <p>
強調には <strong> や <em>
リンクには <a>

例えば、自己紹介ページを作るとします。

<h1>山田太郎の自己紹介</h1>

<h2>プロフィール</h2>
<p>東京在住のエンジニアです。コーヒーと猫が好きです。</p>

<h2>スキル</h2>
<p>JavaScript、HTML、CSS を中心にフロントエンド開発をしています。</p>

<h2>趣味</h2>
<p>休日はカフェ巡りと写真撮影を楽しんでいます。</p>

ここでは、
「ページ全体のタイトル」が <h1>
「プロフィール」「スキル」「趣味」が <h2>
それぞれの説明が <p>

というふうに、
“文章のアウトライン”を HTML で表現しています。

CSS を一切書かなくても、
ブラウザは見出しを少し大きく、段落を普通の文字で表示してくれます。
これは「見た目」ではなく「意味」に基づいたデフォルト表示です。

なぜ“意味”がそんなに大事なのか

意味がきちんとマークアップされていると、
いろんなものが賢くなります。

検索エンジンが内容を理解しやすくなる
スクリーンリーダーが「ここが見出しです」と読み上げてくれる
ブラウザが目次を作りやすくなる

逆に、全部を <div> と <span> だけで書いてしまうと、
人間には見えても、機械には「ただの文字の塊」にしか見えません。

HTML の役割は、
「これは何なのか？」をタグで宣言すること です。

HTML は「意味」と「役割」をタグで表現する

ボタンは <button>、リンクは <a> にする理由

例えば、クリックできるものを作るとき。

見た目だけなら、
どのタグでも CSS でボタンっぽくできます。

<div class="btn">送信</div>

でも、これは HTML 的には「ただの div」です。
ブラウザもスクリーンリーダーも「ボタン」とは認識しません。

正しくはこうです。

<button type="button">送信</button>

または、ページ遷移ならこうです。

<a href="/contact">お問い合わせページへ</a>

ここでのポイントは、

「クリックできるからボタンっぽい」ではなく
「これはボタンです」「これはリンクです」と HTML で宣言する ことです。

そうすると、

キーボード操作（Tab や Enter）で自然に動く
スクリーンリーダーが「ボタン」「リンク」と読み上げる
ブラウザがフォーカスの見た目を自動で付けてくれる

といった“当たり前の使いやすさ”が手に入ります。

HTML・CSS・JavaScript の役割分担を具体例で見る

悪い例：全部 HTML でやろうとする

例えば、「赤い大きな見出し」を作りたいとします。

初心者がやりがちな書き方はこれです。

<h1><font color="red" size="7">お知らせ</font></h1>

<font> は古いタグですし、
「見た目のためだけの情報」が HTML に混ざっています。

これは、
「意味」と「見た目」がごちゃ混ぜになっている状態 です。

良い例：意味は HTML、見た目は CSS

同じものを、役割分担して書くとこうなります。

HTML:

<h1 class="headline">お知らせ</h1>

CSS:

.headline {
  color: red;
  font-size: 2.5rem;
}

ここでは、

「これはページの見出しです」 → <h1>
「赤く大きくしたい」 → .headline の CSS

と、
HTML は意味だけ、CSS は見た目だけ
というきれいな分離になっています。

この分離ができていると、

デザインを変えたいときは CSS だけ触ればいい
HTML を読むだけで「何が書いてあるページか」が分かる
別のデザインに差し替えるのも簡単

というメリットが出てきます。

HTML は「JavaScript の土台」でもある

JS は HTML があって初めて“意味のある動き”になる

JavaScript は、
HTML で作った「意味のある要素」に対して動きを付けます。

例えば、「開閉できる FAQ」を作るとします。

HTML（構造と意味）:

<h2>よくある質問</h2>

<div class="faq">
  <button class="faq-question">Q. 送料はいくらですか？</button>
  <p class="faq-answer" hidden>全国一律 500 円です。</p>
</div>

JavaScript（動き）:

const questions = document.querySelectorAll(".faq-question");

questions.forEach((q) => {
  q.addEventListener("click", () => {
    const answer = q.nextElementSibling;
    const isHidden = answer.hasAttribute("hidden");
    if (isHidden) {
      answer.removeAttribute("hidden");
    } else {
      answer.setAttribute("hidden", "");
    }
  });
});

const questions = document.querySelectorAll(".faq-question");

questions.forEach((q) => {
  q.addEventListener("click", () => {
    const answer = q.nextElementSibling;
    const isHidden = answer.hasAttribute("hidden");
    if (isHidden) {
      answer.removeAttribute("hidden");
    } else {
      answer.setAttribute("hidden", "");
    }
  });
});