[51] [DFN[[CODE(HTMLe)@en[menu]]]] [[要素]]は、
[[メニュー]]を表します。

* 仕様書

[REFS[
- [33] [CITE@en-US-x-hixie[HTML Standard]] ([TIME[2016-12-30 01:07:24 +09:00]]) <https://html.spec.whatwg.org/#the-menu-element>
]REFS]

* 意味

[50] [CODE(HTMLe)@en[menu]] [[要素]]は、[[命令][命令 (HTML)]]の[[リスト]]を[[表現][要素の意味]]します [SRC[>>33]]。

[34] [CODE(HTMLe)@en[menu]] [[要素]]は、[[フロー内容]]です [SRC[>>33]]。

[35] [CODE(HTMLa)@en[type][<menu type>]] [[属性]]が[[ツールバー状態]]の
[CODE(HTMLe)@en[menu]] [[要素]]は、[[触知可能内容]]です [SRC[>>33]]。

* 構文

[43] [[開始タグ]]も[[終了タグ]]も[[必須]]です。

* 文脈

[36] [[フロー内容]]が認められる場所で使うことができます。

[37] [CODE(HTMLe)@en[menu]] [[要素]]の[[子要素]]として使うことができます。

* 属性

[44] [[大域属性]]の他、次の[[属性][内容属性]]があります。

[FIG(short list)[
- [CODE(HTMLa)@en[type][<menu type>]]
- [CODE(HTMLa)@en[label][<menu label>]]
]FIG]

[HISTORY[
,[CODE(HTMLa)[[[compact]]]]	,([[真偽値属性]])	,([[偽]])	,コンパクト表示	,[HTML4] 非推奨
,[CODE(HTMLa)@en[[[type]]]]	,	,	,	,非標準	,[Vodafone]
]HISTORY]

* 内容

[40] [CODE(HTMLe)@en[menu]] [[要素]]の[[内容]]は、
次の通り定められています [SRC[>>33]]。

[FIG(switch)[
: [38] [CODE(HTMLa)@en[type][<menu type>]] [[属性]]が[[ツールバー状態]] :
次のいずれか:
[FIG(list)[
- [41] 0個[[以上]]の、 [CODE(HTMLe)@en[li]] [[要素]]や[[スクリプト支援要素]]
- [42] [[フロー内容]]
]FIG]
: [39] [CODE(HTMLa)@en[type][<menu type>]] [[属性]]が[[ポップアップメニュー状態]] :
0個[[以上]]の、
[CODE(HTMLe)@en[menuitem]] [[要素]]や [CODE(HTMLe)@en[hr]] [[要素]]、
[CODE(HTMLa)@en[type][<menu type>]] [[属性]]が[[ポップアップメニュー状態]]の
[CODE(HTMLe)@en[menu]] [[要素]]、
[[スクリプト支援要素]]
]FIG]

* [CODE(DOMi)@en[HTMLMenuElement]] インターフェイス

[45] [CODE(HTMLe)@en[menu]] [[要素]]の[[要素インターフェイス]]は、
[DFN[[CODE(DOMi)@en[HTMLMenuElement]]]] です [SRC[>>33]]。

[46] [CODE(DOMi)@en[HTMLMenuElement]] [[インターフェイス]]は、
[[文書環境]]に[[晒され]]ています。

[47] [CODE(DOMi)@en[HTMLMenuElement]] [[インターフェイス]]は、
[CODE(xattr IDL)@en[HTMLConstructor]] を持ちます [SRC[>>33]]。
つまり[[カスタム化組み込み要素]]の[[基底]]として使えます。

[48] [CODE(DOMi)@en[HTMLMenuElement]] [[インターフェイス]]は、
[CODE(DOMi)@en[HTMLElement]] [[インターフェイス]]を[[継承]]しています [SRC[>>33]]。

[49] 加えて、次の[[メンバー][インターフェイスメンバー]]を持ちます。

[FIG(short list)[
- [CODE(DOMa)@en[type][<menu type>]]
- [CODE(DOMa)@en[label][<menu label>]]
]FIG]






** 代替

[5] この要素型は'''非推奨'''です [SRC[HTML 4]]。
代わりに [CODE(HTMLe)[[[ul]]]] 要素型を使うことができます
(要素型名を書き換えるだけで OK)。
特定のレンダリングが望ましければ、[[スタイル・シート]]で指定できます。

[[#comment]]


** 内容

[7] [CODE(HTMLe)[menu]] の内容は [CODE(HTMLe)[[[li]]]]
要素で、 [CODE(HTMLe)[li]] 要素1つが1つのメニュー項目を表します。

元々 [CODE(HTMLe)[menu]] は単一行のメニュー項目で構成されるリストですから、
[CODE(HTMLe)[menu]] の子供の [CODE(HTMLe)[li]]
の[[内容]]として[[ブロック水準要素]]を使うことはできません。

この制約は [[HTML 4]] などでは [ABBR[[[DTD]]] [文書型定義]]
で明示されていますが、 [[XHTML 1]] では曖昧
(または無記述) になっています。

[[#comment]]


** レンダリング

[3] HTML 4 仕様書が 
[Q[The [CODE(HTMLe)[MENU]] element was designed to be used for single column menu lists.]<IW:HTML4:"struct/lists.html#edef-MENU">]
と言っているように、 [CODE(HTMLe)[menu]] は[[物理要素]]であり、
特定のレンダリングを想定しています。

しかし、 [[Classic Mozilla]] や [[WinIE]] をはじめとして、
ここ数年のほとんどのブラウザは、 [CODE(HTMLe)[[[ul]]]] 
と同じようにレンダリングします。

[[#comment]]


** 他との関係

[6] 似たような要素型に [CODE(HTMLe)[[[dir]]]]
(ディレクトリ・リスト) と [CODE(HTMLe)[[[ul]]]] 
(順序なしリスト) があります。

[CODE(HTMLe)[dir]] は [CODE(HTMLe)[dir]] は
[CODE(HTMLe)[menu]] より更に簡潔に表示され得るリストですが、
[CODE(HTMLe)[menu]] と共に'''非推奨'''とされています。

[CODE(HTMLe)[ul]] は順序に深い意味がないリストのための汎用の要素型です。
[CODE(HTMLe)[menu]] や [CODE(HTMLe)[dir]] の代わりに
[CODE(HTMLe)[ul]] を用いるのが望ましいとされています。

* 歴史

** 誕生

[SEE[ [[リスト]] ]]

** HTML4

[1] [ABBR[[[HTML]]] [ハイパーテキスト・マーク付け言語]] の
[DFN[[CODE(HTMLe)[menu]] 要素型]]の要素 (menu list)
は、単一行表示の並びを表します。

この要素は HTML 4 では'''非推奨'''で、代わりに [CODE(HTMLe)[[[ul]]]]
を使うことが強く推奨されています。


[2]
:[[内容模型]]:[CODE(SGML)[([CODE(HTMLe)[[[li]]]])+]]
:出現できる文脈:[CODE(SGML)[%[[list]];]] な文脈

[REFS[
- [4] [[HTML 4]] <https://www.w3.org/TR/html4/struct/lists.html#edef-MENU>
]REFS]


-*-*-

[62] [CITE[Design Issues for HTML Forms]], [TIME[1999-02-04T17:41:10.000Z]], [TIME[2024-08-25T03:32:27.452Z]] <https://www.w3.org/TR/WD-forms-960308.html>



[FIG(data)[ [216] [[HTML要素概説]]

:[F[要素名]]:[CODE[menubar]]
:日付:[TIME[1995-03-08]]
:説明:
[TIME[1996-03-08]]付の [[W3C]] 文書で
[CODE[menubar]]
が提案されていた。
[CODE[select]]
を使ってメニューバーを表す。
:出典:
[REFS[

-
[CITE[Design Issues for HTML Forms]], 
[DATA(.author)[[[W3C]]]],
[DATA(.status)[[[Working Draft]]]],
[TIME(.published)[08-Mar-96][1996-03-08]],
[TIME[1999-02-04T17:41:10.000Z]], [TIME[2024-08-25T03:33:02.026Z]] <https://www.w3.org/TR/WD-forms-960308.html>

]REFS]

]FIG]



** HTML5

[9]
[CITE@ja[menu要素型とnl要素型とnav要素型 (kuruman.org > Kuruman Memo)]] ([CODE[2006-09-09 01:47:03 +09:00]] 版) <http://kuruman.org/diary/2007/06/07/menu-nl-nav>
([[名無しさん]] [WEAK[2007-06-09 15:23:16 +00:00]])

[10]
[CITE[TRANS - Re: Re: XHTML+CSS (r)evolution, 3rdの内容は信ずるに値するか?]] ([CODE[2007-06-06 22:35:42 +09:00]] 版) <http://d.hatena.ne.jp/aratako0/20070606/p1>
([[名無しさん]] [WEAK[2007-06-09 15:31:38 +00:00]])


[11]
>>9-10 [[HTML 5]] が [CODE(HTMLe)@en[[[menu]]]]
を再利用しているのに言及しないのは片手落ち。
([[名無しさん]] [WEAK[2007-06-09 15:35:40 +00:00]])

[12] [CITE[Re: Web Applications 1.0 and Menu Labels]] ([[Ian Hickson <ian@...>]] 著, [TIME[2008-11-18 07:54:59 +09:00]] 版) <http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/16632>

[13] [CITE@en[(X)HTML5 Tracking]]
([TIME[2009-08-23 15:53:44 +09:00]] 版)
<http://html5.org/tools/web-apps-tracker?from=2415&to=2416>

[14] [CITE[IRC logs: freenode / #whatwg / 20090808]]
([TIME[2009-10-06 23:37:54 +09:00]] 版)
<http://krijnhoetmer.nl/irc-logs/whatwg/20090808#l-302>

[15] [CITE[IRC logs: freenode / #whatwg / 20100413]]
([TIME[2010-04-28 00:16:26 +09:00]] 版)
<http://krijnhoetmer.nl/irc-logs/whatwg/20100413>

[16] [CITE[617528 – implement the HTML5 "context menu" feature (contextmenu attribute)]]
( ([TIME[2012-11-28 00:42:34 +09:00]] 版))
<https://bugzilla.mozilla.org/show_bug.cgi?id=617528>

[17] [CITE@en[Bug 13608 – Add <menuitem> element]]
( ([TIME[2012-11-28 00:44:02 +09:00]] 版))
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=13608>

[18] [CITE[''''''[''''''whatwg'''''']'''''' Menus and Toolbars]]
( ([TIME[2012-11-28 00:12:27 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-November/038140.html>

[19] [CITE[IRC logs: freenode / #whatwg / 20121129]]
( ([TIME[2012-12-09 19:48:18 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20121129>

[20] [CITE[IRC logs: freenode / #whatwg / 20121204]]
( ([TIME[2012-12-14 22:04:57 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20121204#l-1168>

-[21] [CITE@en[Web Applications 1.0 r7602       Grand <menu> revamp. Note: This patch includes parser changes.]]
( ([TIME[2012-12-29 10:23:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=7601&to=7602>
-- [63] 
[CITE@en['''['''acgiow''']''' (1) Grand <menu> revamp. Note: This patch includes parser ch…]], [[Hixie]], [TIME[2012-12-29 10:23:20 +09:00]], [TIME[2024-09-06T14:20:37.000Z]] <https://github.com/whatwg/html/commit/9e2e25f4ae90969a7c64e0763c98548a35b50af8#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947d>

[22] [CITE[''''''[''''''whatwg'''''']'''''' <menu> and friends]]
( ([TIME[2012-12-29 13:44:07 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-December/038472.html>

[23] [CITE@en[Web Applications 1.0 r7906     Better match the only existing implementation (Firefox).]]
( ([TIME[2013-06-05 07:02:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=7905&to=7906>

[24] [CITE[''''''[''''''whatwg'''''']'''''' <menu> and friends]]
( ([TIME[2013-07-23 23:19:18 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-July/040201.html>

[25] [CITE[IRC logs: freenode / #whatwg / 20130723]]
( ([TIME[2013-07-24 20:12:52 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20130723>

[26] [CITE[ncsa-mosaic/CHANGES at master · alandipert/ncsa-mosaic]]
( ([TIME[2014-04-07 05:41:34 +09:00]] 版))
<https://github.com/alandipert/ncsa-mosaic/blob/master/CHANGES#L1231>

[27] [CITE@en[Bug 22517 – replace the <menu> element with new <toolbar> and <popup> elements]]
( ([TIME[2014-05-01 12:31:29 +09:00]] 版))
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=22517>

[FIG(quote)[
[FIGCAPTION[
[28] [CITE[IRC logs: freenode / #whatwg / 20150606]]
([TIME[2015-06-07 12:32:48 +09:00]] 版)
<http://krijnhoetmer.nl/irc-logs/whatwg/20150606>
]FIGCAPTION]

> # '''['''02:26''']''' <JonathanNeal> After reviewing the ARIA roles for menu and menubar, I don’t understand the usecase for menubar. That it would be laid horizontally seems moot to its purpose. Can someone explain its purpose?
> # '''['''05:51''']''' <deltab> JonathanNeal: I guess it's because 1) orientation affects which cursor keys you use; 2) a menubar usually has a dedicated space whereas other menus are transitory; 3) a menu typically will take keyboard input automatically when visible, whereas activating a menubar's options needs another step

]FIG]


[29] [CITE@en[22517 – replace the <menu> element with new <toolbar> and <popup> elements]]
([TIME[2015-09-02 13:56:23 +09:00]] 版)
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=22517>

[30] [CITE@en[Rename <menu type=popup> to <menu type=context> · whatwg/html@b00d85b]]
([TIME[2015-11-11 22:31:57 +09:00]] 版)
<https://github.com/whatwg/html/commit/b00d85bd72c1582840f820ffd54161afbf232e16>

[FIG(quote)[
[FIGCAPTION[
[31] [CITE@ja[年賀状のサルを12年前と比べてみたら...デザイナーは同じ人、ヒツジでも話題に]]
([TIME[2015-12-31 14:22:05 +09:00]] 版)
<http://www.huffingtonpost.jp/2015/12/30/new-years-card-monkey-2004-and-2016_n_8893298.html>
]FIGCAPTION]

> 
> 	<menu class="editions inner off">
> 		<ul>
>                      <li>
> 			      <a href="http://www.huffingtonpost.com/?country=AR">
> 				       <span>عربي (Arabic) </span> <strong>AR</strong>
> 			            </a>
> 			</li>
>                                           <li>
> 				<a href="http://www.huffingtonpost.com/?country=AU">
> 					<span>Australia</span> <strong>AU</strong>
> 				</a>
> 			</li>

]FIG]


[32] [CITE@en[Fix #234: Change <menuitem> from void to like-<option> · whatwg/html@5e49a20]]
([TIME[2016-04-16 20:59:18 +09:00]] 版)
<https://github.com/whatwg/html/commit/5e49a20874fabef620bf7ea0be7534c73fbd58c4>

[52] [CITE@en[Remove <button type=menu>]]
([[domenic]]著, [TIME[2017-02-09 23:55:10 +09:00]])
<https://github.com/whatwg/html/commit/916e1b9f6bea48cb117ddd056ea025adaa629384>

[53] [CITE@en[87553 - Implement HTML5 context menu - chromium - Monorail]]
([TIME[2017-06-02 21:12:12 +09:00]])
<https://bugs.chromium.org/p/chromium/issues/detail?id=87553&desc=2>

[54] [CITE@en[Remove <menuitem> and context menu specs · Issue #2730 · whatwg/html]]
([TIME[2017-06-02 21:13:02 +09:00]])
<https://github.com/whatwg/html/issues/2730>

[55] [CITE@en[Remove the context menu feature]]
([[domenic]]著, [TIME[2017-06-09 03:16:29 +09:00]])
<https://github.com/whatwg/html/commit/e7e8c88ecdd7cdc96171f05ab6fe23b56dd48d8a>

[56] [CITE@en[87553 - Implement HTML5 context menu - chromium - Monorail]]
([TIME[2017-06-14 12:01:38 +09:00]])
<https://bugs.chromium.org/p/chromium/issues/detail?id=87553&desc=2>

[57] [CITE@en[87553 - Implement HTML5 context menu - chromium - Monorail]]
([TIME[2017-06-14 12:01:19 +09:00]])
<https://bugs.chromium.org/p/chromium/issues/detail?id=87553&desc=2>

[58] [CITE@en[Dev edition: remove spurious mention of HTMLMenuElement]]
([[annevk]]著, [TIME[2018-05-16 22:31:53 +09:00]])
<https://github.com/whatwg/html/commit/8b30fc9f6ce8c2cf0c16b19b9a85f186cd13084a>

[59] [CITE@en[Dev: remove spurious mention of HTMLMenuElement by annevk · Pull Request #3693 · whatwg/html]]
([TIME[2018-05-18 15:23:25 +09:00]])
<https://github.com/whatwg/html/pull/3693>

[60] [CITE@en[Dev edition: remove spurious mention of HTMLMenuElement]]
([[annevk]]著, [TIME[2018-05-16 22:31:53 +09:00]])
<https://github.com/whatwg/html/commit/8b30fc9f6ce8c2cf0c16b19b9a85f186cd13084a>

[61] [CITE@en[Dev: remove spurious mention of HTMLMenuElement by annevk · Pull Request #3693 · whatwg/html]]
([TIME[2019-02-18 13:32:14 +09:00]])
<https://github.com/whatwg/html/pull/3693>