HTML5プロフェッショナル認定試験 Level.1 対策
このファイルは、Level.1に出やすい要素・属性・アクセシビリティ配慮・メディア・フォーム・テーブル等を 実装例 として盛り込んだ教材です。ソースを読み、削っては試すことで吸収してください。
※ダミーの画像・音声・動画URLを利用しています。公開時は自前のアセットへ差し替えてください。
<header>, <nav>, <main>, <section>, <article>, <aside>, <footer> を適材適所に。
単なる見た目のために <div> を多用し、意味のある要素が使われないケース。試験では意味論的選択が問われます。
引用：学び続ける者だけが変化に適応できる。
略語：SEO
日付：
強調：重要な語句／より強い強調
取り消し：¥50,000 → ¥40,000
双方向：abc ／ ユーザー名
データ：製品ID A-123
<figure> と <figcaption>）ネイティブで開閉UIを提供します。アクセシブルに情報量をコントロール可能。
<picture> と srcset）画面幅に応じて最適なソースを選択。試験頻出。
字幕用の<track>はアクセシビリティ評価でも重要。
Level.1はAPI暗記よりタグの意味が重視。最低限の描画例を添付。
| プラン | 価格 | 納期目安 | 備考 |
|---|---|---|---|
| ライト | ¥40,000 | 1週間 | 静的1ページ |
| スタンダード | ¥80,000 | 2週間 | 1〜3ページ |
| 運用 | ¥10,000/月 | — | 月次改善 |
| 税込表示／内容は例です | |||
行見出し（scope="row"）・列見出し（scope="col"）の指定は読み上げに有効。
進捗：
状態：
サンプルコード：<div class="card">...</div>
入力例：Ctrl + S で保存 / 出力例：Saved!
シンプルな構造は保守性を高める。
alt（装飾は空alt）。label と id を対応させる。lang 属性、見出し階層、リンク目的の明確化。