Webサイトを制作する上で、情報を整理して伝えることは非常に重要です。
その中でも、箇条書きは読者が内容を素早く理解するために欠かせない要素の一つです。
HTMLで箇条書きを表現する際には、ulタグとliタグを組み合わせて使用するのが標準的な手法です。
しかし、単に見た目を整えるだけでなく、検索エンジンやスクリーンリーダーにとっても正しい構造でマークアップすることが求められます。
本記事では、2026年現在のWeb標準に基づいた、ulタグとliタグの基本的な使い方から、アクセシビリティを考慮した実装方法まで詳しく解説します。
HTMLの箇条書きを支えるulタグとliタグの基本
HTMLで順序のない箇条書きを作成する場合、主に2つのタグを使用します。
まず、リスト全体を囲むためのタグがul（Unordered List）タグです。
そして、その中に含まれる個々の項目を示すのがli（List Item）タグとなります。
ulタグの役割
ulタグは、項目の並び順に特別な意味を持たないリストを定義するために使用されます。
例えば、買い物リストやWebサイトのナビゲーションメニューなどがこれに該当します。
ブラウザのデフォルト設定では、各項目の先頭に黒い点（ディスク）が表示されるのが特徴です。
liタグの役割
liタグは、リスト内の具体的な項目を定義するための要素です。
このタグは必ずulタグや、番号付きリストを作成するolタグの子要素として配置しなければなりません。
正しいリスト構造の書き方とルール
HTMLには、タグを記述する際の厳格なルールが存在します。
正しい構造を守ることで、ブラウザが意図通りにページを表示し、検索エンジンがコンテンツの内容を正しく理解できるようになります。
ulの直下にはliのみを配置する
最も重要なルールは、ulタグの直下にはliタグしか置いてはいけないということです。
よくある間違いとして、ulタグの直下にdivタグやpタグを配置してしまうケースが見受けられます。
もしリスト項目の中に段落や画像を入れたい場合は、必ずliタグの内側に記述するようにしてください。
基本的なソースコードの例
実際に箇条書きを作成する際のコードを確認してみましょう。
<!-- 正しい箇条書きの構造 -->
<ul>
<li>HTMLの基本を学ぶ</li>
<li>CSSでデザインを整える</li>
<li>JavaScriptで動きをつける</li>
</ul>・HTMLの基本を学ぶ
・CSSでデザインを整える
・JavaScriptで動きをつける入れ子構造（ネスト）によるリストの階層化
箇条書きの中に、さらに詳細な項目を追加したい場合があります。
このような構造を「入れ子」や「ネスト」と呼びます。
ネストさせる際の注意点
リストを入れ子にする際も、タグの親子関係を崩さないように注意が必要です。
新しいulタグは、親となるliタグの中に含める必要があります。
liタグを閉じる前に次のulタグを開始するのが正しい記述方法です。
入れ子構造のコード例
階層を持たせたリストの記述例を以下に示します。
<ul>
<li>フロントエンドエンジニア
<ul>
<li>HTML/CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>バックエンドエンジニア
<ul>
<li>PHP</li>
<li>Python</li>
</ul>
</li>
</ul>・フロントエンドエンジニア
・HTML/CSS
・JavaScript
・バックエンドエンジニア
・PHP
・Pythonセマンティックなマークアップの重要性
Web制作において、見た目だけで箇条書きを再現するのは避けるべきです。
例えば、pタグの先頭に「・」を入力して箇条書きのように見せることは可能ですが、これは推奨されません。
アクセシビリティへの配慮
視覚障がい者が利用するスクリーンリーダーなどの音声読み上げソフトは、HTMLタグを頼りに情報を判別します。
ulタグを使用することで、ソフトは「ここからリストが始まり、項目がいくつあるか」をユーザーに伝えることができます。
適切なタグの使用は、情報のバリアフリー化に直結します。
SEOへの影響
検索エンジンのクローラーも、HTMLの構造を解析してページの内容を理解します。
箇条書きとして定義された情報は、箇条書きではないテキストよりも「整理された重要な情報」として認識されやすくなります。
その結果、検索結果の強調スニペットなどに採用される可能性が高まるというメリットもあります。
CSSによる箇条書きのカスタマイズ
デフォルトの黒い丸（ディスク）は、CSSプロパティを使用することで自由に変更可能です。
デザインに合わせてリストのスタイルを調整しましょう。
list-style-typeプロパティ
項目の先頭に表示される記号（リストマーカー）の種類を変更できます。
主要な設定値を以下の表にまとめました。
| 設定値 | 表示結果 |
|---|---|
| disc | 塗りつぶされた円（デフォルト） |
| circle | 白抜きの円 |
| square | 塗りつぶされた四角 |
| none | 記号を表示しない |
ナビゲーションメニューでの活用
Webサイトのヘッダーにあるナビゲーションメニューも、実はulタグで作られることが一般的です。
list-style: none;を指定して記号を消し、CSSで横並びに配置することで、メニュー画面を構築します。
/* メニュー用のスタイル例 */
.nav-list {
list-style: none; /* 記号を消す */
display: flex; /* 横並びにする */
gap: 20px; /* 項目間の余白 */
}よくある間違いとトラブルシューティング
初心者が陥りやすいミスを確認し、エラーのないコードを目指しましょう。
終了タグの付け忘れ
liタグやulタグの終了タグを忘れると、表示が崩れる原因になります。
特にリストを入れ子にする場合は、構造が複雑になるため注意が必要です。
ulタグを直接装飾しすぎる
ulタグにはブラウザ独自のデフォルトマージン（外側の余白）やパディング（内側の余白）が設定されています。
意図しない隙間ができる場合は、margin: 0;やpadding: 0;を適用してリセットするのが一般的です。
リセットした上で、必要な余白を再定義することで、ブラウザ間の表示差異をなくすことができます。
まとめ
HTMLのulタグとliタグを用いた箇条書きは、Webコンテンツを整理するための基本技術です。
単に情報を並べるだけでなく、「ulの直下にはliのみ」というルールを徹底することが、正しい構造を作る第一歩となります。
意味のあるマークアップを心がけることで、ユーザーにとっても検索エンジンにとっても優しいWebサイトを構築できます。
また、CSSを活用すればデザインの幅も大きく広がります。
今回紹介した基本と構造をマスターし、日々のコーディングに役立ててください。