HTMLドキュメントは、タグによってマークされた要素で構成されています。タグは尖った括弧で示されます。ほぼすべてのHTML要素は開始タグと終了タグで示されています。その間にあるものを有効範囲と呼びます。
例：
<h1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1>
この構文により、一次見出しがドキュメントに書き込まれます。開始 <h1> タグは、ブラウザに対してこれが見出しであることを示します。終了 </h1> は見出しを終了します。終了タグは、スラッシュ </ に続く尖った括弧で示されます。
要素を開いたら、それを閉じる必要があります。したがって、<h1> を設定すると、見出し定義の終了後に </h1> を記述する必要があります。HTML5には例外もありますが、これについては後で詳しく説明します。
HTMLには、独立したタグと呼ばれるものもあります。これらは開始タグと終了タグではなく、1つのタグだけで構成されます。その1つの例は <br /> です。
Das ist eine Zeile.<br /> Das ist eine andere Zeile.
この <br /> は改行を定義します。
このような空のタグは、通常、スラッシュで閉じられますが、HTML5では必須ではありません。次のようなこともできます：
<br>
このシリーズを通じて、これらの独立したタグの他にも入れ子になったタグについて学ぶことになります。
要素の入れ子
HTML要素は入れ子にすることも可能です。例えば、見出し内でテキストをイタリック体にする場合を考えてみてください。イタリック体は i 要素を使用します。
<h1>PSD-Tutorials.de – <i>dein Grafik-, Web- & Lernportal</i></h1>
入れ子にする際は、正しい順序に注意してください。最初に開いた要素を最後に閉じます。この場合、それは h1 要素です。
属性の使用
開始タグや独立したタグの内部で、属性を定義することができます。これらの属性は要素に追加のプロパティを割り当てることができます。以前のHTML時代では、要素に比較的多くの属性が割り当てられていました。これは、構造とデザインの混合によるものです。たとえば、色の定義がHTML要素に直接属性として渡されていました。 CSSのおかげで、現在はデザインと構造を厳密に分離することが可能になり、それが遵守されるべきです。したがって、使用される属性は比較的少数にとどまっています。
重要な属性の1つは id です。この属性を使用して、HTML要素に一意の名前を割り当て、CSSやJavaScriptなどで要素を操作できます。
<h1 id="head">PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1>
属性を割り当てるには、h1 の後にスペースを挿入します。その後に属性名が続き、通常は小文字で表されます。属性名の後に等号が続き、引用符で囲まれた属性値が続きます。
要素に複数の属性を割り当てることもできます。例えば、要素にクラスとIDを定義することが一般的です。 IDを使用することで見出しを一意に識別し、クラスは見出しを特定のカテゴリに分類するために使用されます。 たとえば、クラスが blue に割り当てられた要素は、青色で表示されます。（CSSと色に関する詳細は後で説明します）。
<h1 id="head" class="blue">PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1>
属性はこの場合、スペースで区切られます。
コードを検証する
いくつかの基本的な構文ルールを既に学んでいます。HTMLを学ぶ際には、これらのルールに従うことが重要です。なぜなら、一度間違った習慣を身につけてしまうと、その癖をなかなか取り除けないからです。そのため、HTMLコードを常に正しくチェックまたは検証することが重要です。これを自分で行う必要はありません。このためのオンラインツールがあります。たとえば、http://validator.w3.org/で検証ツールを見つけることができます。
Validatorをテストするために、以下のテキストをテキストフィールドに追加し、次にValidateボタンをクリックしてください。
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1> </body> </html>
結果は次のようになります:
ここはすべて問題ありません。（この場合は2つの警告には注意を払う必要はありません）。したがって、This document was successfully checked as HTML5!というメッセージが表示されれば、すべてが正常です。しかし、エラーが発生した場合はどうなるのでしょうか？その場合は、わざと構文に誤りを挿入してみてください。
<h1 id=head">PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1>
ここではheadで開始クォートがかけています。この構文を再度検証すると、エラーが検出されます。
その後、Validatorは適切なメッセージを表示します。具体的に何がうまくいかなかったかは、下部のウィンドウ領域で確認できます。
ここで、どのようにしてエラーを解決できるかが説明されています。
Line 8, Column 12: " in an unquoted attribute value. Probable causes: Attributes running together or a URL query string in an unquoted attribute value.
<h1 id=head" >PSD-Tutorials.de</h1>
したがって、間違った入力が行われた行が直接表示され、その修正が可能です。つまり、ValidatorはきれいなHTMLコードを作成するのに役立ちます。常にコードを検証してください。なぜなら、ブラウザはしばしばHTMLコードを正しく表示しますが、構文に誤りがある場合があります。ただし、テストしていないブラウザでは、ページの表示がまったく異なる場合があります。
