HTML
Webを形づくる文書そのもの。
HTML は、文書の各部分が見出し・段落・リンクのどれなのかをブラウザーに伝える方法です。本当に動く最小のページから、8つのタグのグループを身につけましょう。
HTMLは名札を付けた文書です
HTMLはHyperText Markup Languageの略です。ふつうの文書を前にして、各部分に名札を付ける — この行は見出し、この塊は段落、この語は別の場所への扉 — それがHTMLです。この名札をと呼び、の中に書きます。
ブラウザーは勝手に推測しません。見出しタグの中の文字を大きく太く描くのは、あなたがそれを見出しだと伝えたからです。HTMLを最初に学ぶ価値はここにあります — Webの中で「どう見えるか」ではなく「何であるか」を語る場所は、ここだけです。
- タグはたいてい対で来ます。開くタグと、斜線の付いた閉じるタグ。中身はその間に入ります。
- タグの中にタグを入れられます。ページは大きな箱が小さな箱を抱え、その中もまた同じという形です。
- 包む中身がないので一つで立つタグもいくつかあります。画像やがそうです。
- HTMLファイルはただのです。どんなエディターでも書けて、名前の末尾を.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>にはページ自身ではなく、ページについての情報が入ります。ここにあるものは画面に現れません。<meta charset="utf-8" />文字をで書いたと伝えます。これがないと日本語が読めない文字に化けることがあります。<title> … </title>ブラウザーのタブやブックマークに出て、検索結果では見出しになる文章です。ロボットではなく人が読む文として書きます。<body> … </body>bodyがページ自身です。訪問者が実際に見るものは、すべてこの二つのの間に入ります。<h1> · <p>いちばん大きな見出しが一つと、段落が一つ。ここまでで既に完全で正しいページです。
好きなを開いて上の内容を貼り付け、デスクトップにindex.htmlとして保存し、ダブルクリックしてください。のでは先に［フォーマット → 標準テキストにする］を選び、のではファイルの種類を「すべてのファイル」にして保存します。ももインストールも要りません — ブラウザーがファイルを直接読みます。一語だけ書き換えて保存し、再読み込みすれば変わったのが見えます。
実際に使うことになるタグ
HTMLにはが百をゆうに超えてありますが、下の八つのグループでほとんど何でも作れます。これだけをきちんと覚え、残りは必要になったら調べれば十分です。
| タグ | 使いどころ |
|---|---|
<h1> ~ <h6> | 見出しです。最も重要なものから順に六段階あります。一ページに最上位の見出しは一つだけ置き、段を飛ばさないでください — この並びは文字の大きさではなく、文書の目次です。 |
<p> | 文章の一段落です。上下の余白はブラウザーが付けるので、を入れる必要はありません。 |
<a href="..."> | リンクです。宛先はに入れ、タグの間の文字が訪問者の押す部分になります。 |
<img src="..." alt="..."> | 画像です。はファイルの場所、はそれを見られない人のための説明 — もその一人です。 |
<ul> · <ol> · <li> | リストです。点付き、番号付き、そしてその中の項目。メニューも手順も結局リストなので、リストとして書きましょう。 |
<table> · <tr> · <td> | 表です。表全体、一行、一つのます。本物の表にだけ使い、合わせには使いません。 |
<form> · <input> · <button> | とその部品です。ページが訪問者から何かを受け取り、へ送るための通り道です。 |
<div> · <span> | 意味を持たない空の箱が二つ。は一行を丸ごと占め、は文章の行の中に割り込みます。ふさわしい意味のあるタグが本当にないときだけ使います。 |
属性 — タグに添える情報
属性は開くタグの中に、名前と引用符で囲んだ値として書きます。タグの名前だけでは伝えられないことをブラウザーに教えます。
- hrefとsrcは宛先を運びます。リンクが開くページ、画像が読み込むファイルです。
- は一つだけのに名前を付け、は一群に名前を付けます。スタイルとスクリプトはこの名前で相手を探します。
- alt・title、そしてで始まる属性は、見られない人のために要素を説明します。一行で済むのに、誰がこのページを使えるかが変わります。
初心者がよくやる間違い
- 閉じタグを忘れる。</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行あれば自分で作れます。
自分で記録する欄です。ここで採点はしません。
この段階を理解したものとして記録しますか？
まだ取り消せないので、本当に理解できたときだけ記録してください。
理解したものとして記録しました
自分で記録する欄です。ここで採点はしません。