データの形を言語で表す

1HTMLの構造とCSSの見た目を分ける

マークアップ言語は、本文へタグなどの印を付けて構造や意味を表す言語です。HTML（HyperText Markup Language）はWeb文書の見出しや段落、リンクを表します。<h1>お知らせ</h1>は見出し、<p>本日は営業</p>は段落です。

文字を大きく見せるだけでは、見出しという意味を記述したことにはなりません。

CSS（Cascading Style Sheets）は文字色、文字の大きさ、余白などの見た目を指定する仕組みです。例えば見出しと本文の構造はHTML、見出しを青くする指定はCSS、入力した数量から金額を計算して表示を変える処理はJavaScriptという役割分担ができます。

JavaScriptは前の教材で学んだプログラム言語です。

タグの名前や入れ子はそれぞれの規則に合わせます。SGML（文書の構造を定義するための汎用マークアップの枠組み）は文書構造を定義する汎用的な枠組みで、HTMLやXML（用途に合う要素名を定め、タグでデータの構造を表す言語）の歴史的な基盤に関係します。現在のHTMLを、全てXMLと同じ書き方の規則で判断するわけではありません。

2XMLは独自のタグでデータを表す

XML（Extensible Markup Language：拡張可能なマークアップ言語）はデータの意味に合う要素名を定義して構造を表せます。例：<item><name>パン</name><price>100</price></item>。

開始タグと終了タグは大文字・小文字まで同じ名前で対応させ、要素の入れ子を交差させません。ルート要素は一つです。属性値は引用符で囲みます。HTMLはWeb文書向けの要素の意味を持ち、XMLは用途別の構造を作るための規則に重点があります。

3JSONは名前と値、配列でデータを表す

JSON（JavaScript Object Notation）はプログラム間でデータを交換するための表記形式です。名前と値の組をまとめるオブジェクトは波括弧{ }、値を順番に並べる配列は角括弧[ ]で囲みます。

例えば{"name":"紅茶","price":350}では、nameの値は文字列の紅茶、priceの値は数値350です。名前は二重引用符の文字列、名前と値の間はコロン、項目同士はコンマで区切ります。

値には文字列・数値・真偽値（true/false）・null・配列・オブジェクトを使えます。350と"350"では、前者が数値、後者が文字列です。trueと"true"も真偽値と文字列の違いがあります。見た目が似ていても型を読み分けます。

例えば[{"name":"紅茶","price":350},{"name":"ココア","price":400}]は、二つの商品を順番に並べた配列です。2番目の要素はココアの商品情報で、そのpriceは数値400です。

名前と値の項目順ではなく、配列の要素の順序を読みます。

JSONはタグを使うマークアップ言語ではなく、計算手順やメソッドを記述する形式でもありません。JavaScript由来の名前ですが、異なるプログラム言語間の交換にも使えます。

4CSVは表の項目をコンマで区切る

CSV（Comma-Separated Values）は、表の各レコードの項目をコンマで区切って記録する形式です。name,priceという見出しに対応して、パン,100と書けば、品名がパン、価格が100という二つの項目になります。

列の並びと見出しの対応をそろえます。

通常は1レコードを1行へ書きます。値そのものにコンマや改行が入る場合は、その値を二重引用符で囲みます。例えば品名が「紅茶,缶」、価格が350なら、"紅茶,缶",350です。引用符内のコンマは品名の一部です。値に二重引用符を含める場合は、囲んだ値の中で二重引用符を二つ続けて表します。

RSS（Webサイトの更新情報を配信する形式）はWebサイトの更新情報を配信する形式で、表をコンマで区切る形式の名前ではありません。同じ商品情報でも、CSVは項目の並び、XMLはタグの入れ子、JSONは名前と値や配列という構造を読んで判断します。