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があるか、属性値の引用符が対応しているか、空要素に終了タグを付けていないかを確認します。入れ子は内側から閉じ、文書の言語を指定し、コメントにも秘密情報を入れません。最後にファイルを保存して検査し、ブラウザーの見た目と検査結果の両方で確認してください。
aとhrefによるリンク、絶対URLと相対URL、ページ内の移動を学びます。新しいタブ、メール、ダウンロードの条件と、三つのファイルでパスを確認する実習も紹介します。
HTML講座 / placeholderと入力中も残る案内文を付ける
label、placeholder、valueの違いを学びます。inputとtextareaの例、aria-describedbyによる説明の関連付け、フォームデータで送られる値の確認方法も紹介します。
順序付きリスト、箇条書き、用語と説明のリストを使い分けます。番号の開始位置や逆順表示、リスト項目の中にサブリストを置く正しい構造も学びます。
HTML講座 / fieldset・legend・autocompleteでフォームを説明する
関連する入力をfieldsetでまとめ、legendで質問を示す方法を学びます。ラジオグループを独立させるnameと、自動入力の目的を示すautocompleteの違いも解説します。
divとspanの内容モデルと使い分けを学びます。CSSのdisplayを変えてもHTMLの親子関係の規則は変わらないことや、意味のある要素を優先する基準も説明します。
labelのforとinputのidを対応させる方法を学びます。idと送信時のnameの違い、重複IDの問題、placeholderがラベルの代わりにならない理由も説明します。
imgのsrc、alt、width、heightの役割を学びます。画像の配置場所と相対パス、装飾画像の代替テキスト、表示幅とファイル容量の違いも説明します。
HTML講座 / textarea・select・option・buttonを使う
複数行入力、選択メニュー、送信・リセット・通常ボタンを使い分けます。表示ラベルと送信値、初期値と現在値を実際のフォームで比較する方法も紹介します。
ホーム・紹介・問い合わせ練習の三ページを作り、共通メニューと現在位置を設定します。フォームは送信値の確認用とし、相対リンク、入力制約、キーボード、文法を点検します。
HTML講座 / detailsとsummaryで開閉できる説明を作る
JavaScriptなしで開閉する補足説明を作ります。open属性の真偽、分かりやすいsummaryの書き方、Tab・Enter・Spaceによる操作の確認方法も紹介します。