HTMLってなに？を今さら聞ける “その1” の話

ちょっと聞きにくい“今さら”の話、していい？

「HTMLって何？」って、聞きたいけど聞けないタイミングってあるよね。
Webの仕事してるけど、“ちゃんと説明できる自信ないな…”とか。
そんなあなたの“その1”を、ここでゆるっと始めてみませんか。

HTMLって一体なにもの？

HTMLは「ハイパー・テキスト・マークアップ・ランゲージ」の略。
……名前はめっちゃカッコいいけど、ざっくり言うと「Webページの骨組みをつくる言語」だよ。

Webって、見た目だけじゃなくて、「どこに何があるか」が大事で、
HTMLはその“構造”を決めるもの。デザインじゃなくて、意味づけの言語。

タグって何？あれって呪文なの？

<h1>とか<p>とか、< >で囲まれてるやつ。あれが「タグ」。
HTMLはこのタグたちでできていて、「これは見出し！」「これは段落だよ〜」って教えてくれる。

ちなみにタグは基本「開始タグ」と「終了タグ」のペア。
たとえば：

<p>これは段落だよ。</p>

って感じで、pはparagraph（段落）の頭文字なんだよね。かしこい。

デザインはどこにいったの？

HTMLは“意味を伝える言葉”、見た目を整えるのはCSSってやつの役割。
仲良し三兄弟のイメージ：

HTML → なにを表示するか（構造）

CSS → どう見せるか（見た目）

JavaScript → どう動かすか（動き）

この3つが揃って、はじめて「Webっぽいもの」になるんだよね。

どこから始めればいいの？

難しく考えすぎなくてOK！

まずは以下のタグを覚えてみよう：

<h1>〜<h6>：見出し

<p>：段落

<a href="">：リンク

<img src="">：画像

<ul><li>：リスト

このあたりで、ちょっとした“自己紹介ページ”くらいは作れるようになるよ✌️

HTMLをちょっと書いてみよう

まずは、“自己紹介ページ”を書いてみるのはどう？

難しいタグの説明は「p？div？h1？タグたちと友達になる “その2” の話」を読んでみてね！
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ぼくの紹介ページ</title>
</head>
<body>
  <h1>こんにちは！ぼくはnoichiです。</h1>
  <p>HTMLをちょっとずつ勉強中です。</p>
  <p>好きなタグは &lt;a&gt; と &lt;ul&gt; です。</p>
</body>
</html>
このコードをコピペして、テキストエディタに貼り付けて、拡張子を .html にしてブラウザで開くと、

あなたのはじめての「その1ページ」が生まれます✌️

その1の話は、ここから広がる！

HTMLは難しいようで、実は“超素直なやつ”。
書いたことが、そのまま意味になる。しかも見た目じゃなく、意味で伝える。これ、すごくない？

noichiでは、こういう「技術のその1」から、
もっと楽しく、ちょっとファニーに、一緒に学んでいけたらと思ってます。

まずは今日、“聞きにくかったこと”を聞けた自分に、拍手してあげてね。👏