見出し、段落、リストの階層でテキストを整理できるようになりましょう。
このレッスンを Kodokon で開く料理本を開いてみましょう。本のタイトルがあり、章のタイトルがあり、そしてレシピのタイトルがあります。HTMLも同じ階層を、6つのレベルの見出しで提供しています。<h1> から <h6> までです。h はheading(見出し)を表します。<h1> はページの主見出し、<h2> はセクションの見出し、<h3> は小見出し、というふうに <h6> まで続きます。
<h1>My recipe notebook</h1>
<h2>Starters</h2>
<h3>Carrot soup</h3>
<h2>Desserts</h2>
<h3>Apple pie</h3>通常のテキストには、前のレッスンで使った <p> タグを使います。1つ重要な点があります。ファイルの中でEnterキーを押しても、画面上で新しい段落が作られるわけではありません。ブラウザは改行や連続する空白を無視します。2つの考えを区切るには、2つの別々の <p> 要素を書かなければなりません。
<h2>Apple pie</h2>
<p>A simple recipe, perfect for beginners.</p>
<p>Allow 30 minutes of preparation in total.</p>項目を列挙するために、HTMLは2種類のリストを用意しています。<ul> タグ(unordered list、順序なしリスト)は箇条書きの点を表示します。順序が重要でない買い物リストにぴったりです。<ol> タグ(ordered list、順序ありリスト)は番号を表示します。レシピの手順に理想的です。どちらの場合も、リストの各項目は <li> タグ(list item、リスト項目)で書きます。
<ul>
<li>3 apples</li>
<li>1 pie crust</li>
<li>2 spoonfuls of sugar</li>
</ul>
<ol>
<li>Preheat the oven to 180 degrees.</li>
<li>Cut the apples into slices.</li>
<li>Bake for 35 minutes.</li>
</ol>