もじゃもじゃラボ/HTML超入門！押さえておきたいマークアップの基本/タグの種類/グループ
HTMLCSSJavaScriptJava
HTMLCSSJavaScriptJava

グループ

HTML超入門！押さえておきたいマークアップの基本
JavaScriptでプログラミングの基本的概念を学ぼう！
Webページに動きをつけるプログラミングを学ぼう！
ライン公式アカウント
オンラインレッスンのお得なクーポン配信しています！
このチャプターの目次

グループ

コンテンツをグルーピングするための分類です。

p

用途段落
書式

サンプルコード

ul ol dl

用途リスト
書式サンプルソース参照
  • ulタグ
      • 順番に意味がないunorderedなリストを表します。ブラウザで表示した際には箇条書きになります。子要素に、liタグを使います。
  • olタグ
      • 順番に意味がある順序付き（orderedな）リストを表します。ブラウザで表示すると、番号付きリストになります。例えば、優先順位を持つToDo（やること）リストを作成する場合は、ulタグではなくolタグを使うのが相応しいでしょう。順番に意味があるためです。料理のレシピなどの場合も、ulタグではなくolタグを使うのが相応しいでしょう。調理手順に意味があるためです。olタグはliタグと組み合わせて使用します。
  • dlタグ
      • 説明リスト（description list）と言います。辞書のように用語とその説明を表示するための形式です。用語はdtタグ、説明はddタグを使って表示します。

サンプルコード

div

用途特定の範囲をグルーピングする
書式
意味を持たない汎用的なタグです。このグループの分類の他のどの要素にもあてはまらないような場合に使います。

良い文書構造のメリット

文書構造を意識することには以下のようなメリットがあります。
  • 読みやすさ
      • 文書構造を整えることで、読者が情報を迅速に把握しやすくなります。
  • 理解しやすさ
      • 適切な見出しや段落の使用により、文書の内容が明確に伝わりやすくなります。
  • ナビゲーションの容易さ
      • 文書構造を明確にすることで、読者は必要な情報に素早くアクセスできます。
  • 強調効果
      • 見出しや箇条書きを使用することで、重要なポイントやキーワードを強調することができます。
コンテンツの役割がはっきりします。同じ内容の文章を平文で書いた場合とマークアップした場合を比較すると、平文の方は区切りがないため、機械から見ると句読点のない文章のようなものになってしまいます。一方、タグでマークアップされた文章は区切りがはっきりしているため、機械にとっても読みやすいコンテンツになります。
その結果、検索エンジンのアルゴリズムやワードによると思いますが、ランクを上げるということにも繋がっていく、というのがメリットとして挙げられると思います。