htmlタグ｜nav（ナビ）・menu（メニュー）｜command（廃止）

ホームページ（ウェブサイト）制作において、ユーザーが目的のページへ迷わずたどり着けるように案内（ナビゲーション）を整えることは、使いやすさを高める上で非常に重要です。このサイト内の案内板としての役割を検索エンジンやブラウザに正しく伝えるために使用されるのが、HTMLの「nav」タグと「menu」タグです。

「nav」タグは「navigation」の略であり、ページ内の主要なナビゲーションリンクのまとまりを示すために使用します。例えば、全ページに共通して表示されるグローバルナビゲーション（メインメニュー）や、現在の位置を示すパンくずリスト、ページ内の目次などがこれに該当します。すべてのリンクを「nav」タグで囲む必要はなく、サイトの骨格となる重要なリンク群に対してのみ使用することが正しいルールです。

一方、「menu」タグはHTMLの仕様変更の中で扱いが大きく変わってきた歴史を持っています。かつては、ユーザーが右クリックした際などに表示される操作メニュー（コンテキストメニュー）やツールバーを構築するためのタグとして定義されていました。しかし、ブラウザ側の対応が進まず廃止扱いとなった時期を経て、現在のHTML標準規格においては、単純な順序なしリスト（ulタグとほぼ同じ役割）として再定義されています。そのため、現代の一般的な制作現場では、ナビゲーションメニューを作成する際は「nav」タグの中に「ul」タグを配置してリスト化するマークアップが主流となっています。

また、かつての仕様では「menu」タグの中で個別の操作（ボタンやチェックボックスなど）を定義するために、「command」という専用のタグも提案されていました。しかし、この「command」タグも主要なブラウザでの実装が進まず、現在のHTMLの標準規格からは完全に廃止されています。ユーザー向けの高度な操作メニューを実装する場合は、これらの廃止されたタグに頼るのではなく、標準的なHTMLタグにJavaScriptとCSSを組み合わせて構築するのが現在の適切な手法です。

「nav」タグを意味（セマンティクス）通りに適切に配置することは、SEO（検索エンジン最適化）とWebアクセシビリティに大きな効果をもたらします。検索エンジンのクローラーは、このタグを手がかりにしてサイトの階層構造や重要なページを効率的に把握します。また、音声読み上げソフト（スクリーンリーダー）を利用しているユーザーに対しても、ここが主要なメニュー領域であることを明確に伝達できます。適切なマークアップによる分かりやすいサイト構造は、ユーザーの回遊率を高め、事業用ホームページ（ウェブサイト）の集客力を底上げします。

nav（ナビ）

<nav></nav>

ホームページ制作（ウェブサイト制作）の際に使用する<nav>タグについてのご説明です。

ホームページ制作における<nav>（ナビ）タグは、<nav>タグで囲われた部分が、ホームページ（ウェブサイト）のナビゲーションであることを示します。

<nav>  ナビゲーション

<nav>タグは、ウェブサイトのナビゲーション（navigation、サイト内の内部リンク・ページ内リンク）であることを示します。ホームページ制作において、該当部分がグローバルメニューなどの「ナビゲーション」であることを示す場合に使用します。

セマンティックHTML Webページの論理構造の明確化で「意味」を構築

ホームページ制作実務では主要なナビゲーションに使用

<nav>タグは、主要なナビゲーションとなるセクションのみを示すのに適しています。ホームページ制作実務では主要なナビゲーションに使用する場合がほとんどです。

なお、ナビゲーションのリンクの設置は<a>（アンカー）を使用します。

navタグによるナビゲーションの明示がもたらすクローラビリティとサイト構造の最適化

ホームページ（ウェブサイト）制作において、navタグはサイト内の主要な移動導線（リンクの集まり）を定義するための重要な要素です。より専門的には、汎用的なdivタグによるレイアウトと区別し、該当エリアが「サイトを回遊するための案内所」であることを検索エンジンへ明確に伝える、セマンティックHTMLの代表的なタグです。適切なナビゲーションの配置は、ユーザーの利便性を高め、効率的なSEO対策を推進するために非常に重要です。

主要な導線の厳選と検索エンジンへのシグナル伝達

ホームページ（ウェブサイト）内には、ヘッダーのグローバルメニューをはじめ、サイドバーのカテゴリー一覧、フッターの各種リンク、ページネーションなど、多くのリンク群が存在します。しかし、ページ内のすべてのリンクエリアにnavタグを使用すれば良いというわけではありません。このタグは、あくまで「サイト内の主要なナビゲーション」に限定して使用することが推奨されます。

たとえば、ヘッダー内のメインメニューや、広大なサイトにおけるパンくずリストなど、ユーザーが目的のページへたどり着くために頻繁に利用する重要なセクションに絞ってnavタグを配置します。これにより、検索エンジンのクローラーはサイト内の重要な移動ルートを正確に把握できるようになり、重要なページへ効率よくリンクの評価（リンクジュース）が引き継がれるようになります。この適切な棲み分けが、ホームページ（ウェブサイト）全体のインデックス精度を向上させます。

ユーザビリティ向上とアクセシビリティへの配慮

navタグによるマークアップは、音声読み上げソフト（スクリーンリーダー）を使用しているユーザーにとっても大きなメリットをもたらします。多くの読み上げソフトには、ページ内の主要なナビゲーションエリアを一足飛びにジャンプしてスキップできる機能が備わっています。

もし、すべてのメニューがdivタグだけで記述されていると、ユーザーは別のページへ移動するたびに、ヘッダー内にある長いメニュー項目を最初から最後まで何度も聴き直さなければならず、大きなストレスを与えてしまいます。構造的に正しいタグを選択し、ユーザーが快適にサイト内を回遊できるアクセシビリティを確保していくことが、直感的な使いやすさを生み出します。こうしたユーザーファーストのウェブデザインを徹底していくことが、直近の直帰率の改善や、最終的な事業成果（コンバージョン）の獲得を力強く支える土台となります。

<nav></nav>

ホームページ制作・SEOの1ポイント

ホームページに設置するナビゲーションにはその役割や設置場所によって様々な呼称があります。内部リンクを充実させることはSEOとしてもクローラビリティを向上させることになり、プラスに働きますが、重要なページがどのページかを示すためにも、適切に使用する必要があります。

該当セクションのリンクがナビゲーションであることを検索エンジンに示すことで、SEO対策のひとつとしてコンテンツ内のナチュラルリンクとの棲み分けを示すことにもつながるでしょう。

menu（メニュー）

<menu></menu>

ホームページ制作（ウェブサイト制作）の際に使用する<menu>タグについてのご説明です。

ホームページ制作において<menu>（メニュー）タグは、メニューリストを設置する場合に使用します。

<menu> メニューリスト

<menu>タグは、メニューリストを定義します。ブラウザ上での表示は<ul>と同様です。メニュー。ホームページ制作においてメニューのリストを設置する時に使用します。

「menu」タグは、非常に複雑な変遷をたどってきた特異な存在です。HTMLの規格が進化する過程で、このタグは何度も役割を変え、一時は廃止の危機に直面しながらも現在の形に落ち着きました。本ページでは、かつて高度な操作メニューを構築するために期待されながらも普及しなかった背景と、現代の標準規格においてどのように再定義されているのかを詳しく解説します。過去の仕様と現在のルールを正しく理解することは、適切なマークアップに基づく質の高い情報発信に役立ちます。

操作メニューから順序なしリストへの劇的な変化

「menu」タグの歴史は、ブラウザ上でネイティブアプリのような高度な操作性を実現しようとした開発者たちの試行錯誤の歴史でもあります。当初期待されていた機能がなぜ実装されず、現在のようなシンプルな役割へと変化したのか、その過程を紐解いていきます。

コンテキストメニュー構築の試み

HTML5の策定段階において、「menu」タグは非常に野心的な役割を担っていました。ユーザーが画面上で右クリックした際に表示される独自の操作メニュー（コンテキストメニュー）や、画面上部に固定されるツールバーを、JavaScriptに頼り切ることなくHTMLのタグだけで構築しようという試みです。

事業用のホームページ（ウェブサイト）上で専用の右クリックメニューを提供できれば、Webアプリケーションとしての利便性が飛躍的に向上すると期待されていました。この機能を実現するために「menuitem」という専用の要素も用意され、次世代のインターフェース設計の中心になると考えられていました。

ブラウザ対応の壁と機能の廃止

しかし、この高度なメニュー機能は世界標準として定着しませんでした。各ブラウザの開発元で仕様の解釈や実装方法の足並みが揃わず、一部のブラウザが実験的に対応したのみで、主要なブラウザでのサポートが進まなかったためです。Web標準の技術は、すべての環境で等しく動作することが大前提です。一部の環境でしか機能しないタグは実用性に乏しく、やがてこのコンテキストメニューとしての仕様は公式に廃止扱いとなりました。複雑な機能はHTML単体で用意するのではなく、JavaScriptとCSSを組み合わせて柔軟に構築するという、現代の主流な開発スタイルへと収束していきました。

現在の仕様における再定義と実務での扱い

その後、現在の世界的なHTML標準規格（HTML Living Standard）において、「menu」タグは全く新しい役割を与えられて再定義されました。現在では、「ul」タグとほぼ同じ役割を持つ「順序なしリスト」として扱われます。より専門的には、「ul」タグが単なる項目の羅列を示すのに対し、「menu」タグは「ユーザーが操作可能なコマンドのリスト（ツールバーのボタン一覧など）」を示す際に使用するという意味的な違いが設定されています。

しかし、画面上の表示結果やブラウザの挙動は「ul」タグと全く同じです。そのため、現代の一般的なホームページ（ウェブサイト）制作の現場では、ナビゲーションやボタンのリストを作成する際も、従来通り「nav」タグと「ul」タグの組み合わせを採用することが主流となっています。「menu」タグの歴史を知ることは、HTMLがどのようにブラウザの進化と歩調を合わせてきたかを理解する上で非常に重要です。

<menu></menu>

ホームページ制作・SEOの1ポイント

非推奨要素を使用しているからといって、それが即座にSEOにマイナスに働くわけではありません。しかしなるべく正規のマークアップをしておいたほうが、ブラウザ描画のズレのリスクを軽減することができます。ただ、後から再定義されて復活することもあります。

command（コマンド）（廃止）

<command></command>

ホームページ制作（ウェブサイト制作）の際に使用する<command>タグについてのご説明です。

ホームページ制作において<command>（コマンド）タグは、<menu></menu>の中に配置することによって、ウェブサイト・ホームページの操作メニューの各コマンドを指定します。

<command>  操作メニューの各コマンドを指定

<command>タグは、ウェブサイト・ホームページの操作メニューの各コマンドを指定します。この<command>は、<menu></menu>の中に配置します。
すなわち、<menu>で全体が操作メニューであることを定義して、その子要素として<command>を配置してユーザーが呼び出すことのできる各コマンドを指定します。

label

コマンドに項目名（ラベル）をつけます。必須属性のため、空文字を指定することはできません。

label=””

type

コマンドの種類を指定。
初期値（無指定）はcommand。

type=””

command

通常のコマンド

checkbox

選択式

radio

択一式

checked

コマンドを選択した状態にします

typeがcheckbox、radioの場合に指定可能

checked=””

icon

コマンドを表す画像を指定

icon=””

disabled

コマンドを使用不能の状態にします

disabled=””

radiogroup

コマンドグループに名前を付けます（type=”radio”の時に指定可）

radiogroup=””

title

コマンドのヒントを提供します

title=””

<command></command>

老朽化したHTMLの修正と最新標準への移行について

これまで解説してきたような非推奨の古いHTMLの記述は、現在のブラウザ環境で正しく表示されないリスクがあるだけでなく、検索エンジンに対する情報の伝達を阻害し、SEO評価にも悪影響を及ぼす可能性があります。

ホームページ（ウェブサイト）を安定して運用していくためには、HTML Living Standardなどの最新規格に沿ったセマンティックなマークアップへ書き換えることが重要です。長年運用されてきた静的サイトの魅力やコンテンツの印象はそのまま残しつつ、保守の負担を軽減する次世代のマークアップへ一括で変換することで、中長期的なサイト運用が安定します。

古く老朽化したHTMLホームページの修正方法

ホームページ制作・SEOの1ポイント

「メニューの中のコマンド」といったように、親要素と子要素がセットになっているタグが幾つかあります。ホームページ制作時に、これら親子の配置の順番を間違えると、うまく機能しない場合がありますので、注意が必要です。もちろん親要素だけ、子要素だけといった場合でも機能しません。実際に表示されるホームページを確認して挙動がおかしい場合は、HTMLのタグの必須条件を確認し親子関係の順序などを再確認してみましょう。

ホームページ（ウェブサイト）制作・作成に役立つHTMLタグ一覧は
⇒html5 tag reference index ホームページ制作の基本タグ

ホームページ（ウェブサイト）のHTML編集方法

ホームページのHTML編集方法について。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ制作・作成、ホームページ修正の基本はこのHTMLとCSSの編集で行います。

ホームページのHTML編集方法