01 / 07
ページを組み立てる
INPUT · スライド
はじめてのHTML
02 / 07
タグで囲む
HTML は <タグ名> と </タグ名> で文章を囲んで書く。
<h1>〜</h1>… いちばん大きな見出し- 閉じるほうには
/がつく
このセットを要素と呼ぶよ。
<h1>わたしのページ</h1>03 / 07
段落は p タグ
ふつうの文章は <p>(paragraph = 段落)で囲むよ。
複数の要素を並べると、上から順番に表示される。
<h1>わたしのページ</h1><p>ようこそ!</p><p>プログラミングを勉強中です。</p>04 / 07
見出しには段階がある
見出しタグは <h1> から <h6> まで6段階。数字が大きいほど小さな見出しになる。
新聞の「大見出し・中見出し・小見出し」と同じ考え方だよ。
<h1>お店の名前</h1><h2>メニュー</h2><h3>おすすめ</h3>05 / 07
なぜ見た目より先に構造を書くの?
「見た目」を先に考えたくなるかもしれないけれど、HTMLの役目はそれぞれの文章が何であるかを伝えること。見た目は後から習う CSS が担当するよ。
<h1> と書いておけば「これは見出しだ」と、ブラウザにも、目の不自由な人が使う読み上げソフトにも、検索エンジンにも正しく伝わる。ただ文字を大きくするだけなら他の方法もあるけれど、それでは「見出しである」ことは伝わらないんだ。
06 / 07
閉じタグを忘れるとどうなる?
ブラウザは間違ったHTMLでもなるべく表示しようとする。</p> を書き忘れても、たいていは大きく崩れずに表示されてしまうよ。
でも、これに甘えるのはやめよう。閉じ忘れが積み重なると、あとから見たときにどこからどこまでが1つの要素なのか分からなくなる。開いたら必ず閉じるを習慣にしよう。
07 / 07
書いたらすぐ見られる
ここからは実際に書いてみよう。書いたHTMLはすぐ下のプレビューに表示されるよ。
「書く → 見る → 直す」のリズムで進めていこう。