ついて深掘りしていきます。HTMLの構造をしっかりと組み立てられるように、実際の使用例を見ながら理解を深めていきましょう。各タグの持つ意味と、それに付随するタグを理解しましょう。「ul要素は、順序のないリストを表す。項目の順序を変えてもlistの意味が変わらないリストである。意味があり、翻訳の文から「順序のないリストを表す」ということがわかります。リスト項目の順番が関係ない場合、ulタグを使用してマークアップすると、順序のないリストを一つの要素のグループとしてまとめることができます。箇条書きしたアイディアやグローバルナビなどがこれに該当します。HTML5上記を翻訳するとこのようになります。「ol要素は、項目のリスト(またはシーケンス)を表します。項目が意図的に順序付けされたリストであり、順序を変更するとリストの意味が変わってしまうようなものです。」olタグはulタグと対照的に、順序付けされたリストだということがわかります。説明書や人気ランキングがこれに当たります。使用例それでは実際に、使用例からどのタグを使用するとより良いのかを考えていきましょう。買い物リスト買い物リストをマークアップする時はどうでしょうか。ほとんどの場合は順番を問わないケースが多いと思います。その場合は順不同リストのulタグを使用してマークアップするのが適切だと考えられます。<li>牛乳</li></ul>このコードをフロントで確認したら下のようになります。CSSをあてていない状態でもあらかじめマーカーでポイントが出ます。項目であるということがわかりやすいですね。50m走の順位50m走の順位をマークアップするときはどうでしょうか。ゴールした時の順位は順序付けが大切なので入れ替わってはいけません。その場合は順序付けされたリストであるolタグを使用しましょう。<li>亀</li></ol>このコードをフロントで確認したら下のようになります。CSSをあてていない状態でもマーカーに順番が出ています。このように、順序が重要な場合はolタグを使用しましょう。パンくずリストパンくずリストは現在のページがどこにあるのかわかりやすく表示するもので、下のようなもののことです。このパンくずリストはどのタグを使用してマークアップするのが良いでしょうか。パンくずリストは現在のページまでの地図のようなものなので、順番が変わると現在のページに辿り着けなくなります。このことから、順番が大切な順序付けされたリストであるolタグを使用すると良いことが分かります。実際にパンくずリストを記述した例はこちらです。一般的に使用されているMicrodata(schema.org)という方式で記述しました。</li></ol>このようにliタグごとに順番に現在までの地図を表示します。順序付けされたリストのolタグを使用することで、パンくずリストを有効的にマークアップすることができます。ついて深掘りしてみました。HTMLの構造をしっかりと組み立てられると、CSSをあてなくてもある程度わかりやすく意図に合った表示をしてくれます。マークアップ方法が合っているか意識してみてください。株式会社RETVALでHTML/CSS、WordPressのコーディングを担当。