HTML <menu>-Tag

Das <menu>-Tag stellt eine ungeordnete Liste von Einträgen dar, ähnlich wie <ul>, jedoch mit einer spezifischeren semantischen Bedeutung: Es beschreibt eine Toolbar oder eine Liste interaktiver Befehle, die der Benutzer ausführen kann. Jeder Eintrag wird als <li>-Element geschrieben.

Das <menu>-Element ist nicht veraltet. Es ist ein aktuelles, gültiges Element im HTML Living Standard. Browser rendern es genauso wie ein <ul> — als Block-Level-Element mit Aufzählungszeichen — und es hat dasselbe Inhaltsmodell. Der Unterschied ist rein semantischer Natur: Verwenden Sie <menu>, wenn die Liste eine Sammlung von Befehlen oder Steuerelementen ist (zum Beispiel eine Reihe von Toolbar-Schaltflächen), und <ul> für gewöhnliche Inhaltslisten.

Info

Was tatsächlich aus dem Standard entfernt wurde, ist die Kontextmenü-Funktion: die Attribute type="context", type="toolbar", type="popup" und label sowie das begleitende <menuitem>-Element. Diese existieren in keinem modernen Browser mehr. Das <menu>-Element selbst bleibt gültig — nur diese zusätzlichen Attribute und <menuitem> wurden entfernt. Verwenden Sie stattdessen CSS und JavaScript, um ein benutzerdefiniertes Kontextmenü zu erstellen.

Wann `<menu>` verwendet werden sollte

Verwenden Sie <ul> für allgemeine Inhaltslisten — Navigationslinks, Funktionslisten, Schritte oder beliebige gewöhnliche Aufzählungsinhalte. Für die Website-Navigation umschließen Sie diese Liste mit einem <nav>-Element.
Greifen Sie auf <menu> zurück, wenn die semantische Absicht eine Toolbar oder eine Liste von Befehlen ist, etwa eine Gruppe von Aktionsschaltflächen (Ausschneiden, Kopieren, Einfügen), die auf das aktuelle Dokument oder die Auswahl wirken.

Da assistive Technologien <menu> derzeit nicht anders behandeln als <ul>, liegt der praktische Nutzen heute in der Lesbarkeit Ihres Markups für andere Entwickler. Geben Sie einer Befehls-Toolbar aus Gründen der Barrierefreiheit ein beschreibendes aria-label.

Syntax

Das <menu>-Tag wird in Paaren verwendet. Der Inhalt wird zwischen das öffnende (<menu>) und schließende (</menu>) Tag geschrieben.

Beispiel des HTML-`<menu>`-Tags mit `<li>`-Elementen:

HTML <menu>-Tag-Beispiel

Standardmäßig rendern Browser <menu> genauso wie ein <ul> — als Liste mit Aufzählungszeichen. Die folgenden Stile entfernen lediglich die Aufzählungszeichen und fügen Abstände hinzu.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      menu {
        display: block;
        list-style: none;
        padding: 0;
      }
      menu li {
        display: block;
        padding: 5px;
        border: 1px solid #ccc;
        margin-bottom: 2px;
      }
    </style>
  </head>
  <body>
    <menu>
      <li>ol - ordered list</li>
      <li>ul - unordered list</li>
      <li>menu - menu list</li>
    </menu>
  </body>
</html>

Probier es selbst »

Result

Beispiel einer zugänglichen Toolbar mit `<menu>`:

Dies ist der Anwendungsfall, für den <menu> konzipiert wurde: eine Liste von Befehlen. Die Schaltflächen sind echte <button>-Elemente (damit sie per Tastatur fokussierbar sind und als Schaltflächen vorgelesen werden), und die Toolbar besitzt ein aria-label, damit Screenreader-Nutzer wissen, was die Gruppe bewirkt.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      menu {
        display: flex;
        gap: 10px;
        list-style: none;
        padding: 10px;
        margin: 0;
        background: #f0f0f0;
        border: 1px solid #ccc;
      }
      menu button {
        padding: 8px 12px;
        background: #1c87c9;
        color: #fff;
        border: none;
        cursor: pointer;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <menu aria-label="Text formatting">
      <li><button type="button" onclick="alert('Bold')">Bold</button></li>
      <li><button type="button" onclick="alert('Italic')">Italic</button></li>
      <li><button type="button" onclick="alert('Underline')">Underline</button></li>
    </menu>
  </body>
</html>

Probier es selbst »

Der Unterschied zwischen den Tags `<menu>` und `<ul>`

Die Elemente <menu> und <ul> verhalten sich im Browser identisch: Beide rendern eine ungeordnete Liste und enthalten beide <li>-Einträge. Der einzige Unterschied liegt in der semantischen Absicht. <menu> signalisiert, dass die Liste eine Toolbar oder eine Sammlung von Befehlen ist, während <ul> für gewöhnliche Inhaltslisten steht. Im Zweifelsfall verwenden Sie <ul> — es ist das allgemeinere Element und wird universell verstanden.

Attribute

Das <menu>-Element hat keine elementspezifischen Attribute. Die älteren Attribute type (mit den Werten context, toolbar und popup), label sowie das begleitende <menuitem>-Element wurden aus dem Standard entfernt und funktionieren in Browsern nicht mehr.

Das <menu>-Tag unterstützt die globalen Attribute und die Ereignis-Attribute. Fügen Sie für eine Befehls-Toolbar ein aria-label (ein globales Attribut) hinzu, um die Gruppe von Befehlen zu beschreiben.

Übung

Was ist der aktuelle Status des '<menu>'-Elements im HTML-Standard?

Es ist veraltet und wurde aus jedem modernen Browser entfernt.Es ist ein gültiges Living-Standard-Element, das eine ungeordnete Liste von Befehlen oder eine Toolbar darstellt.Es funktioniert nur in älteren Firefox-Versionen.Es benötigt das '<menuitem>'-Element, um zu funktionieren.

Wann <menu> verwendet werden sollte