HTML

📖 もうちょい詳しく

何が新しいの？

HTMLは、Webページの「骨組み」を書くための言語です。
見出し・段落・画像・リンクといった、ページの中身がどんな部品でできているかを表します。「HyperText Markup Language（リンクでつながる文書に、印をつけて書く言語）」の略で、Webが生まれた初期から使われてきた、いちばん基本になる存在です。

私たちが見るほとんどのWebページは、まずこのHTMLで中身が組み立てられています。ニュース記事も通販サイトも、土台はHTMLでできていることが多いです。

どうやって動いてるの？

HTMLは、文章を「タグ」というしるしで囲って意味を示します。
たとえば見出しなら <h1> 、段落なら <p> で囲み、「ここは見出し」「ここは本文」と印をつけていきます。このタグ付きの文章をブラウザが読み取り、人が見やすい形に並べて表示してくれます。

ブラウザは受け取ったHTMLを上から順に解釈し、画面の部品として組み立てます。書いた順番や囲み方が、そのまま表示の構造に反映されるしくみです。

何ができるの？

文章、画像、リンク、ボタン、入力欄など、ページに置きたい部品をひととおり表せます。
別のページへ飛ぶリンクや、名前を打ち込むフォームもHTMLで作れるので、Webページの「中身そのもの」を形にできます。

見た目を整える役は CSS、動きをつける役は JavaScript が担います。HTMLはあくまで中身と構造を受け持つ、土台の言語だと考えるとわかりやすいです。

🌱 身近なたとえ

家づくりで例えると、HTMLは「柱や壁、ドアといった骨組み」です。
どこが部屋で、どこが入口かを先に決めるのがHTMLの役目です。そのあと壁紙や塗装で見た目を整えるのがCSS、自動ドアのような動きをつけるのがJavaScript、と分かれています。
まず骨組みがしっかりしていないと、飾りも動きも乗せられません。HTMLはその一番下の土台にあたります。

✅ まず覚えるポイント

• HTMLは「HyperText Markup Language」の略
• Webページの中身と骨組みを書くための言語
• 文章を「タグ」で囲んで、見出しや段落などの意味を示す
• ブラウザがHTMLを読み取って画面に表示する
• 見た目はCSS、動きはJavaScriptと役割が分かれている

🧭 よくある勘違い

HTMLはプログラミング言語なの？

少し違う扱いをされることが多いです。HTMLは計算や条件分岐をする言語ではなく、文章に印をつけて構造を表す「マークアップ言語」だからです。
そのため「プログラミングとは別物」と説明されることもあります。ただ、Web制作の最初の一歩として欠かせない言語であることは変わりません。

HTMLだけでカッコいいサイトは作れないの？

作ること自体はできますが、見た目は素朴になりがちです。
色やレイアウトを細かく整えるのはCSS、ボタンを押すと動くような仕掛けはJavaScriptの担当だからです。実際のサイトは、この3つを組み合わせて作られていることがほとんどです。

🧩 関連して覚えると楽な言葉

• CSS: HTMLで作った骨組みに、色やレイアウトなど見た目をつける言語
• JavaScript: ページに動きや反応をつけ、HTMLの内容を書き換える言語
• DOM: ブラウザがHTMLを部品の集まりとして扱うための内部構造
• HTTP: ブラウザがHTMLなどのデータを受け取るときの通信ルール

🏁 ひとことでまとめ

HTMLは、Webページの中身と構造を書くための土台の言語です。
家の骨組みのように、まずこれで「どこに何があるか」を決め、その上に見た目や動きを重ねていきます。Webにふれるなら、最初に出会う基本の言葉です。