HTML/Elemente/main

Aus SELFHTML-Wiki
< HTML‎ | Elemente
Wechseln zu: Navigation, Suche

Das main-Element enthält den (Haupt-)Inhalt einer Webseite. Dieser wurde bisher oft mit <div id="main"> oder <div id="content"> gekennzeichnet.

Beispiel
<body>
    <header>
      <p>Name unserer Seite<p>
    </header>
    <nav></nav>
   <main>
      <h1>Überschrift des Artikels</h1>
      <p>weiterer Inhalt</p>
    </main>
</body>
Durch die Auszeichnung des Hauptinhalts der Seite mit main können Screenreader und andere alternative Ausgabegeräte diesen erkennen und beispielsweise Header oder Navigation überspringen (siehe auch Barrierefreiheit).
Beachten Sie: Es darf maximal ein sichtbares main-Element pro Seite existieren. Man kann mehrere main-Elemente haben, aber nur eines davon darf sichtbar sein. Die übrigen müssen durch das hidden-Attribut verborgen werden.
Empfehlung: IE9-11 unterstützen das main-Element nicht. Allerdings ist ein Einsatz problemlos möglich, wenn Sie es im CSS mit display: block; auszeichnen.

Siehe auch

Weblinks

Syntax Start-Tag: notwendig
End-Tag: notwendig
<main>…</main>
WAI-ARIA-Rolle
  • main
Elternelemente Darf vorkommen in:
  • Die Kette der Elternelemente von main darf nur die Elemente html, body, div und form enthalten, sowie custom-Elemente, die ohne extends-Option definiert wurden. Ein form-Element ist nur zulässig, wenn es keinen „accessible name“ besitzt (zum Beispiel durch aria-labelledby, aria-label oder title Attribute).
Info: Elemente, die fließenden Inhalt erlauben (flow content expected)Info: Elemente, die fließenden Inhalt erlauben (flow content expected)

Information: Elemente, die fließenden Inhalt erlauben

erlaubte Inhalte
  • beliebig viele Fluss-Elemente
  • aber nicht main
Info: Fluss-Elemente (flow content)Info: Fluss-Elemente (flow content)

Browsersupport Details: {{{caniuse}}}
Attribute
Name Inhalt Standardwert Bedeutung
Universalattribute
id ID identifiziert ein einziges Element innerhalb eines Dokuments
class CDATA ordnet ein Element einer oder mehreren Klassen zu.
accesskey ID Tastaturkürzel
contenteditable CDATA editierbarer Inhalt
contextmenu definiert Kontextmenü
dir ltr, rtl definiert die Schreibrichtung innerhalb des Dokuments
draggable ID kann mit Drag & Drop gezogen werden
dropzone CDATA Aktion bei Ablegen
hidden versteckter Inhalt
lang NAME legt eine den IANA-Sprachdefinitionen folgende Sprache des Elementinhalts fest [RFC1766]
spellcheck ID Rechtschreibprüfung
style CDATA notiert direkt in einem Element- style sheet data
tabindex NAME zeigt an, ob dieses Element fokusiert werden kann, ob es mithilfe der Tastaturnavigation angesteuert werden kann und in welcher Reihenfolge navigiert wird.
title CDATA betitelt oder beschreibt ein Element.

Attribut: Pflichtattribut
Attribut: optionales Attribut