HTML講座 / 要素・タグ・属性とHTMLの基本文法
HTMLでは、要素をタグで表し、属性で追加の情報や設定を与えます。多くの要素は開始タグと終了タグで内容を囲み、入れ子にした要素は内側から閉じます。ただし、画像や改行などの空要素には終了タグを書きません。
要素とタグの基本形
開始タグは要素の始まり、終了タグは終わりを表し、その間に文章や別の要素を置きます。次の最初の例は説明用の一般形で、実際にはpなど用途に合う要素名を使います。
<tagname>Content</tagname>
<p>HTML syntax</p>
HTML構文のタグ名はASCIIの大文字・小文字を区別しませんが、実際の記述では小文字にそろえると読みやすくなります。タグの文字列と、それらを含めた要素全体を区別して考えます。
空要素には終了タグを付けない
br、img、input、metaは内容を持たない空要素です。</img>や</br>のような終了タグを作ってはいけません。
<br> <img src="image.webp" alt="Sunrise over a blue ocean"> <input type="text" name="username"> <meta charset="utf-8">
<br />の末尾のスラッシュはHTMLの空要素では許容されますが、HTML上の自己終了を実現する記号ではなく、必須でもありません。XMLの規則と混同しないようにします。
属性と属性値を書く
属性は開始タグの中に書きます。通常は属性名と値を=で結び、値を引用符で囲みます。空白を含む値を安全に書けるよう、二重引用符に統一すると管理しやすくなります。
<tagname attribute="value">Content</tagname>
<blockquote id="quote-01"> Quoted text </blockquote>
次は正しい例と、引用符を省いて意図しない解釈になる例です。後者では空白がstyleの値を区切るため、赤い文字の指定になりません。
<p style="color: red;">Red text</p>
<p style=color: red;>Red text</p>
disabledなどの真偽属性は、属性名だけでも指定できます。実用例ではlabel・id・nameの役割を比較すると、属性の用途を理解しやすくなります。
<input type="text" disabled>
入れ子は内側から閉じる
正しい例ではstrongが完全にpの中に収まっています。次の二つ目は終了順序が逆になった誤りの例です。
<p>This sentence contains <strong>important text</strong>.</p>
<p>This sentence contains <strong>important text</p></strong>
ブラウザーは誤った構文を補修して表示することがあります。しかし、生成されるDOM（Document Object Model、文書の構造を表すオブジェクト）は意図した構造と異なる可能性があります。画面が表示されたことだけで正しさを判断せず、タグの対応を確認します。
コメントの書き方と注意点
コメントは<!--で始まり、-->で終わります。ページの本文には表示されません。次は1行の例と複数行の例、その後は入れ子にしてはいけない例です。
<!-- This comment is not displayed on the page. -->
<!-- This is a multiline HTML comment. -->
<!-- <!-- Do not nest comments. --> -->
コメントを入れ子にすると、想定と違う位置で終わることがあります。また、コメントはページのソースを見れば読めます。パスワード、APIキー、個人情報などの秘密をコメントに残してはいけません。
完全な文書で確認する
次のコードをindex.htmlとしてUTF-8で保存し、ブラウザーで開きます。doctype、文書のルート、メタデータ、本文の区別を確認してください。英語の例文なのでlang="en"を指定しています。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document title</title>
</head>
<body>
<h1>Page heading</h1>
<p>Page content goes here.</p>
</body>
</html>
本文の見出しと段落が表示されれば、ファイルを読み込めています。表示だけで構文全体が正しいと判断せず、HTML文書のエラー検査でも確認します。日本語に置き換える場合は本文だけでなくlangもjaにしてください。
文法を検査する
Nu HTML Checkerで文書全体を検査すると、入れ子や属性などの誤りを確認できます。エラーが多いときは、最初の指摘とその前の行から調べます。引用符の閉じ忘れが後続のタグに影響する場合もあります。
タグ、属性、コメントの厳密な規則はHTML標準の構文を参照してください。検査に通ることと、リンク先や文章の意味が適切であることは別の確認です。
真偽属性と文字参照
真偽属性は存在すれば真になります。checked="false"でも属性が存在するのでチェックされた状態です。未選択にしたければ属性を取り除きます。次の例では最初のチェックボックスだけが初期選択されています。
<label><input type="checkbox" name="news" value="yes" checked> News</label> <label><input type="checkbox" name="updates" value="yes"> Updates</label>
タグそのものを文章として表示するには、山括弧を<と>で表します。必要な箇所では&でアンパサンドを表します。
<p><p> is a paragraph element. A & B are two names.</p>
この例は段落の中に別の段落を作るのではなく、<p>という文字列を表示します。真偽属性の標準規則も確認できます。
保存前に確認する項目
完全な文書の先頭にdoctypeがあるか、属性値の引用符が対応しているか、空要素に終了タグを付けていないかを確認します。入れ子は内側から閉じ、文書の言語を指定し、コメントにも秘密情報を入れません。最後にファイルを保存して検査し、ブラウザーの見た目と検査結果の両方で確認してください。
ホーム・紹介・問い合わせ練習の三ページを作り、共通メニューと現在位置を設定します。フォームは送信値の確認用とし、相対リンク、入力制約、キーボード、文法を点検します。
見出し、リンク、画像、フォームを意味のあるHTMLで作る方法を学びます。スキップリンク、キーボード、フォーカス、ズームを確認する小さなページと、検査の限界も紹介します。
HTML講座 / メール・数値・日付・選択肢に合うinputの型
email、number、date、checkbox、radioの使い分けを学びます。見える入力UIと送信値、初期値と現在値の違いを、フォームデータの確認とともに説明します。
HTML講座 / required・文字数・範囲で入力値を検証する
必須入力、文字数、数値の範囲と刻み、メール形式の制約を学びます。境界値を試し、ブラウザーの案内とサーバー側の検証を分けて考える方法も説明します。
HTML講座 / fieldset・legend・autocompleteでフォームを説明する
関連する入力をfieldsetでまとめ、legendで質問を示す方法を学びます。ラジオグループを独立させるnameと、自動入力の目的を示すautocompleteの違いも解説します。
imgのsrc、alt、width、heightの役割を学びます。画像の配置場所と相対パス、装飾画像の代替テキスト、表示幅とファイル容量の違いも説明します。
h1〜h6で見出しの階層を表し、pで段落、brで段落内の改行を作る方法を学びます。文字サイズと文書構造を区別し、見出しの飛び級を修正する練習も行います。
aとhrefによるリンク、絶対URLと相対URL、ページ内の移動を学びます。新しいタブ、メール、ダウンロードの条件と、三つのファイルでパスを確認する実習も紹介します。
labelのforとinputのidを対応させる方法を学びます。idと送信時のnameの違い、重複IDの問題、placeholderがラベルの代わりにならない理由も説明します。
doctype、html、head、bodyの役割と、文字コード・文書タイトル・viewportの設定を解説します。ファイルの保存から表示確認、表示されない場合の調べ方まで学べます。