【HTML Living Standard】ul要素の使い方

ul要素の使い方について、初心者にもわかりやすく解説します。

作成日: 2025年09月29日更新日: 2026年03月27日

基本的な使い方

ulオブジェクトは、順序のないリストを表すHTMLオブジェクトです。これは、ウェブページ上で複数の関連する項目を、特定の順序付けをせずにグループ化して表示したい場合に利用されます。例えば、製品の機能一覧、ウェブサイトのナビゲーションメニューの項目、ブログ記事のタグリストなど、項目間の並び順が重要ではない情報のリストを作成する際に非常に役立ちます。

このオブジェクトを使用する際は、リストの各項目を必ず<li>（リストアイテム）オブジェクトとしてulオブジェクトの内部に配置する必要があります。ウェブブラウザは、デフォルトで各リストアイテムの先頭に黒い丸などの記号（リストマーカー）を表示し、箇条書きとして視覚的に分かりやすく表現します。このリストマーカーの見た目は、CSS（カスケーディングスタイルシート）を用いることで、円や四角、画像などに自由にカスタマイズすることが可能です。

ulオブジェクトを適切に使うことで、コンテンツの構造が明確になり、ユーザーにとっても検索エンジンにとっても理解しやすいウェブページを作成できます。情報のセマンティックな意味付けを正確に行うことは、アクセシビリティやSEO（検索エンジン最適化）の観点からも重要です。もしリストの項目に特定の順序が必要な場合、例えば手順やランキングなどを表す際は、ulオブジェクトではなく<ol>（順序付きリスト）オブジェクトを使用することが推奨されます。ulオブジェクトは、情報の関連性を示しつつ、その順序が本質的ではない場合に最適な選択肢となります。

公式リファレンス: <ul>: The Unordered List element

構文(syntax)


1<ul>
2  <li>リストアイテム1</li>
3  <li>リストアイテム2</li>
4</ul>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

サンプルコード

HTMLでul, liを使ったリストを作成する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>ul li サンプルコード</title>
7</head>
8<body>
9    <!-- ul要素は、順序なし（点や記号の）リストを定義します。 -->
10    <ul>
11        <!-- li要素は、リストの各項目を定義します。 -->
12        <li>コーヒー</li>
13        <li>紅茶</li>
14        <li>牛乳</li>
15    </ul>
16</body>
17</html>

このサンプルコードは、HTMLで「順序なしリスト」を作成する基本的な方法を示しています。HTMLは、ウェブページの構造とコンテンツを定義するためのマークアップ言語です。

<ul>要素は「Unordered List」の略で、項目に明確な順序がないリストを定義するために使用されます。例えば、買い物リストや項目の羅列など、順番が重要ではない場合に適しています。通常、ウェブブラウザでは、この要素で囲まれた各リスト項目の先頭に「・」（黒丸）のような記号が表示されます。<ul>要素はリスト全体の枠組みを提供する役割を持ち、単体で内容を表示することはありません。

その<ul>要素の内部には、<li>要素が配置されます。<li>要素は「List Item」の略で、リストにおける個々の項目、つまり具体的な内容を定義します。サンプルコードでは、「コーヒー」「紅茶」「牛乳」がそれぞれ<li>要素として記述されており、これらがブラウザ上でリストの各項目として表示されます。

HTMLの要素は、プログラミング言語の関数とは異なり、処理を実行するものではありません。そのため、<ul>要素には、特定の情報を渡す「引数」や、処理結果を返す「戻り値」といった概念は存在しません。HTML要素の役割は、コンテンツに意味と構造を与え、ブラウザがそれを解釈して適切に表示するための指示をすることです。

システムエンジニアを目指す初心者の方にとって、ウェブページの基本的な構造とコンテンツの表現方法を理解することは重要です。<ul>と<li>は、ウェブサイトで頻繁に使用される基本的な要素ですので、この機会にしっかり覚えておきましょう。

ul要素は順序のないリストを、li要素はそのリストの各項目を定義します。これらの要素を正しく使うためには、ul要素の子要素には必ずli要素のみを直接配置することが重要です。例えば、ulの中に直接<p>要素などを書くと、HTMLの構造として誤りとなり、意図しない表示やアクセシビリティの問題を引き起こす可能性がありますので注意してください。リストの見た目の変更はCSSで行うべきであり、HTMLはコンテンツの意味（セマンティクス）を正しく表現するために用います。リストの項目に順序が重要である場合はol（順序付きリスト）を、順序が関係ない場合にulを選択すると覚えておくと良いでしょう。正しいマークアップは、ウェブページの構造を明確にし、読みやすさや検索エンジン最適化にも寄与します。

HTML ul要素で順序なしリストを作成する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>ul要素のサンプル</title>
6</head>
7<body>
8    <h1>好きなプログラミング言語</h1>
9
10    <!-- ul要素は、順序のないリスト（Unordered List）を作成するために使用します。 -->
11    <!-- 各リスト項目は、li（List Item）要素で囲みます。 -->
12    <ul>
13        <li>Python</li>
14        <li>JavaScript</li>
15        <li>Java</li>
16        <li>C#</li>
17    </ul>
18</body>
19</html>

HTMLのul要素は、Webページ上で順序のないリスト（Unordered List）を作成するために使用する要素です。特定の順序に意味がない箇条書きの項目を表示したい場合に適しており、例えば好きなプログラミング言語のリストや、機能の一覧などを表現する際に活用されます。

このul要素は、単体ではリストの枠組みを定義するだけです。実際の各リスト項目は、li（List Item）要素を使って表現します。具体的には、<ul>タグと</ul>タグの間に、それぞれの項目を<li>タグと</li>タグで囲んで配置することで、ブラウザは自動的に各項目の前に黒丸などの箇条書き記号を表示してくれます。

HTML要素には、プログラミング言語の関数のような「引数」や「戻り値」の概念は適用されません。ul要素も同様に、特定の値を渡すための引数や、処理結果を返す戻り値は持ちません。これは、HTMLがプログラムの動作を記述するのではなく、文書の構造と意味を定義するためのマークアップ言語であるためです。

提示されたサンプルコードでは、「好きなプログラミング言語」という見出しの下に、Python、JavaScript、Java、C#という四つのプログラミング言語を順序のないリストとして表示しています。全体を<ul>タグで囲み、各言語名を<li>タグでマークアップすることで、情報が整理され、視覚的にわかりやすい箇条書きが作成されています。

ul要素は、順序のないリスト（Unordered List）を作成する際に使用します。この要素の直下には、必ずリストの項目を示すli（List Item）要素を配置してください。ulの子要素としてli以外の要素を直接記述すると、HTMLの構造が不正となり、ブラウザによる表示やアクセシビリティに問題が生じる可能性があります。

順序が重要なリストを作成する場合は、ol（Ordered List）要素を使用し、ulとolを意味に応じて適切に使い分けることが大切です。これらの要素を正しく利用することで、コンテンツの構造が明確になり、検索エンジンやスクリーンリーダーといった補助技術にも正確な情報を伝えることができます。デザイン目的のみでulを使用せず、セマンティクス（意味）を考慮して活用してください。