HTML
資料での説明
MDNは「HTMLはWebコンテンツの意味と構造を定義する」「ページの見た目（CSS）や機能・挙動（JavaScript）は、一般にHTML以外の技術が記述する」と説明しています。
正式名称
HyperText Markup Language
- HyperText … 他の文書へのリンクを含む文章。小説のような一方向の流れとは異なるもの
- Markup … 印をつけること
- Language … 言語（プログラミング言語ではない。後述）
RFC 1866 は HTML を「プラットフォームをまたいで持ち運べる hypertext 文書を作るための単純なデータ形式」と定義しています。
実物を見るのが早いです
<h1>今週のAIニュース</h1>
<p>Claudeが更新されました。</p>
<img src="claude.png" alt="Claudeの画面">
読み方は4つです。
1. タグは、要素の始まりと終わりを区切る印です。
仕様の表現は「タグは、マークアップの中で要素の始まりと終わりを区切るために使われる」。<h1> で始めて </h1> で閉じ、その間が1つの要素になります。「閉じタグを忘れている」とは、この終わりの印がない状態です。
2. 属性は、開始タグの中に書きます。
src="claude.png" の部分です。仕様の表現は「要素の属性は、その要素の開始タグの中に書かれる」。
3. 閉じタグを持たないタグもあります。
img がそれで、void element と呼ばれます。仕様は「void element は開始タグだけを持つ。void element に終了タグを書いてはならない」と定めています。
4. それぞれが何を表すか。
h1〜h6 はセクションの見出しを表し、名前に含まれる数字が見出しのレベルになります。p は段落を表します。img は画像を表し、alt は画像を処理できない人に同等の内容を提供します。
なお src については、仕様上 src と srcset の少なくとも一方が必要で、src 単独が必須というわけではありません。
印刷所に渡す原稿への赤ペンです。
原稿に「ここ見出し」「ここ本文」「ここに写真」と書き込んで渡すと、印刷所はその指示を見て組みます。HTMLはこの赤ペンの指示を記号で書いたもので、印刷所の役をするのがブラウザです。
だから覚える順番は、タグの一覧ではありません。「この部分は何なのかを書いている」とだけ分かっていれば、必要なタグはその都度調べれば済みます。
見た目のために選んではいけません
これは好みの問題ではなく、仕様上の要件です。
本来意図された意味以外の目的で、要素・属性・属性値を使ってはならない。そうするとソフトウェアがページを正しく処理できなくなる。
— WHATWG HTML Living Standard より和訳
MDNはより具体的に書いています。
文字の大きさを変えるために見出し要素を使ってはならない。CSSの font-size プロパティを使うこと
— MDN Web Docs より和訳
理由も明記されています。見出しの情報はブラウザが目次を自動的に組み立てるのに使われ、スクリーンリーダーの利用者は見出しから見出しへ移動してページの内容を把握します。レベルを飛ばすと、その移動の際に混乱を生みます。
HTML・CSS・JavaScriptの役割分担
| 担当 | 決めること | 例 | | --- | --- | --- | | HTML | 意味と構造 | 見出し／段落／画像／表／リンク | | CSS | 見た目 | 色、文字の大きさ、余白、並べ方 | | JavaScript | 機能・挙動 | 押したら開く、絞り込む、送信する |
そしてHTMLは、プログラミング言語ではありません。MDNは「HTMLと同様に、CSSはプログラミング言語ではない」と書いています。
なお、この「プログラミング言語ではない」という言い方を標準化団体（WHATWG・W3C・IETF）はしていません。MDNが、確認できた範囲での最も強い出典です。
よくある誤解
「CSSがないページは壊れている」
壊れていません。ブラウザは既定のスタイルシートを持っており、CSSがなくても読める形で表示されます。MDNはその意図を「スタイルの当たっていないページに基本的な可読性を提供すること」と説明しています。
ただし仕様は「ユーザーエージェントは、HTML文書を特定の方法で表示することを要求されていない」としており、既定の表示は義務ではありません。すべてのブラウザで同じ見た目になるとは限りません。
「表示されているから、書き方は正しい」
これは成り立ちません。MDNは「ブラウザはHTMLを寛容に解釈するため、HTML自体は構文エラーで止まらない。つまりソースに構文エラーがあってもページは表示される」と明記しています。表示できることと、正しく書けていることは別です。
「HTMLが書ければサイトが作れる」
中身は書けますが、見た目はCSS、挙動はJavaScript、公開するにはサーバーが必要です。
開発の会話では、こう出てきます
こう言うと伝わらない 「レイアウトが崩れています」
こう言えば一度で済む 「スマホで見ると、見出しの文字が画面の右にはみ出しています。パソコンでは正常です」
どの画面幅で／どの部分が／どうなっているかが分かれば、相手はHTMLとCSSのどちらを見ればいいか判断できます。
もう1つ、よく出る言い方があります。「HTMLファイルでください」。これは「ブラウザで開くだけで見られる1枚のファイルで欲しい」という意味です。