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="en">文書を開くと同時に、その言語を宣言します。スクリーンリーダーが声を選ぶ基準であり、ブラウザーが翻訳を勧める基準です。<head> … </head>headにはページ自身ではなく、ページについての情報が入ります。ここにあるものは画面に現れません。<meta charset="utf-8" />文字をUTF-8で書いたと伝えます。これがないと日本語が読めない文字に化けることがあります。<title> … </title>ブラウザーのタブやブックマークに出て、検索結果では見出しになる文章です。ロボットではなく人が読む文として書きます。<body> … </body>bodyがページ自身です。訪問者が実際に見るものは、すべてこの二つのタグの間に入ります。<h1> · <p>いちばん大きな見出しが一つと、段落が一つ。ここまでで既に完全で正しいページです。
好きなを開いて上の内容を貼り付け、デスクトップにindex.htmlとして保存し、ダブルクリックしてください。macOSのテキストエディットでは先に［フォーマット → 標準テキストにする］を選び、Windowsのメモ帳ではファイルの種類を「すべてのファイル」にして保存します。ももインストールも要りません — ブラウザーがファイルを直接読みます。一語だけ書き換えて保存し、再読み込みすれば変わったのが見えます。
実際に使うことになるタグ
HTMLにはタグが百をゆうに超えてありますが、下の八つのグループでほとんど何でも作れます。これだけをきちんと覚え、残りは必要になったら調べれば十分です。
| タグ | 使いどころ |
|---|---|
<h1> ~ <h6> | 見出しです。最も重要なものから順に六段階あります。一ページに最上位の見出しは一つだけ置き、段を飛ばさないでください — この並びは文字の大きさではなく、文書の目次です。 |
<p> | 文章の一段落です。上下の余白はブラウザーが付けるので、空行を入れる必要はありません。 |
<a href="..."> | リンクです。宛先はhrefに入れ、タグの間の文字が訪問者の押す部分になります。 |
<img src="..." alt="..."> | 画像です。srcはファイルの場所、altはそれを見られない人のための説明 — 検索エンジンもその一人です。 |
<ul> · <ol> · <li> | リストです。点付き、番号付き、そしてその中の項目。メニューも手順も結局リストなので、リストとして書きましょう。 |
<table> · <tr> · <td> | 表です。表全体、一行、一つのます。本物の表データにだけ使い、画面の配置合わせには使いません。 |
<form> · <input> · <button> | 入力フォームとその部品です。ページが訪問者から何かを受け取り、サーバーへ送るための通り道です。 |
<div> · <span> | 意味を持たない空の箱が二つ。divは一行を丸ごと占め、spanは文章の行の中に割り込みます。ふさわしい意味のあるタグが本当にないときだけ使います。 |
属性 — タグに添える情報
属性は開くタグの中に、名前と引用符で囲んだ値として書きます。タグの名前だけでは伝えられないことをブラウザーに教えます。
- hrefとsrcは宛先を運びます。リンクが開くページ、画像が読み込むファイルです。
- idは一つだけのに名前を付け、classは一群に名前を付けます。スタイルとスクリプトはこの名前で相手を探します。
- alt・title、そしてaria-で始まる属性は、見られない人のために要素を説明します。一行で済むのに、誰がこのページを使えるかが変わります。
初心者がよくやる間違い
- 閉じタグを忘れる。</p>や</a>がないと、ブラウザーが終わりの場所を推測し、その後ろのページ全体が一つの長いリンクになることもあります。
- 文字の大きさで見出しを選ぶ。h1~h6は目次の段階で、文字の大きさではありません。文字を小さくしたいときは、で変えます。
- imgのaltを省く。すると、スクリーンリーダーも検索エンジンも、その画像について何も分かりません。飾りだけの画像なら、alt=""と書きます。
- hrefやsrcのパスの間違い。同じフォルダーのファイルならname.htmlだけでよく、前にスラッシュ(/)を付けるとサイトのいちばん上からという意味になります。ファイルをダブルクリックして開いたときは、スラッシュがディスクのいちばん上を指して画像が表示されないので、スラッシュなしで書きます。画像が出ないときは、まずパスを確かめましょう。
HTMLは骨組みであって、体のすべてではありません
ページは役目の違う三つの言語でできています。この三つを混ぜないことが、あとから直せるサイトを作る秘訣です。
<!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ブロックを消してもページはそのまま動き、見た目が素っ気なくなるだけです。三つを分けておく理由がそれです。
では、HTMLファイルで何をするのか
同じ一枚が四通りに使われ、後ろへ行くほど多くの人に開かれます。Webサーバーが要るのは二つ目だけで、それが次のテーマです。
デスクトップのファイルは自分だけが見えるページです。ほかの人に開いてもらうには、誰かがポートに座ってを待ち、そのファイルを手渡す必要があります。その誰かがWebサーバーで、20行あれば自分で作れます。
自分で記録する欄です。ここで採点はしません。
この段階を理解したものとして記録しますか？
まだ取り消せないので、本当に理解できたときだけ記録してください。
理解したものとして記録しました
自分で記録する欄です。ここで採点はしません。