ulタグとは liタグとの関係と意味 olやdlとの使い分けの決め方

自社サイトの記事のソースを開くと、箇条書きのところに ul と li というタグが並んでいた。

見た目は点の付いた並びで、それだけなら画像でも「・」の文字でも作れる。わざわざタグで書く意味はどこにあるのか。ulの中に直接文字を書いたら壊れるのか。liの中にdivを入れてよいのか。

制作会社に任せたままで、タグの中身を聞いたことがない。そういう経営者やWeb担当者に向けて、この記事を書いています。

結論から言います。ul要素は、項目の順序に意味がない並びを表すタグです。入れ替えても文書の意味が変わらないなら、ulが合います。順序に意味があるならol、名前と説明の組ならdlを選びます。

ulの直接の子に置けるのは、liだけです。文字やdivを直接置いても、ブラウザは表示してくれます。しかしそれは仕様に合わない書き方で、ブラウザが直してくれるわけでもありません。

反対に、liの中には何でも入れられます。段落もdivも、さらに別のリストも置けます。

点を消したり四角に変えたりするのは、ulの役割ではありません。見た目はCSSの仕事です。点を消しても、ul自体はリストのまま残ります。

この記事では、これらの答えを、HTMLの仕様（WHATWG）を2026年11月9日に開いて確かめ、さらにブラウザで実際に動かした結果と合わせて書きます。確かめられなかったことは、そう書きます。

検索順位やAI検索の引用に、ulを使うかどうかが関係するかは、公式の文書に記載が見つかりませんでした。ただし、読み上げソフトを使う人にとっては、ulで組んだ並びとそうでない並びとで、読み上げられ方が変わります。この点は計測で確かめました。

この記事の軸は、「並びのタグ1つの判断」です。タグの書き方は短くして、ul・ol・dlのどれにするか、そもそも並びにするか、という判断のほうを厚く書きます。

先に答え：ul要素について、確かめられたこと

先に、この記事の結論を表にまとめます。右端の列は、その答えの根拠にした資料です。

疑問	答え	根拠にした資料
ul要素は何を表すか	順序が重要でない項目の並び。入れ替えても意味が変わらない	HTMLの仕様（WHATWG）のグループ化の章
ulの子に置けるものは何か	liと、スクリプト用の要素だけ	HTMLの仕様（WHATWG）のグループ化の章
liの中に置けるものは何か	フローコンテンツ。divも段落も、別のリストも置ける	HTMLの仕様（WHATWG）のグループ化の章
順序に意味があるときは何を使うか	ol。数える順や手順の並びに使う	HTMLの仕様（WHATWG）のグループ化の章
名前と説明の組はどうするか	dl。dtが名前、ddが説明	HTMLの仕様（WHATWG）のグループ化の章
点を消してもリストのままか	リストのまま。見た目だけが変わる	ブラウザでの計測
「・」とbrで作った並びは読み上げでどうなるか	リストの役割は付かず、ひと続きの文字として扱われる	ブラウザでの計測、W3Cの技術文書
SEOやAI検索に関係するか	公式に記載なし	検索セントラル、OpenAIとAnthropicの公式文書

表の中で「記載なし」と書いた行は、調べて見つからなかったという報告です。ないことの証明ではありません。

この記事の読み方

悩みの種類によって、読む節が変わります。

いまの悩み	読む節
ulが何のためのタグか知りたい	ul要素とは何か：仕様に書かれた定義
liとの関係や、ulの中に書けるものを知りたい	liとの関係：ulの子に置けるもの
ul・ol・dlのどれにするか迷っている	ul・ol・dl・menuの使い分け
箇条書きを画像や「・」で作ってよいか知りたい	そもそも並びにするか：タグで組む理由
点を消したい、横に並べたい	点を消す・付け替える：見た目はCSSで決める
リストの中にリストを入れたい	入れ子のリスト
WordPressで箇条書きを作っている	WordPressのリストブロックと、弊社の書き方
自社サイトの状態を知りたい	弊社の公開記事で数えたul
すぐ点検したい	今日できる点検

この記事で使う言葉

タグの話は、同じ言葉が場面によって違う意味で使われます。迷わないように、この記事での使い方を先に決めておきます。

言葉	この記事での意味
要素	開始タグから終了タグまでの全体。ul要素と書けば、ulタグと中身をあわせたもの
項目	リストの1行分。HTMLではli要素で書く
フローコンテンツ	本文に置ける要素の広い分類。divやpやulもここに入る
入れ子	あるタグの中に、別のタグを入れること
読み上げ	画面を見ずに、ソフトが文字を声に出す仕組み。支援技術と呼ばれる
アクセシビリティツリー	ブラウザが、画面の内容を役割つきで整理した一覧。読み上げソフトはこれを読む

この記事の根拠にした資料

この記事は、次の資料を2026年11月9日に開いて確かめた範囲だけで書いています。

資料	確かめたこと
HTMLの仕様（WHATWG）のグループ化の章	ul・ol・li・dl・menuの定義と、中に置けるもの
HTMLの仕様（WHATWG）の表示の章	リストの標準の見た目（余白と点の形）
W3Cの勧告 WCAG 2.2の解説文書	情報と関係性をプログラムで読み取れること
W3Cの技術文書 H48	リストを専用のタグで書く方法
Google 検索セントラル	AI機能とウェブサイト、SEOスターターガイド
OpenAIとAnthropicの公式文書	クローラーの種類と役割
WordPressのブロックエディタの公開ソースコード	リストブロックの設定

加えて、ブラウザ（Chromium 145）でHTMLを実際に動かして測った結果と、弊社の公開記事を数えた結果を載せます。弊社の数字は、そう明記します。

Q&Aサイトで見かけた、navの中にulとliが要るのかという質問

先日、Q&Aサイトでこのような悩みを拝見しました。

ホームページの上のほうに並ぶ案内の部分を作っている。教わった書き方では、navで囲み、その中にulとliを置き、さらにその中にaを書く。ulとliを省いて、navの直下にaだけを並べたら、いけないのか。理由も知りたい。

初心者の方が、決まりきった型の意味を知りたいと考えるのは、当然のことです。意味が分からないまま写していると、直したいときに触れなくなります。

自社サイトの案内の部分を、制作会社が作ったまま触っていない方にも、同じ疑問は当てはまります。

回答に書かれていたこと

寄せられていた回答の要点は、2つでした。

1つ目は、書き方に決まりはなく、navの直下にaを並べても構わないという点です。

2つ目は、ulとliを使う理由は、並びを1つのまとまりとして機械に認識させるためという点です。回答者は、その機械を検索のロボットと説明していました。

回答のどこまでが確かめられるか

1つ目は、ブラウザで動かせば確かめられます。この記事では実際に測りました。navの直下にaだけを並べても、問題なく表示され、ブラウザはこれを案内の部分として扱いました。

2つ目は、半分だけ確かめられます。ulとliでまとめると、読み上げソフトが受け取る情報に「リスト」というまとまりと、項目の区切りが加わります。これは計測で確かめました。

ただし、検索のロボットがまとまりとして認識するという点は、公式の文書に記載が見つかりませんでした。ここは確かめられなかったので、この記事では断定しません。

質問から読み取れる3つの疑問

質問の文面から、読み手が知りたいことを3つに整理しました。この記事は、この3つに順に答えます。

疑問	答える節
ulとliは、何のために書くのか	ul要素とは何か、そもそも並びにするか
省いたら、何が変わるのか	そもそも並びにするか：タグで組む理由
navの中では、どう組むのが標準か	点を消す・付け替える、今日できる点検

先に短く答える

ulとliは、並びを「項目のまとまり」として機械に伝えるために書きます。省いても表示は崩れません。変わるのは、読み上げソフトが受け取る情報です。

案内のように、同じ形の項目が並ぶ部分は、ulとliで組むのが無難です。リストの始まりと終わりが読み上げソフトに伝わり、リストごと飛ばして読みたいときにも役に立ちます。

点の表示が邪魔なら、CSSで消します。消してもリストの意味は残ります。

この先の節で、それぞれの根拠を示します。

ul要素とは何か：仕様に書かれた定義

ここでは、HTMLの仕様（WHATWG）が ul 要素をどう定めているかを確かめます。仕様は、2026年11月6日更新の版を開きました。

仕様の一文

仕様は、ul要素を次のように定義しています。

「ul要素は、項目の順序が重要でないリストを表す。つまり、順序を入れ替えても文書の意味が実質的に変わらないリストである。」（英語の原文を和訳）

定義の中心は「順序が重要でない」という点です。点が付くかどうかは、定義に入っていません。点は、ブラウザが標準で付ける見た目にすぎません。

入れ替えテスト

順序が重要かどうかは、並びを入れ替えてみれば分かります。

来店のときの持ち物を例にします。「予約票、身分証、筆記用具」と書いても、「筆記用具、予約票、身分証」と書いても、案内の意味は変わりません。この並びはulが合います。

手順の並びは違います。「申込書を書く、窓口に出す、番号札を受け取る」を入れ替えると、意味が変わります。こちらはolの出番です。

仕様も、同じ考え方で例を載せています。住んだことのある国を並べた例で、アルファベット順に書いても、別の基準で並べ替えても、文書の意味は変わらないと説明し、そのリストをulで書いています。

内容モデルと分類

仕様が定めている ul 要素の条件を、表にまとめます。

項目	仕様の内容
分類	フローコンテンツ。li を1つ以上含むときは、パルパブルコンテンツにもなる
置ける場所	フローコンテンツが置ける場所ならどこでも
中に置けるもの	0個以上の li と、スクリプト用の要素
タグの省略	開始タグも終了タグも省略できない
属性	どの要素にも付けられるグローバル属性だけ

表の中の「パルパブルコンテンツ」は、中身が見える内容のことです。空のulは、見える内容を持たないので、この分類に入りません。

中に置けるものが「li」と「スクリプト用の要素」に限られている点が、この記事の中心になります。次の節で、置いたらどうなるかを測ります。

標準の見た目

ulを何も装飾せずに表示すると、標準の見た目になります。仕様の表示の章に、その決まりが書かれています。

項目	仕様の標準値	Chromium 145 での計測値
上下の余白	1em	16px
左の字下げ	40px	40px
1段目の点	黒丸	disc（黒丸）
2段目の点	白丸	circle（白丸）
3段目の点	四角	square（四角）
入れ子の中の上下の余白	0	0px

仕様の値と、ブラウザで測った値は一致しました。文字の大きさが16pxのとき、1emは16pxです。

自社サイトで、リストの左にだけ不自然な空きがあるときは、この40pxが残っているのが原因のことが多いです。消す方法は、後の節で扱います。

liとの関係：ulの子に置けるもの

ul要素とli要素は、必ず組になって使います。この節では、その関係を仕様とブラウザの動きで確かめます。

ulの子はliだけ

仕様は、liの置ける場所を「olの中、ulの中、menuの中」と定めています。ulの側からは、置けるものはliだけです。

この決まりを破った書き方を、W3Cの検査サービス（Nu Html Checker）に通しました。2026年11月9日に測った結果です。

書き方	検査サービスの結果
ulの中にliを並べる	エラーなし
ulの直下に文字を書く	「ulの中に文字は置けない」というエラー
ulの直下にdivを置く	「divはulの子にできない」というエラー
ulの直下に別のulを置く	「ulはulの子にできない」というエラー
liをulの外に単独で置く	「liはbodyの子にできない」というエラー

ブラウザは、エラーのある書き方でも表示します。表示できることと、仕様に合っていることは別です。

直接の文字やdivを置くと何が起きるか

ブラウザは、仕様に合わない書き方を見つけても、タグを直してくれません。実際に動かして測りました。

書き方	ブラウザの動き
ulの直下に文字を書く	そのまま残る。文字には点が付かない
ulの直下にdivを置く	そのまま残る。divは通常どおり表示される
ulの中に、liと別のulを並べる	子が3個（li・ul・li）のまま残る

ここで大事なのは、ブラウザが何も補っていない点です。見た目では、整っているように見えても、中身は仕様から外れたままです。

読み上げソフトの側から見ると、このずれは問題になります。リストの項目として扱われない文字が、リストの途中に混ざるからです。

liの終了タグは省略できる

仕様には、liの終了タグを省略できる場合が書かれています。次のliが直後に続くとき、または親の中にもう内容がないときです。

終了タグを書かずに「ul・li・li」と並べたHTMLを、ブラウザで開いて中身を見ました。結果は、3つのliがそれぞれ正しく閉じられた形でした。検査サービスもエラーを出しませんでした。

省略しても動きますが、書いたほうが読み間違いを防げます。自社サイトのソースでは、終了タグを書く形に揃えておくと、あとで直す人が迷いません。

liの中に置けるもの

liの内容モデルは、フローコンテンツです。段落もdivも、見出しも、別のリストも置けます。

「liの中にdivを入れてよいか」という疑問への答えは、入れてよい、です。検査サービスに通すと、liの中にdivと段落を置いた書き方は、エラーなしでした。

liの中に置くもの	仕様に合うか
文字だけ	合う
p（段落）	合う
div	合う
a（リンク）	合う
別のul・ol	合う
見出し（h3など）	合う

反対に、liの外に出すと合わなくなる点に注意してください。ulの子にdivを置くのは誤りですが、liの子にdivを置くのは正しい書き方です。1段違うだけで、可否が変わります。

pの中にulは置けない

もう1つ、見落としやすい決まりがあります。pの中にulは置けません。

pの中にulを書いて、ブラウザで開くと、pはulの手前で閉じられました。ulの後ろの文字は、pの外に出て、空のpが1つ残りました。検査サービスも、pの終了タグの位置にエラーを出しました。

文章の途中に箇条書きを入れたいときは、前の文章でpを閉じ、ulを置き、続きの文章を新しいpで書きます。pタグの詳しい決まりは、pタグとは brタグやdivタグとの違いと段落の区切り方の決め方で扱っています。

ulの中のliに付けられる属性

liには、value という属性があります。リストの何番目として数えるかを指定するものです。

仕様は、この属性が使えるのを「親がulでもmenuでもないとき」と定めています。つまりolの中のliです。ulの中のliに value を付けても、数える相手がいません。W3Cの検査サービスに通すと、「valueはここでは使えない」というエラーが出ました。

ul・liに付けるのは、どの要素にも付けられるグローバル属性だけで足ります。class や id は付けられます。見た目を変えたいときは、class を付けて、CSSで指定します。

項目の数や長さに決まりはあるか

ul要素の定義の節には、項目の数にも長さにも、上限や下限は書かれていません。

1項目だけのulも、仕様の上では書けます。ただ、1項目しかない並びは、並びと呼べるのかを先に考えます。この判断は、後の「そもそも並びにするか」の節で扱います。

長い文章を1項目に入れることも、仕様は禁じていません。liの中に段落を置けるので、複数の段落をもつ項目も書けます。ただ、読み手にとっては、1項目が長くなるほど、箇条書きにした利点が薄れます。

空のulは置かない

liを1つも持たないulは、仕様の上では書けます。検査サービスにかけると、空のulはエラーになりませんでした。ただし、中身が見えないので、パルパブルコンテンツには入りません。

関連記事を出す部品のように、該当する記事がなかったときに枠だけが残る作りだと、空のulが出力されます。

空のulが読み上げソフトでどう扱われるかは、今回は確かめられませんでした。ソースで空のulを見つけたら、中身がないときは出力しない設定にできないか、テーマの設定を確かめます。

ul・ol・dl・menuの使い分け

並びを書くときの最初の判断は、どのタグを選ぶかです。書き方は、そのあとに決まります。仕様が用意している並びのタグは、ul・ol・dl・menuの4つです。

順序に意味があるか、で分ける

ulとolの違いは、仕様が1つの基準で説明しています。

olの定義は、こう書かれています。

「ol要素は、項目が意図的に順序づけられていて、順序を入れ替えると文書の意味が変わるリストを表す。」（英語の原文を和訳）

ulの定義と並べると、基準は「入れ替えて意味が変わるかどうか」の1つだけです。変わらなければul、変わればolです。

olには、ulにない属性が3つあります。逆順に数える reversed、数え始めの値を決める start、番号の種類を決める type です。順序を扱うタグだから、数え方を指定する属性が用意されています。

名前と説明の組はdlで書く

項目が「名前と、その説明」の組になっているときは、dl要素が合います。仕様は、dlを次のように定めています。

「dl要素は、名前と値の組が0個以上ある連想リスト（説明リスト）を表す。」（英語の原文を和訳）

名前はdt、値はddで書きます。仕様は、使い道として、用語と定義、項目名と値、質問と回答を挙げています。

たとえば、営業時間と定休日の案内は、名前と値の組です。「営業時間：9時から18時」「定休日：水曜日」のように、左に名前、右に値が来ます。

仕様の注意が1つあります。同じdlの中で、同じ名前のdtを2回以上書かないことです。同じ名前が複数あるなら、1つの名前に複数のddを付けます。

menuは操作の並びのためのタグ

menu要素は、ulと同じように li を子に持ちます。ただし、役割が違います。

仕様は、menuを「ユーザーが実行できる操作の並び」と説明しています。仕様の例では、コピーや貼り付けのボタンを並べた道具の列が、menuで書かれています。

ホームページの案内のリンクは、実行する操作の並びには当たりません。移動先の並びです。ここは弊社の整理ですが、リンクの並びにはulを使います。W3Cの技術文書H48にも、nav要素の中でulとliを使ってリンクをまとめる例が載っています。

4つを比べた表

並びの種類	向いている内容	項目の書き方
ul	入れ替えても意味が変わらない項目。持ち物、特長、リンクのまとまり	liを並べる
ol	順序に意味がある項目。手順、順位、時系列	liを並べる。数え方は属性で指定
dl	名前と説明の組。用語集、項目名と値、質問と回答	dtとddの組を並べる
menu	利用者が実行する操作の並び。道具の列	liを並べる

ブラウザの読み上げ側での違い

読み上げソフトが受け取る情報は、ブラウザの内部で整理されます。この整理の結果を、Chromium 145 で書き出して比べました。

書き方	書き出された役割
ulとli	リストの中に、リストの項目が3つ
olとli	リストの中に、リストの項目が2つ
dlとdtとdd	用語と定義が組になって並ぶ

ul と ol は、ブラウザの内部では同じ「リスト」として扱われました。違うのは、olのほうが番号が付くという点です。

dl は、リストの役割は付かず、用語と定義の組として書き出されました。名前と説明の組が、構造として機械に伝わります。

迷ったときの決め方

選び方を、4つの問いにまとめます。

問い	答えが「はい」のとき
項目の順序を入れ替えたら、意味が変わるか	olにする
項目が、名前と説明の組になっているか	dlにする
項目が、利用者が実行する操作か	menuにする
上の3つがどれも違うか	ulにする

迷ったら、まずulを選んで、1つずつ問いを通すと決まります。olと迷うときは、番号を付けて読み手が「3番目」と言うかどうかで考えます。

問いを通す順番を、図にしました。上から順に、違えば次の問いへ進みます。

そもそも並びにするか：タグで組む理由

並びのタグを選ぶ前に、もう1つ判断があります。その内容を、並びにする必要があるのか、という判断です。

画像や「・」で作った箇条書きとの違い

箇条書きは、ulを使わなくても、見た目だけなら作れます。行頭に「・」を書き、brで改行する方法です。divを1行ずつ並べる方法もあります。

この3通りを、Chromium 145 で書き出して比べました。

書き方	書き出された役割
ulとli	リストの中に、項目が3つ
divを並べて行頭に「・」	ひと続きの文字。リストの役割なし
1つのpの中でbrで改行して行頭に「・」	1つの段落の文字。リストの役割なし

見た目が同じでも、ブラウザが受け取る情報は違います。ulで組むと、3つの項目があるという情報が残ります。「・」で作ると、文字だけが残ります。

W3Cが書いていること

W3CのWCAG 2.2には、この違いに関係する成功基準があります。1.3.1「情報と関係性」です。

「見た目を通じて伝えている情報、構造、関係性は、プログラムで読み取れるか、テキストで提供されていなければならない。」（英語の原文を和訳）

解説文書は、見た目の手がかりの例として「リストの項目の前に点があり、字下げされている」ことを挙げています。この手がかりを、タグでも伝えなさい、という趣旨です。

W3Cの技術文書H48は、これを実現する方法として、リストを専用のタグで書くことを挙げています。H48は、次のようにも説明しています。

「見た目だけでリストにして、リストの関係を示さない場合、利用者が情報をたどりにくくなる場合がある。」（英語の原文を和訳）

その見た目だけの例として、行頭にアスタリスクを書き、brで区切る方法が挙げられています。「・」とbrで作る方法は、まさにこの形です。

すべての並びにタグが要るわけではない

反対に、H48には、こうも書かれています。

「すべてのリストにマークアップが必要なわけではない。たとえば、コンマで区切った項目を含む文には、リストのマークアップが要らないことがある。」（英語の原文を和訳）

文の中の列挙は、文のままで構いません。たとえば「お持ちいただくものは、予約票と身分証です」という文を、わざわざ2項目のリストに直す必要はありません。

並びにするかを決める表

内容	並びにするか	理由
同じ形の項目が3つ以上並ぶ	する	読み手が見渡せる。タグで項目の区切りも伝わる
項目が2つだけで、短い	文のままでもよい	文の中の列挙で足りる
項目が1つだけ	しない	並びにならない。文で書く
1項目が何行にもなる長い説明	見出しと段落にする	箇条書きの利点が薄れる
項目同士に順序がある	olにする	順序を入れ替えると意味が変わる

画像の中の箇条書きは読み取れない

箇条書きを画像にして貼る方法もあります。デザインの見栄えは作りやすい方法です。

ただし、画像の中の文字は、テキストではありません。Googleは、AI機能で表示されるための基本として、次のように述べています。

「重要なコンテンツはテキスト形式で提示します。」

箇条書きの内容が大事な情報なら、テキストとulで書きます。画像を使うなら、同じ内容をテキストでも載せます。

手順はolで書く：手順記事への送り先

箇条書きの中でも、手順の並びは順序に意味があります。olで書く場面です。

手順を番号付きのリストで書くときの考え方は、ハウツー記事（手順記事）の書き方｜番号付きリスト・結果の書き方・公開前チェックリストで扱っています。コードや設定値を画像にせず、コピーできる形で載せるという考え方も、そちらに書いています。

この記事では、olの書き方そのものには深入りしません。ulとolを選び分ける判断までを扱います。

基本の書き方と、見た目はCSSで決めるという線引き

ここまでの決まりを、実際の書き方にします。基本の形は、ulの中にliを並べるだけです。

<ul>
  <li>予約票</li>
  <li>身分証</li>
  <li>筆記用具</li>
</ul>

見た目を変えたくなったときは、CSSで指定します。ulやliのタグを増やす必要はありません。次の節から、よくある場面を順に扱います。

点を消す・付け替える：見た目はCSSで決める

ulの点を消したい、横に並べたい、という要望は、制作の現場でよく出ます。どれもCSSの仕事で、ul要素そのものは変わりません。

点を消す書き方と、その後に残るもの

点を消すには、ulに list-style を none と指定します。余白も消したいときは、margin と padding を0にします。

ul { list-style: none; margin: 0; padding: 0; }

この指定を付けて測ると、liの左端が0pxの位置に来て、点の表示は消えました。標準の左の字下げ40pxも、消えます。

消したあとも、ulはリストのままです。Chromium 145 で書き出すと、点を消したulも、リストの中に3つの項目がある形で出ました。見た目だけが変わって、中身の役割は変わっていません。

ただし、この結果はChromium 145 で確かめた範囲です。ほかのブラウザや読み上げソフトでの扱いは、今回は測っていません。

点の形を変える

点の形は、list-style-type で変えられます。黒丸の disc、白丸の circle、四角の square、番号の decimal などが指定できます。

ulの標準の点は、入れ子の段数で変わります。1段目が黒丸、2段目が白丸、3段目が四角でした。段ごとの標準を知っておくと、自社サイトで点の形が段によって違うのは、ブラウザの標準の動きだと分かります。

横並びにしたときに点が消える原因

ulを横に並べたいとき、よく使うのが display を flex にする方法です。このとき、どこに指定するかで結果が変わります。

指定した場所	liの display の計測値	点は出るか
ulに display: flex	list-item のまま	出る
liに display: flex	flex に変わる	出なくなる

点が出るのは、liの display が list-item のときです。liに flex を指定すると、list-item ではなくなるので、点が付かなくなります。

横並びにしたら点が消えた、という場合は、liに flex を指定していないかを見ます。点が要るなら、ulに指定します。点が要らないなら、list-style を none にしておきます。

横並びの作り方は、別の記事へ

デザインの話は、この記事の範囲から外れるので、これ以上は深入りしません。divで横並びを作る場合の考え方は、divタグの使い方 横並びと中央寄せの書き方と意味を持つタグとの使い分けで扱っています。

ナビゲーションのulとliを省くとどうなるか

最初に紹介した質問に戻ります。navの中で、ulとliを省いて、aだけを並べたらどうなるかです。

Chromium 145 で、2つの書き方を書き出して比べました。

書き方	書き出された役割
nav の中に ul と li と a	ナビゲーションの中に、リストがあり、項目が2つ、それぞれにリンク
nav の中に a だけ	ナビゲーションの中に、リンクが2つ

どちらも、ナビゲーションの中のリンクとして書き出されました。違うのは、リストの階層があるかどうかです。

W3Cの技術文書H48は、リンクをulとliでまとめると、読み上げソフトの利用者が、リストの最後まで飛ばしたり、次のリストへ移ったりできる、と説明しています。リンクが多い案内ほど、この利点が働きます。

リンクが2つか3つなら、省いても困りません。5つ以上並ぶ案内なら、ulとliで組むほうが、読み手の助けになります。この基準は弊社の整理で、仕様やW3Cが数を定めているわけではありません。

質問の回答で言われていた「検索のロボットがまとまりとして認識する」という点は、公式に記載が見つかりませんでした。読み上げソフトの側の利点は確かめられましたが、検索の側は確かめられていません。

入れ子のリスト

リストの中に、さらにリストを入れたい場面があります。項目の下に細かい項目がぶら下がる形です。

正しい入れ子は、liの中にulを置く

入れ子は、liの中に別のulを置いて作ります。ulの直下に置くのは誤りです。

W3Cの検査サービスで、2通りを比べました。

書き方	検査サービスの結果
ulの中のliの中に、別のulを置く	エラーなし
ulの直下に、別のulを置く	エラー
ulの中のliの中に、olを置く	エラーなし
ulの中のliの中に、dlを置く	エラーなし

ulの中にolを置くことも、dlを置くことも、liの中なら構いません。たとえば、持ち物の項目の下に、手順を番号付きで入れることもできます。

ulの直下にulを置く誤りは、ブラウザで測ると、子が「li・ul・li」と並んだままになりました。ブラウザは、これをそのまま表示するので、表示を見ただけでは気づけません。

点の形が段ごとに変わる

入れ子にしたリストの点は、標準で段ごとに変わります。1段目は黒丸、2段目は白丸、3段目は四角です。上下の余白は、入れ子の中では0になります。

字下げは、段ごとに40pxずつ増えます。3段、4段と深くなると、右に寄って、文字が窮屈になります。

深さと項目数の目安は公式にない

何段まで入れ子にしてよいかを、仕様は定めていません。ul要素の定義にも、li要素の定義にも、深さの上限は書かれていません。

ただ、読み手の側から考えると、3段を超えると追いにくくなります。ここは弊社の考えです。深くなりそうなら、見出しで節を分けるか、表にします。

表にするかどうかの判断は、テーブルタグとは 書き方と見出しセルの付け方 表を読み違えさせない手順で扱っています。

WordPressのリストブロックと、弊社の書き方

WordPressでは、箇条書きをブロックエディタのリストブロックで作ります。HTMLを直接書かなくても、ulやolが出力されます。

リストブロックの設定

WordPressの公開ソースコードのうち、リストブロックの設定ファイルを2026年11月9日に開いて確かめました。分かったことは、次のとおりです。

確かめたこと	設定ファイルの内容
出力するタグ	olまたはul。選択は「順序つき」の設定で切り替わる
順序つきのときの追加の設定	開始番号、逆順、番号の種類
項目の置き方	項目は専用の「リスト項目」ブロックで、親はリストブロック
入れ子の作り方	リスト項目ブロックの中に、リストブロックを置ける
見た目のスタイル名	wp-block-list

設定ファイルの内容と、仕様の決まりは、一致していました。リスト項目の中にリストを置く形は、先の「liの中にulを置く」という正しい入れ子と同じです。

実際にサイトで出力されるHTMLは、テーマによって、classなどが付く場合があります。この記事では、出力されたHTMLそのものは確かめていません。

弊社の記事は、ブロックを通さず投稿している

弊社の記事は、リストブロックを通さず、HTMLを直接投稿する形で作っています。このため、ulやolやliに、classなどの属性は付いていません。

公開している記事の本文で、wp-block-list という名前のclassは見つかりませんでした。

自社サイトのリストの見た目は、テーマ側のCSSが決めています。記事の側では、ulとliだけを書いて、見た目は指定していません。

自社のサイトで出力を確かめる手順

自分のページで、リストのHTMLが何になっているかを確かめるには、ブラウザの開発者ツールを使います。

手順は、リストの部分を右クリックして「検証」を選び、出てきたHTMLを見るだけです。ulの中にliが並んでいるか、ulの直下に文字やdivが混ざっていないかを見ます。

W3Cの検査サービスにページのアドレスを入力すると、「ulの中に文字は置けない」といったエラーも拾えます。

弊社の公開記事で数えたul

ここまでの決まりを、自社の記事に当てはめて数えました。弊社の公開記事で、リストがどう使われているかの実測です。

調べ方

2026年11月9日に、弊社サイトの公開記事を新しい順に50本取得しました。公開日は、2026年11月5日から8日までです。

取得は、WordPressの公開されている取得の仕組みで、1回のリクエストで行いました。記事の本文のHTMLから、図のSVGを除き、ul・ol・dl・liの数を数えました。

数えた結果

数えたもの	結果
取得した記事	50本
ulかolを使っていた記事	49本
ulの数	179個
olの数	25個
dlの数	0個
liの数	815個
1つのリストの項目数の平均	約4.0個
項目が3つのリスト	93個
項目が2つ以下のリスト	19個
項目数の最大	13個
入れ子のリスト	0個
リストの中のリンク	21個
classなどの属性が付いていたul・ol・li	0個

数字の読み取り方

50本のうち49本が、箇条書きを使っていました。弊社の記事では、箇条書きは当たり前の部品です。

dlは1つもありませんでした。名前と説明の組を、表で書いている記事が多いためと考えられます。ここは弊社の推測です。

入れ子のリストも、1つもありませんでした。階層は、見出しで節を分けて表している形でした。

項目が2つ以下のリストが、19個ありました。この記事の「そもそも並びにするか」の基準に当てはめると、文に戻せるか見直す余地があるリストです。弊社の記事にも、直せる箇所が残っていたことになります。

取得したのは、新しい順の50本だけです。サイト全体の数字ではありません。

SEOとAI検索では、公式に何と書いてあるか

ulを使うかどうかが、検索やAI検索に影響するのか。公式の文書を、2026年11月9日に開いて確かめました。

Google 検索セントラルの「AI機能とウェブサイト」

このページは、最終更新が2025年12月31日です。次のように書かれています。

「AI による概要や AI モードにコンテンツが表示されるための追加の要件はなく、別途特別な最適化を行う必要もありません。」

基本のSEOとして、次の項目が挙げられています。

「重要なコンテンツはテキスト形式で提示します。」

ulで書いた箇条書きの文字は、テキストです。画像の中の文字とは違い、この項目を満たします。ただし、ulで書いたから、AIに引用される、とは書かれていません。

SEOスターターガイド

SEOスターターガイドは、最終更新が2025年12月18日です。HTMLの意味づけについて、見出しを例に、次のように書かれています。

「Google 検索が HTML 規格に潜むセマンティックスの意味に依存することはめったにありません。」

この文は、見出しの話の中にあります。リストの話としては、書かれていません。スターターガイドに、ulやolを名指しした記述は見つかりませんでした。

OpenAIとAnthropicの公式文書

OpenAIの、クローラーに関する文書には、OAI-SearchBot と GPTBot などの、ロボットの名前と役割が書かれています。

Anthropicの、クローラーに関するヘルプにも、ClaudeBot や Claude-SearchBot などの役割が書かれています。

どちらの文書にも、ulなどのHTMLの要素の使い方に触れた記述は、見つかりませんでした。

確かめられた範囲を表にする

資料	ulの使い方との関係
HTMLの仕様（WHATWG）	順序が重要でない項目の並びに使う。子はliだけ
WCAG 2.2、H48	見た目の箇条書きは、タグでも伝える。文中の列挙は不要なこともある
検索セントラル（AI機能）	特別な最適化は不要。重要な内容はテキストで。ulは記載なし
検索セントラル（SEOスターターガイド）	意味づけに頼ることはめったにない。リストは記載なし
OpenAIとAnthropicの文書	公式に記載なし

公式の記述を、書き方に当てはめる

ここは弊社の整理です。

公式が求めているのは、重要な内容をテキストで置くことです。その内容を、ulで組むかどうかは、公式の関心の外にあります。

ulを使う理由は、読み上げソフトの利用者と、直す人にあります。項目の区切りが機械にも伝わり、あとから項目を足したり入れ替えたりしやすくなります。

検索やAIの引用は、その理由に入りません。

ulを置く前の4つの問い

ここまでの内容を、実務で使える4つの問いにまとめます。箇条書きを書くときに、順番に確かめます。

問い1：並びにする内容か

項目が3つ以上あり、同じ形で並ぶなら、並びにします。2つ以下か、文の中の列挙で足りるなら、文のままにします。

問い2：順序を入れ替えて意味が変わるか

変わるならolです。変わらないならulに進みます。

問い3：名前と説明の組になっているか

組になっているなら、dlを検討します。単なる項目の並びなら、ulのままにします。

問い4：子はliだけになっているか

ulの直下に、文字やdivやulを置いていないかを確かめます。入れ子にするときは、liの中にulを置きます。

4つの問いの判定表

問い	はいのとき	いいえのとき
並びにする内容か	次の問いへ	文のままにする
順序を入れ替えて意味が変わるか	olにする	ulに進む
名前と説明の組か	dlにする	ulにする
子はliだけか	そのまま	liの中に入れ直す

書き直しの例

質問者の案内を例に、書き直しを示します。

直す前は、nav の中に、リンクが並んでいるだけの形です。リンクが6つあるので、ulとliで組み直します。

直した後は、nav の中に ul を置き、1つのリンクごとにliで包みます。見た目は、CSSで点を消し、横に並べます。

ulの直下にあった文字は、liの中に移します。入れ子が必要なら、liの中にulを置きます。

チームで決めておくとよいこと

制作会社や社内の担当者と、決めておくとよいことがあります。

決めること	決め方の例
リストの標準の点	黒丸にするか、消してCSSで付け直すか
項目の最少数	3つ以上にする。2つ以下は文に戻す
順序のある並び	必ずolで書く
入れ子の深さ	2段までにする。それ以上は見出しで分ける
点を消したときの確認	ブラウザの開発者ツールで、リストのままかを見る

よくある質問

Q1. ulタグとは何ですか

順序が重要でない項目の並びを表す要素です。入れ替えても、文書の意味が変わらない並びに使います。

点が付くのは、ブラウザが標準で付ける見た目です。定義には含まれません。

Q2. ulタグとliタグは、どう組み合わせますか

ulの中に、liを並べます。ulの直下に置けるのは、liだけです。

liの中には、文字のほかに、段落やdiv、別のリストも置けます。入れ子にするときは、liの中に別のulを置きます。

Q3. liタグの中にdivを入れてもよいですか

入れてかまいません。liの中身はフローコンテンツで、divも置けます。W3Cの検査サービスでも、エラーは出ませんでした。

反対に、ulの直下にdivを置くのは誤りです。1段違うだけで、可否が変わります。

divの使い方は、divタグの使い方 横並びと中央寄せの書き方と意味を持つタグとの使い分けで扱っています。

Q4. ulタグとolタグの違いは何ですか

順序に意味があるかどうかです。入れ替えて意味が変わるならol、変わらないならulです。

olには、数え方を指定する属性があります。逆順の reversed、開始番号の start、番号の種類の type です。

Q5. ulタグを使うと、SEOやAI検索に有利になりますか

公式の文書に、記載が見つかりませんでした。

Googleは、重要なコンテンツをテキストで出すことを求めています。ulで書いた文字もテキストなので、その点に影響はありません。

まとめ：並びのタグは、置く前に4つ問う

ul要素は、順序が重要でない項目の並びを表します。点は標準の見た目で、定義には含まれません。

ulの直下に置けるのは、liだけです。ブラウザは仕様に合わない書き方も表示するので、合っているかは検査サービスで確かめます。

liの中には、段落もdivも、別のリストも置けます。入れ子は、liの中にulを置いて作ります。

順序に意味があればol、名前と説明の組ならdlを選びます。そもそも項目が少ないなら、文に戻す判断もあります。

「・」とbrで作った並びは、ブラウザの内部ではリストになりません。見た目が同じでも、読み上げソフトに渡る情報が変わります。

弊社の記事では、50本のうち49本が箇条書きを使っていました。項目が2つ以下のリストが19個あり、直せる箇所が残っています。

今日できる点検

点検すること	確かめ方	直し方
「・」とbrで作った箇条書きがないか	ページのソースで、行頭の「・」を探す	ulとliで組み直す
ulの直下に、文字やdivがないか	W3Cの検査サービスに通す	liの中に入れ直す
順序のある手順が、ulで書かれていないか	手順や順位の並びを探す	olに変える
項目が2つ以下のリストがないか	ソースでliの数を見る	文に戻す
点を消したあと、リストのままか	開発者ツールで、ulとliが残っているか見る	ulとliを残して、CSSで消す
箇条書きが画像になっていないか	ページ内の画像を見る	テキストとulで書き直す

ページを増やしても問い合わせが来ないなら、原因はページの外にあります。その場合は、下の入口からご相談ください。