STEP 1
HTMLのきほん
HTMLはタグで文章に意味をつける言語です。<タグ>中身</タグ> が基本の形。開始タグと終了タグで中身をはさみます。
タグと要素
<p>こんにちは</p> のように、開始タグ〜終了タグとその中身をまとめて要素と呼びます。
入れ子(ネスト)
要素の中に要素を入れられます。外側が親、内側が子。正しく閉じる順番が大切。
意味で選ぶ
見た目でなく役割でタグを選びます。見出しは <h1>、段落は <p>。
属性
タグに追加情報を持たせる。リンクの href、画像の src・alt など。
よく使う基本タグ
| タグ | 意味 | 使いどころ |
|---|---|---|
| <h1>〜<h6> | 見出し(大→小) | ページやセクションの題 |
| <p> | 段落 | 本文のかたまり |
| <ul> / <li> | 箇条書きリスト | 順不同の項目 |
| <a> | リンク | 別ページへ移動(href) |
| <img> | 画像 | 写真・図(src・alt) |
| <strong> | 強調 | 重要な語を太く |
STEP 2
書いてみる(ライブエディタ)
左にHTMLを書くと、右にその場で表示されます。タグを挿入ボタンで手早く試せます。閉じタグを消すとどうなるかも実験してみましょう。
HTML を書く
表示(プレビュー)
STEP 3
タグクイズ
役割にあうタグを選びましょう。全8問です。
PLUS
きれいなHTMLのコツ
1. 見た目でなく意味で
「大きくしたいから見出し」はNG。大きさはCSSの仕事。タグは役割で選ぶ。
2. 見出しは順番に
h1の次はh2。飛ばさない。文書の目次(アウトライン)が整う。
3. 必ず閉じる
開いたタグは閉じる。入れ子は内側から順に閉じると崩れない。
4. 画像にはalt
altで画像の内容を説明。読み上げやSEO、表示できない時にも効く。
HTMLの合言葉:
① タグは「役割」で選ぶ
② 開いたら閉じる・入れ子を正しく
③ 見た目はCSSにまかせる
—— HTMLは「文章の設計図」。まず構造、飾りはあとから。