HTML navとul・liの関係｜正しいメニュー構造を初心者向けにやさしく解説
生徒
「HTMLのnavタグって、ulやliと一緒に使うって聞いたんですが、どうしてなんですか？」
先生
「navタグはナビゲーション専用の入れ物で、その中身を分かりやすく並べるためにulとliを使うんです。」
生徒
「aタグだけを並べるのと何が違うんですか？」
先生
「人にも検索エンジンにも、これはメニューの一覧だと正しく伝えられる点が大きな違いですよ。」
1. HTML navタグとは何か
navタグは、Webページの中でナビゲーションを表すためのHTMLタグです。ナビゲーションとは、ページ移動のための案内板のような存在で、トップページへのリンクやカテゴリ一覧などが該当します。navタグを使うことで、ここは移動用の重要なリンク集であると明確に示すことができます。
2. ulとliが持つ本来の役割
ulタグは複数の項目をまとめるためのタグで、liタグはその中の一つ一つの項目を表します。買い物リストや手順書のように、順番やまとまりがある情報を表現するのが得意です。メニューは複数のリンクを一覧で並べるため、この構造がとても相性が良いのです。
3. navとul・liを組み合わせる理由
navタグだけでは、中に何が並んでいるのかまでは分かりません。そこでulとliを使うことで、これはリンクの一覧であり、メニュー構造であると明確に伝えられます。これは人だけでなく、検索エンジンや音声読み上げソフトにも理解しやすい構造になります。
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
4. aタグだけを並べた場合との違い
aタグだけを横に並べても見た目はメニューになりますが、構造としては単なるリンクの集合になります。ulとliを使わない場合、どこまでが一つのメニューなのかが分かりにくくなります。正しい構造を使うことは、後から見たときの理解のしやすさにもつながります。
<nav>
<a href="#">ホーム</a>
<a href="#">サービス</a>
<a href="#">お問い合わせ</a>
</nav>
5. 正しいメニュー構造の基本形
基本的なメニュー構造は、navの中にulがあり、その中に複数のliが並ぶ形です。各liの中にaタグを配置することで、自然で意味の通ったHTMLになります。この形を覚えておくと、多くのWebサイトで応用できます。
<nav>
<ul>
<li><a href="#">会社概要</a></li>
<li><a href="#">採用情報</a></li>
<li><a href="#">アクセス</a></li>
</ul>
</nav>
6. 複数のnavを使う場合の考え方
ページ内に複数のナビゲーションがある場合、それぞれ役割が違えばnavを分けて使います。例えば、ヘッダーメニューとフッターメニューは別のnavとして扱うことで、構造がより明確になります。ただし、装飾目的だけで増やさないことが大切です。
7. SEOとアクセシビリティへの影響
navとul・liを正しく使うことで、検索エンジンはページ構造を理解しやすくなります。また、画面を読み上げる支援技術でも、ここはメニューであると認識され、利用者が快適に操作できます。正しいHTMLは見えない部分でも大きな効果を発揮します。
8. 初心者がよく迷うポイント
すべてのリンクをnavで囲む必要はありません。ページ移動を目的とした主要なリンクだけが対象です。また、liの中に余計な要素を詰め込みすぎないことも重要です。基本構造を守ることで、読みやすく保守しやすいHTMLになります。
「意味」がわかればWebは楽しい！現役エンジニアが教える、挫折しないためのHTML構造化入門
「Webの仕組み」を正しく操る。HTML5でプロフェッショナルな情報設計の第一歩を。
本講座では、単なるタグの暗記ではなく、「検索エンジンやAIに正しく伝わる情報の構造化」という本質的な技術を学びます。モダンWebの土台であるHTML5を通じて、将来的にWebデザイナーやフロントエンドエンジニアを目指すための「稼げる基礎力」を最短距離で身につけます。
具体的なワークショップ内容と環境
【つくるもの】
自己紹介やポートフォリオの土台となる「構造化されたWebページ」を作成します。見出し、段落、リスト、リンク、画像配置など、商用サイトでも必ず使われる「セマンティックなマークアップ」をゼロから体験してください。
【開発環境】
世界中のプロが愛用するVisual Studio Code (VS Code)を使用します。Emmet（高速入力機能）の設定から、HTMLの文法ミスを自動チェックする拡張機能まで、現場基準の効率的な環境を一緒に構築します。
この60分で得られる3つの武器
Googleから高く評価されるタグの選び方を理解し、検索上位を狙えるサイト構造の作り方を学びます。
プロが使うショートカットや自動補完機能を習得し、タイピングの手間を最小限にする技術を体得します。
画像への代替テキストや適切な階層構造など、誰にとっても使いやすい「優しいWeb」の作り方を伝授します。
※本講座は、将来的にWebデザイナー、コーダー、フロントエンドエンジニアを目指す未経験者のためのエントリー講座です。「モクモク」独自のマンツーマン形式により、コードを1行書くたびに生まれる疑問をその場で解決します。
現役エンジニアが教えるHTML入門
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
