HTMLでは、6つの異なる見出しレベルが区別されます。これらはh1からh6の要素によって定義されます。
<h1>見出しレベル 1</h1> <h2>見出しレベル 2</h2> <h3>見出しレベル 3</h3> <h4>見出しレベル 4</h4> <h5>見出しレベル 5</h5> <h6>見出しレベル 6</h6>
h1が最大で、h6が最小の見出しを表します。また、HTML5では後で紹介する追加の見出し定義オプションも導入されました。
異なる見出しレベルは、テキストの構造化に役立ちます。たとえば本に倣ってください。本にはタイトルがあり、これはh1要素のコンテンツに相当します。したがって、HTMLページごとにh1要素は1つだけ挿入されるべきです。その他のテキストは、残りのレベルで区切られます。主要な見出しの後に、h2が続きます。h2のサブセクションは、さらにh3要素で示されます。
ちなみに：見出しレベルの大きさは、まずブラウザによって設定されます。ただし、CSSを使用して明示的に制御することもできます。詳細は後ほど説明します。
見出しレベルは非常に簡単に利用できます。"h"に続けて希望するレベル番号を指定します。
<h1>PSD-Tutorials.de</h1>
このように定義された見出しの後に、自動的に改行と後続要素への間隔が挿入されます。
開始タグと終了タグの数字が同一であることに注意してください。
段落を定義する
見出し以外にも、テキストは段落で構成されています。このような段落はHTMLでも非常に簡単に実現できます。使用されるのはp要素です。このようにマークされた段落には、最初から後続要素への間隔が含まれています。この段落の大きさはCSSで再度制御できます。
以下に2つの段落定義の例を示します：
<p>これは段落です</p> <p>これも段落です</p>
ブラウザでの表示は次のようになります：
HTML5では、開いた段落が</p>で閉じられる必要はないことに注意してください。しかし、可読性のためには、終了タグの</p>を実際に使用することをお勧めします。
手動改行
段落、リストなどの本文は、たとえばブラウザウィンドウよりも広い場合に、自動的に折り返されます。これは便利であり、不要な横スクロールを避けることができます。さらに、任意の位置でテキストを改行できます。ここで使用される要素は<br />です。この要素は、自己を閉じるスタンドアロンタグであることに注意してください。
<p>Yeh, this one's for the workers who toil night and day<br /> By hand and by brain to earn your pay<br /> Who for centuries long past for no more than your bread<br /> Have bled for your countries and counted your dead</p>
<br />を使用する場合、行末にあるかどうかに関係なく、結果は次のようになります：
ブラウザが自動的に挿入する改行は、最終的にどこで折り返されるかを制御できないため、問題が発生することがあります。典型的な例として、バージョン番号が挙げられます。
iPhone 5
通常、このような内容は1行になるべきです。したがって、ここではiPhoneと5の間に改行が挿入されるべきではありません。
iPhone 5
これを防ぐためには、特殊な空白文字を使用することができます。例：
この文字列によって、保護されたスペースが定義されます。ブラウザでは通常のスペースとして表示されます：
この方法を正常に機能させるために、ソースコードに空白を挿入しないでください。次の例は機能しません：
プリフォーマットされたテキスト
テキストを元のソースコードと同じように正確に表示したいときがあります。ここには、よくPSD-Tutorials.deで見られるようなプログラムリストの代表的な例があります。
そのような目的のために、HTMLではプリフォーマットされたテキストセクションの定義が許可されています。ブラウザーは、インデントをソースコードと同じように考慮します。以下の例では、そのような方法がどのように実現されるかを示します:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>"Hallo, Welt!" in PHP</h1> <pre> <?php echo "Hallo, Welt\\n"; ?> </pre> </body> </html>
プリフォーマットされたテキストを表示したい部分は、pre要素内で定義されます。最終的にブラウザーに表示されるように、その中にインデントなどを正確に入力してください。
例のコードを見ると、奇妙な記号 <?php や ?> に気づくでしょう。ブラウザーではこれらは <?php と ?> として表示されます。ソースコードで使用されているバージョンはエスケープ文字と呼ばれます。HTML固有の文字をブラウザーが解釈しないようにしたい場合に必要です。直接 <?php と入力すると、ブラウザーはPHP領域を開始するものと認識します。そのため、文字をエスケープします。
• & を & に置き換えます
• < を < に置き換えます
• > を > に置き換えます
• 引用符は " に置き換えます
ちなみに、pre はプログラムリストの表示だけでなく、表形式のデータを簡単に表示することもできます。次の例は、pre 要素内のスペースのみで実装された典型的な表を示しています。
<pre> Zielort Abfahrt Ankunft Bahnsteig ---------------------------------------------------------------- Berlin 10:23 14:30 2 Hamburg 11:09 13:20 13 München 12:04 15:45 1a </pre>
ブラウザーでの結果は次のようになります:
実際にブラウザーは、ソースコードで定義したスペースを考慮します。上述の表のバリエーションはかなり良い動作します。小規模の表にはかなり実用的だと思いますが、データが複雑になると、従来のHTMLテーブルに戻した方が良いでしょう。それらの定義方法も、このシリーズで詳しく説明します。
