Labs

HTMLの役割、最小コード、よく使うパターン、HTML/CSS/JavaScriptの使い分け、実務のコツをまとめます。

HTMLの基本構造を押さえると、「ブラウザが正しく解釈するページの土台」を毎回迷わず作れます。

`meta charset`で文字化けを防ぎ、`meta viewport`でスマホでも読みやすい表示倍率にできます。

見出し（h1〜h6）を正しく使うと、ページの「目次」が整い、読みやすさ・SEO・アクセシビリティが良くなります。

pで段落、brで文中の改行、hrで話題の区切りを作ると、読みやすい文章構造を迷わず書けます。

aタグでページ遷移・外部サイト・ファイルなどへの「行き先」を作れます（＝Webの回遊の核）。

hrefを使い分けると「どこへ飛ぶか（ページ/位置/メール/電話/ダウンロード）」を正確に指定できます。

target="_blank"で別タブ表示にでき、同時にrelを正しく付けると安全性とSEOの意図（nofollow等）をコントロールできます。

imgタグで画像を表示でき、srcで場所、altで代替テキストを指定して「伝わる画像」にできます。

srcで「画像の場所」を正しく指し、altで「画像の意味」を言葉で渡すと、表示・SEO・アクセシビリティが揃います。

ul（順不同）とol（順序あり）でリストの骨組みを作り、項目は必ずliで書けるようになります。

navの中にul > li > aでメニューを組むと、「ここがナビだ」と機械にも人にも伝わるメニューが作れます。

divでブロックのまとまり、spanで文章の一部（インライン）を包む。意味を持たない要素だからこそ使い分けが大事。

classはCSS/JSの“目印”。複数要素へ再利用でき、命名を役割寄りにすると壊れにくく保守しやすい。

idはページ内で原則ユニーク。#でのジャンプやlabelとinputの紐付けなど、1点ものに効く属性。

divより意味のある要素で組むと、構造が伝わりやすくなり保守・SEO・アクセシビリティが強くなる。

ページ移動はa、その場の操作はbutton。意味で使い分けると意図どおりに動いてアクセシビリティも崩れない。

aの中に画像や見出し・説明文を入れてカード全体をリンク化。押しやすいUIを、入れ子リンクNGなどのルール込みで身につける。

行×列のデータはtableで正しく表現。thead/tbody、th/td、caption、scope、スマホ横スクロールまで一気に押さえる。

formは入力をまとめて送る箱。action/method/name、button type、GET/POSTの使い分けまで最短で理解する。

labelで入力に名前を付けて紐付ける。for/id、包む方式、checkbox/radio、required、aria-describedbyまで。

inputのtypeを正しく選ぶと、入力補助（キーボード）と簡易バリデーションが効いてフォーム品質が上がる。required / name / autocomplete もセットで習得。

複数選べるcheckbox、1つだけ選ぶradio。name/value/labelの関係を理解して“自然に送れる”選択UIを作る。

長文・複数行入力はtextarea。終了タグ／初期値の書き方／name・rows・labelを押さえて“自然に送れる”フォームにする。

候補が決まっている選択はselect。nameとvalueの関係／未選択防止の定番パターン／optgroupやdisabledも押さえて誤送信を減らす。

フォームが“ちゃんと送れる”かはname（送信キー）とvalue（送る値）とrequired（必須）で決まる。placeholderは例で、ラベルの代わりにはならない。

data-*でHTMLに“JSが読むための値”を持たせる。datasetで読める（ハイフンはキャメル化）／型は基本文字列／機密を入れない／ariaと役割分担。

scriptはJSの読み込みタグ。基本はhead + deferでDOM未読み込み事故を減らす。asyncは順番が崩れやすく用途限定。type=moduleはimport/exportが使えて実行タイミングもdefer寄り。

<link rel="stylesheet" href="...">でCSSを読み込む。headに置く／詰まりやすいのはhrefのパス／404はNetworkで確認。外部CSSでHTMLと見た目を分離して管理する。

崩れの原因はだいたい「閉じ忘れ／入れ子NG／意味の取り違え／id重複／フォームのname不足」。典型NGを潰すだけでクリック・送信・レイアウトが一気に安定する。