Kodokon kodokon.com

テキストを構造化する:見出し、段落、リスト

見出し、段落、リストの階層でテキストを整理できるようになりましょう。

7 分 · 3 問

このレッスンを Kodokon で開く

料理本を開いてみましょう。本のタイトルがあり、章のタイトルがあり、そしてレシピのタイトルがあります。HTMLも同じ階層を、6つのレベルの見出しで提供しています。<h1> から <h6> までです。hheading(見出し)を表します。<h1> はページの主見出し、<h2> はセクションの見出し、<h3> は小見出し、というふうに <h6> まで続きます。

HTML
<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> 要素を書かなければなりません。

HTML
<h2>Apple pie</h2>
<p>A simple recipe, perfect for beginners.</p>
<p>Allow 30 minutes of preparation in total.</p>
セクションの見出しに続く2つの段落。

項目を列挙するために、HTMLは2種類のリストを用意しています。<ul> タグ(unordered list、順序なしリスト)は箇条書きの点を表示します。順序が重要でない買い物リストにぴったりです。<ol> タグ(ordered list、順序ありリスト)は番号を表示します。レシピの手順に理想的です。どちらの場合も、リストの各項目は <li> タグ(list item、リスト項目)で書きます。

HTML
<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>
材料には箇条書きリスト、手順には番号付きリスト。

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

  1. ページの主見出しにはどのタグを使いますか?
    • <h6>
    • <h1>
    • <p>
    • <heading>
  2. 番号付きリストを作るのはどのタグですか?
    • <ul>
    • <ol>
    • <li>
  3. 画面上に2つの別々の段落を表示するにはどうしますか?
    • ファイルの中でEnterを2回押す
    • 2つの別々の<p>要素を書く
    • 文と文の間に空白を追加する