なぜHTMLを学ぶのか
ストーリー
入社して数ヶ月。少しずつ仕事にも慣れてきた頃。
先輩「そろそろ自分のプロフィールページを作ってみない？ 社内のチーム紹介ページに載せたいんだ」
えっ、Webページを作る？ そんなことできるの？
先輩「大丈夫、HTMLとCSSを覚えれば誰でも作れるよ。まずはHTMLから始めよう」
HTMLとは何か
一言で言うと
Webページの「骨組み」を作るための言語
HTMLは HyperText Markup Language の略です。
Webページの仕組み
ブラウザでWebサイトを見るとき、裏側では以下のことが起きています。
1. ブラウザがサーバーにリクエストを送る
2. サーバーがHTMLファイルを返す
3. ブラウザがHTMLを読み取って画面に表示する
つまり、あなたが普段見ているWebページは すべてHTMLで書かれています。
HTMLを学ぶ理由
すべてのWebページの基盤
| 項目 | 実態 |
|---|---|
| 利用率 | インターネット上のWebページの 100% がHTMLを使用 |
| 求人での重要性 | フロントエンド系求人の 100% でHTML/CSS経験が必須 |
| 学習の入口 | Web開発を学ぶ 最初の一歩 として世界中で推奨 |
業界の声
- Google: 「HTMLはWebの共通言語。すべてはここから始まる」
- MDN Web Docs: 「HTMLはWebコンテンツの意味と構造を定義する」
- Web開発者: 「HTMLを知らずにWeb開発はできない」
HTMLの役割を理解しよう
Webページは 3つの技術 で構成されています。
| 技術 | 役割 | 例え |
|---|---|---|
| HTML | 構造・内容 | 家の骨組み |
| CSS | 見た目・デザイン | 家の内装・外装 |
| JavaScript | 動き・機能 | 家の電気・水道 |
家を建てる順番
1. まず骨組みを作る → HTML
2. 次に見た目を整える → CSS
3. 最後に動きをつける → JavaScript
今月はHTMLとCSSを学びます。まずはHTMLの「骨組み」から始めましょう。
身近な例で見るHTML
いつも見ているWebサイト
あなたが日常的に使っているWebサイトは、すべてHTMLで作られています。
| サイト | HTMLの役割 |
|---|---|
| Google検索 | 検索ボックス、検索結果のリスト |
| Amazon | 商品名、価格、画像の配置 |
| YouTube | 動画タイトル、説明文、コメント欄 |
| Twitter/X | ツイート本文、ユーザー名、タイムライン |
先輩「試しに今見ているWebページで右クリックして『ページのソースを表示』を選んでみて」
うわっ、なんかコードがたくさん出てきた...！
先輩「これがHTMLだよ。最初は複雑に見えるけど、基本は簡単なんだ」
HTMLの歴史
| 年 | 出来事 |
|---|---|
| 1991年 | Tim Berners-Lee が HTML を発明 |
| 1995年 | HTML 2.0 が標準化 |
| 1999年 | HTML 4.01 が広く普及 |
| 2014年 | HTML5 が勧告（現在の標準） |
現在私たちが使うのは HTML5 です。ビデオ、 オーディオ、セマンティックタグなど、多くの機能が追加されています。
まとめ
| ポイント | 内容 |
|---|---|
| HTMLとは | Webページの構造を作るための言語 |
| なぜ必要か | すべてのWebページがHTMLで作られている |
| 3つの技術 | HTML（構造）+ CSS（見た目）+ JavaScript（動き） |
| 学ぶ順番 | HTML → CSS → JavaScript |
チェックリスト
- HTMLが何の略か理解した
- HTMLの役割（構造を作る）を説明できる
- HTML・CSS・JavaScriptの違いを理解した
- Webページのソースを表示してみた
次のステップへ
HTMLが「Webページの骨組み」であることが分かりました。次は、実際のHTMLファイルがどのような構造になっているかを見ていきましょう。
推定読了時間: 15分