はじめに
MDN Web Docs の HTML: ハイパーテキストマークアップ言語 のページを読みます。
読み進め方としては、MDN を安易に読み飛ばさずに順に読み進めて、理解をしていないところがあれば立ち止まって確認します。
理解していない点は、ChatGPT に質問しつつ、できるだけ根拠のドキュメントも併せて確認します。
Web 開発の会社に入社してすでに 4 年経過した私が基礎勉強している様子を見て焦らず進んでほしい、という形での応援で、イベント参加、タグづけしています 
MDN とは
MDN（Mozilla Developer Network）は、Mozillaのプロジェクトで、Web 技術に関するドキュメントを公開している定番の情報源です。
普段は必要な箇所だけ検索して読むことが多いのですが、今回は入口となる HTML のページから、腰を据えて読んでみることにしました。
なぜいまさら読むのか
私には、ここ 2 年ほどフロントエンドを実務で触る中で、React を何となくの理解で実装してきた感覚があります。
生成 AI を使えばそれなりに形にはなるのですが、土台が曖昧なままだと、少し込み入った話になったときに理解が続かないことがありました。
その課題を解消したくて、React の公式ドキュメントを読んでいます。
ただ、React を理解しようとすると、その前提にある Web 技術の基礎が曖昧だと感じる場面がありました。
では JavaScript から学び直せばよいかというと、JavaScript を学ぶにも HTML の知識が土台にあります。
この際、HTML そのものを学び直して、HTML と JavaScript の役割の違いも含めて整理したい。
それが、いま HTML を読み直している理由です。
生成 AI がコードを書く時代に、基礎を学ぶ意味はあるのか、という問いもあると思います。
それでも私は、いまこそ基礎を理解しておくことに意味があると感じています。
読みながら確認したこと
ここからは、MDN の HTML ページを読みながら、自分の中で確認したことをまとめます。
HTML は何の略か
HTML は HyperText Markup Language の略です。
日本語では ハイパーテキストマークアップ言語 とされます。
それぞれの単語に意味があるので、正式名称を覚えておくことは大事だと思います。
HyperText（ハイパーテキスト）とは何か
HyperText は、文書同士をリンクで結びつけ、相互に参照できる仕組みのことだと理解しました。
Web ページには当たり前のようにリンクがありますが、その「別の文書へ移動できる」という性質自体が、Web を成り立たせる重要な特徴です。
HTML は、そのようなハイパーテキストを表現するための仕組みを持っている、ということになります。
Markup（マークアップ）とは何か
読んでいて、理解が曖昧だったのは マークアップ という言葉でした。
MDN では、HTML はテキスト、画像、その他のコンテンツを記述するためにマークアップを使う、と説明されています。
ただ、最初に読んだときは、「マークアップする」とは具体的に何をすることなのかが、すぐにはつかめませんでした。
整理すると、この文脈でのマークアップとは、 HTML の要素を使って、コンテンツに構造と意味を与えること です。
たとえば、次のような HTML を考えます。
<header>
<h1>サイト名</h1>
</header>
<article>
<h2>記事タイトル</h2>
<p>これは記事の本文です。</p>
</article>
<footer>
<p>著作権情報</p>
</footer>
このとき、<header>、<article>、<footer> のような要素を書くことで、文書の構造がわかります。
また、<h1> や <h2> は見出し、<p> は段落、というように、それぞれの内容がどのような意味を持つかも伝えられます。
つまり HTML は、ただ文字を並べるためのものではなく、その内容が何であるかを示すためのものだと理解しました。
この「HTML は、要素を使ってコンテンツに構造と意味を与えるもの」という理解は、今回いちばん大事なポイントとして覚えておきたいです。
「要素」と「タグ」は同じではない
HTML を読み直していて、普段なんとなく「タグ」と呼んでいたものを、あらためて整理できたのもよかった点でした。
<p> や </p> のような記法は「タグ」です。
一方で、「要素」はそれらのタグと内容を含めたまとまりを指します。
普段の会話ではあまり厳密に使い分けないこともありますが、HTML を理解するうえでは、この違いは意識しておいたほうがよさそうです。
HTML は「言語」だが、プログラミング言語ではない
HTML には Language という言葉が入っていますが、プログラミング言語ではありません。
HTML は処理の手順を書くものではなく、文書の構造や意味を記述するための「マークアップ言語」です。
この点も、知識としては知ってはいましたが、Markup の意味を整理したことで、以前より明確に理解できました。
HTML のタグは通常小文字で書く
HTML のタグは、通常は <div> のように小文字で書きますが、<Div> や <DIV> と書いても区別されず問題ないそうです。ただ、小文字で書くのが慣習、推奨なので、知識として知っておいて、実務では常に小文字で統一する、で問題なさそうです。
React では JSX のルールがある
ここで、HTML を読んでいてひとつ気になったことがありました。
React では、HTML タグのようなものは小文字で書き、コンポーネントは大文字で始める、というルールがあります。
React を使っていると当たり前のように書き分けていますが、これは HTML そのもののルールというより、JSX の解釈ルールによるものです。
たとえば、JSX では小文字で始まる名前は組み込みの HTML 要素として扱われ、大文字で始まる名前は React コンポーネントとして扱われます。
そのため、React を書いているときに「HTML タグは小文字」「コンポーネントは大文字」と区別しているのは、HTML の話というより JSX の話だと整理できました。
こうして見ると、普段 React を書いていて当たり前に使っていたルールも、土台の HTML と切り分けて理解したほうがよいのだと感じます。
ちなみに Markdown もマークアップ言語
HTML がマークアップ言語だとすると、普段よく使う Markdown は何なのかも気になりました。
Markdown は一般に 軽量マークアップ言語 と呼ばれます。
HTML ほど細かく構造を記述するわけではありませんが、見出しやリストなどを簡潔に表現して、文書に意味を与えるための記法だと考えると、HTML と地続きで理解しやすい気がしました。
おわりに
MDN Web Docs の HTML: ハイパーテキストマークアップ言語 のページを読み進めてみて、HTML について「知っているつもりだったこと」を少しずつ言葉にし直せたのがよかったです。
今回大きかった学びは、HTML を単なる記法としてではなく、要素を使ってコンテンツに構造と意味を与えるもの として整理できたことでした。
React や JavaScript を学ぶ前提としても、HTML を理解し直すことには意味があると感じています。
引き続き、MDN を読みながら、曖昧な理解を少しずつ減らしていきたいと思います。
ありがとうございました。