HTMLスキャフォールド

HTML5 の雛形、1行ずつの意味

「HTML5 雛形」で出るのは、ページに最低限必要な行だけです。それぞれ省くと困ることがあります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ページタイトル</title>

• <!DOCTYPE html>: これがないと、ブラウザは古い書き方のページとみなして互換モードで表示します。余白や幅の計算が変わり、CSS が思いどおりに効かない原因になります。
• lang="ja": ページの言語です。読み上げソフトの発音や、漢字の字形の選び分け、翻訳の提案に使われます。
• <meta charset="UTF-8">: 文字コードの宣言です。HTML の仕様では、文書の先頭 1024 バイト以内に置く決まりになっています。<head> のいちばん上に書いておけば、まず間違いありません。
• viewport: スマートフォンで画面の幅に合わせて表示させるための行です。ないとパソコン向けの幅で縮小表示され、文字が豆粒のようになります。

script.js の読み込みを <body> の最後に置いているのは、HTML を読み終えてからスクリプトを動かすためです。<head> に置きたいときは defer を付けると同じ順序になります。

表（table）を正しく組む

表の見出しのセルは <td> ではなく <th> にし、scope で「列の見出し」か「行の見出し」かを示します。画面の見た目は同じでも、読み上げソフトが「見出し1: セル1-1」のように見出しと値を結びつけて読めるようになります。

<thead>
  <tr>
    <th scope="col">見出し1</th>
    <th scope="col">見出し2</th>
  </tr>
</thead>

<caption> は表の題名です。表の上に書く見出しの代わりに使うと、表と題名の関係がはっきりします。また、表はデータを並べるためのもので、ボタンや画像を並べる段組みには使いません。段組みは CSS の Grid や Flexbox の役目です。

ul・ol・dl の使い分け

• <ul>: 順番に意味のない並び。機能の一覧、メニューなど。
• <ol>: 順番に意味がある並び。手順、ランキングなど。番号は自動で振られるので、本文に「1.」と書く必要はありません。
• <dl>: 「名前と値」の組。<dt> に項目名、<dd> に内容を書きます。会社概要や商品の仕様、用語集のように「〇〇: △△」が並ぶところに向いています。

フォームで押さえておきたいこと

入力欄には必ず <label> を付け、for と入力欄の id をそろえます。ラベルの文字をクリックしても入力欄にカーソルが移るようになり、スマートフォンでも押しやすくなります。

<label for="field1">項目1</label>
<input type="text" id="field1" name="field1">

生成した雛形の type="text" は、入力する内容に合わせて変えると便利です。type="email" や type="tel" にすると、スマートフォンでそれぞれに合ったキーボードが出ます。

セレクトボックスの先頭の「選択してください」は value="" にしてあります。<select> に required を付けると、この空の選択肢のままでは送信できなくなり、選び忘れを防げます。