HTMLのliタグとは？初心者でもわかるul・ol内での正しい役割を完全解説
生徒
「HTMLでリストを書くときに、liタグって必ず出てきますけど、何をしているタグなんですか？」
先生
「liタグは、リストの中の一つ一つの項目を表すためのタグです。」
生徒
「ulやolだけじゃダメなんですか？」
先生
「ulやolは入れ物、liは中身です。この役割を理解するとHTMLが一気に分かりやすくなりますよ。」
1. HTMLのliタグとは？
liタグは、HTMLでリストの項目を表すためのタグです。liは「リストアイテム」という意味を持ち、箇条書きや番号付きリストの中身を一つずつ定義します。文章を書いているだけでは、どこからどこまでが一つの項目なのか分かりにくくなりますが、liタグで囲むことで、内容の区切りが明確になります。
2. liタグは単体では使えない理由
liタグは、必ずulタグやolタグの中で使います。これは、liタグが「リストの一部」であることを前提に作られているためです。例えるなら、ulやolはお皿、liは料理のような関係です。料理だけをテーブルに置くことができないように、liタグも単体では正しく意味を持ちません。
3. ulタグとliタグの基本構造
ulタグは番号の付かないリストを作るタグです。その中にliタグを並べることで、箇条書きの一覧が完成します。買い物リストや特徴の列挙など、順番が重要でない場合によく使われます。
<ul>
<li>りんご</li>
<li>みかん</li>
<li>バナナ</li>
</ul>
このように、liタグ一つが一行分の項目として表示されます。
4. olタグとliタグの基本構造
olタグは番号付きリストを作るタグです。手順や順番が大切な内容を書くときに使います。liタグを使う点はulと同じですが、表示される番号はブラウザが自動で付けてくれます。
<ol>
<li>電源を入れる</li>
<li>アプリを起動する</li>
<li>操作を開始する</li>
</ol>
番号を自分で書かなくてよい点が、liタグを使う大きなメリットです。
5. liタグの中には何が書けるのか
liタグの中には、文章だけでなく画像やリンクなども入れることができます。これにより、見た目も内容も分かりやすいリストを作ることができます。リストは単なる文字の集まりではなく、情報を整理するための重要な手段です。
<ul>
<li>
<img src="/img/sample150-100.jpg" alt="サンプル画像">
サンプル商品
</li>
<li>
<a href="#">詳細はこちら</a>
</li>
</ul>
6. liタグを入れ子で使う考え方
liタグの中に、さらにulやolを書くことで、情報を階層的に整理できます。これを入れ子構造と呼びます。大きな分類と小さな分類を分けて表現できるため、説明が長くなっても読みやすさを保てます。
<ul>
<li>果物
<ul>
<li>りんご</li>
<li>みかん</li>
</ul>
</li>
<li>野菜</li>
</ul>
7. liタグを使うときの注意点
liタグを書くときは、必ず親となるulまたはolタグが必要です。また、見た目をそろえるために無理にliタグを使うのではなく、内容が本当にリストに適しているかを考えることが大切です。HTMLは見た目だけでなく、情報の意味を正しく伝えるための言語だからです。
8. 初心者がliタグでつまずきやすいポイント
よくある間違いとして、liタグを使わずに改行だけで項目を並べてしまうケースがあります。これでは、HTMLとしてリストであることが伝わりません。liタグを正しく使うことで、検索エンジンや読み上げ機能にも内容が伝わりやすくなり、結果として分かりやすいページになります。
「意味」がわかればWebは楽しい！現役エンジニアが教える、挫折しないためのHTML構造化入門
「Webの仕組み」を正しく操る。HTML5でプロフェッショナルな情報設計の第一歩を。
本講座では、単なるタグの暗記ではなく、「検索エンジンやAIに正しく伝わる情報の構造化」という本質的な技術を学びます。モダンWebの土台であるHTML5を通じて、将来的にWebデザイナーやフロントエンドエンジニアを目指すための「稼げる基礎力」を最短距離で身につけます。
具体的なワークショップ内容と環境
【つくるもの】
自己紹介やポートフォリオの土台となる「構造化されたWebページ」を作成します。見出し、段落、リスト、リンク、画像配置など、商用サイトでも必ず使われる「セマンティックなマークアップ」をゼロから体験してください。
【開発環境】
世界中のプロが愛用するVisual Studio Code (VS Code)を使用します。Emmet（高速入力機能）の設定から、HTMLの文法ミスを自動チェックする拡張機能まで、現場基準の効率的な環境を一緒に構築します。
この60分で得られる3つの武器
Googleから高く評価されるタグの選び方を理解し、検索上位を狙えるサイト構造の作り方を学びます。
プロが使うショートカットや自動補完機能を習得し、タイピングの手間を最小限にする技術を体得します。
画像への代替テキストや適切な階層構造など、誰にとっても使いやすい「優しいWeb」の作り方を伝授します。
※本講座は、将来的にWebデザイナー、コーダー、フロントエンドエンジニアを目指す未経験者のためのエントリー講座です。「モクモク」独自のマンツーマン形式により、コードを1行書くたびに生まれる疑問をその場で解決します。
現役エンジニアが教えるHTML入門
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
