HTML
Webを形づくる文書そのもの。
HTMLはプログラミングではありません。文書を書きながら、その各部分が何なのかをブラウザーに伝える方法です — ここは見出し、ここは段落、ここはリンク。タグを八つ覚えれば本物のページが書けますし、ブラウザーが見せる画面はどれも結局このようなファイル一枚です。
HTMLはHyperText Markup Languageの略です。ふつうの文書を前にして、各部分に名札を付ける — この行は見出し、この塊は段落、この語は別の場所への扉 — それがHTMLです。この名札をタグと呼び、山かっこの中に書きます。
ブラウザーは勝手に推測しません。見出しタグの中の文字を大きく太く描くのは、あなたがそれを見出しだと伝えたからです。HTMLを最初に学ぶ価値はここにあります — Webの中で「どう見えるか」ではなく「何であるか」を語る場所は、ここだけです。
タグはたいてい対で来ます。開くタグと、斜線の付いた閉じるタグ。中身はその間に入ります。 タグの中にタグを入れられます。ページは大きな箱が小さな箱を抱え、その中もまた同じという形です。 包む中身がないので一つで立つタグもいくつかあります。画像や改行がそうです。 HTMLファイルはただの文字ファイルです。どんなエディターでも書けて、名前の末尾を.htmlにするだけ — インストールするものは一つもありません。
名札が各部分の意味を語るからこそ、スクリーンリーダーが目の見えない訪問者に見出しを読み上げられ、検索エンジンがタイトルとメニューを区別でき、あなたのスタイルがすべての見出しを一度に捕まえられます。名札が雑でも自分の画面ではきれいに見えます — 静かに使えなくなるのは、ほかの人たちです。
これより短い正直な例はありません。index.htmlとして保存してダブルクリックすれば、ブラウザーが本物のWebページを見せます。あなたが訪れたどの大きなサイトも、ちょうどこの骨組みから始まりました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My first page</title>
</head>
<body>
<h1>Hello</h1>
<p>This is the first web page I made.</p>
</body>
</html>一行ずつ読む
<!DOCTYPE html>この文書が現代のHTMLだとブラウザーに伝えます。省くとブラウザーは古い互換モードに戻り、振る舞いが変わります。<html lang="ko">文書を開くと同時に、その言語を宣言します。スクリーンリーダーが声を選ぶ基準であり、ブラウザーが翻訳を勧める基準です。<head> … </head>headにはページ自身ではなく、ページについての情報が入ります。ここにあるものは画面に現れません。<meta charset="utf-8" />文字をUTF-8で書いたと伝えます。これがないと日本語が文字化けして並ぶことがあります。<title> … </title>ブラウザーのタブやブックマークに出て、検索結果では見出しになる文章です。ロボットではなく人が読む文として書きます。<body> … </body>bodyがページ自身です。訪問者が実際に見るものは、すべてこの二つのタグの間に入ります。<h1> · <p>いちばん大きな見出しが一つと、段落が一つ。ここまでで既に完全で正しいページです。
好きなテキストエディターを開いて上の内容を貼り付け、デスクトップにindex.htmlとして保存し、ダブルクリックしてください。サーバーもビルドもインストールも要りません — ブラウザーがファイルを直接読みます。一語だけ書き換えて保存し、再読み込みすれば変わったのが見えます。
HTMLにはタグが百以上ありますが、下の八つでほとんど何でも作れます。これだけをきちんと覚え、残りは必要になったら調べれば十分です。
| タグ | 使いどころ |
|---|---|
| <h1> ~ <h6> | 見出しです。最も重要なものから順に六段階あります。一ページに最上位の見出しは一つだけ置き、段を飛ばさないでください — この並びは文字の大きさではなく、文書の目次です。 |
| <p> | 文章の一段落です。上下の余白はブラウザーが付けるので、空行を入れる必要はありません。 |
| <a href="..."> | リンクです。宛先はhref属性に入れ、タグの間の文字が訪問者の押す部分になります。 |
| <img src="..." alt="..."> | 画像です。srcはファイルの場所、altはそれを見られない人のための説明 — 検索エンジンもその一人です。 |
| <ul> · <ol> · <li> | リストです。点付き、番号付き、そしてその中の項目。メニューも手順も結局リストなので、リストとして書きましょう。 |
| <table> · <tr> · <td> | 表です。表全体、一行、一つのます。本物の表データにだけ使い、画面の配置合わせには使いません。 |
| <form> · <input> · <button> | 入力フォームとその部品です。ページが訪問者から何かを受け取り、サーバーへ送るための通り道です。 |
| <div> · <span> | 意味を持たない空の箱が二つ。一つは一行を丸ごと占め、もう一つは行の中に割り込みます。ふさわしい意味のあるタグが本当にないときだけ使います。 |
属性 — タグに添える情報
属性は開くタグの中に、名前と引用符で囲んだ値として書きます。タグの名前だけでは伝えられないことをブラウザーに教えます。
hrefとsrcは宛先を運びます。リンクが開くページ、画像が読み込むファイルです。 idは一つだけの要素に名前を付け、classは一群に名前を付けます。スタイルとスクリプトはこの名前で相手を探します。 alt・title、そしてaria-で始まる属性は、見られない人のために要素を説明します。一行で済むのに、誰がこのページを使えるかが変わります。
ページは役目の違う三つの言語でできています。この三つを混ぜないことが、あとから直せるサイトを作る秘訣です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Button example</title>
<style>
body { font-family: sans-serif; padding: 2rem; }
button { padding: 0.6rem 1.2rem; border-radius: 999px; }
</style>
</head>
<body>
<h1 id="title">Clicked 0 times</h1>
<button onclick="count()">Click me</button>
<script>
let n = 0;
function count() {
n = n + 1;
document.getElementById('title').textContent = 'Clicked ' + n + ' times';
}
</script>
</body>
</html>このファイル一枚に三つとも入っています。保存して開き、ボタンを押してみてください — 見出しの数字が増えます。styleブロックを消してもページはそのまま動き、見た目が素っ気なくなるだけです。三つを分けておく理由がそれです。
同じ一枚が四通りに使われ、後ろへ行くほど多くの人に開かれます。Webサーバーが要るのは二つ目だけで、それが次のテーマです。
デスクトップのファイルは自分だけが見えるページです。ほかの人に開いてもらうには、誰かがポートに座ってリクエストを待ち、そのファイルを手渡す必要があります。その誰かがWebサーバーで、20行あれば自分で作れます。
自分で記録する欄です。ここで採点はしません。