Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

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

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

作成日: 更新日:

基本的な使い方

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)

戻り値なし

戻り値はありません

関連コンテンツ