HTML `<main>`-Tag

Das <main>-Tag ist ein neues Block-Element in der HTML5-Spezifikation. Das Tag bezeichnet den dominanten Inhalt des Dokuments im <body>. Der Inhalt des <main>-Tags muss eindeutig sein und darf keine Blöcke desselben Typs duplizieren, die in anderen Dokumenten wiederholt werden, wie etwa der Kopfbereich einer Website, Header, Footer, Menü, Suche, Copyright-Informationen usw.

Das <main>-Element darf nicht in den Tags <article>, <aside>, <footer>, <header> oder <nav> platziert werden. Ein Dokument darf nicht mehr als ein <main>-Tag haben, das kein angegebenes hidden-Attribut besitzt.

Dieses Element ist Teil des DOM-Baums, wird jedoch aus der Dokumentenstruktur ausgeschlossen, anders als Überschriftenelemente wie <h2>, die dazu beitragen.

Assistive Technologien können Landmarken verwenden, um die großen Abschnitte eines Dokuments schnell zu identifizieren und zu ihnen zu navigieren. Es wird empfohlen, das <main>-Element anstelle von role="main" zu verwenden, da das Element diese ARIA-Rolle implizit trägt.

Nutzer assistiver Technologien können große Abschnitte mit wiederholtem Inhalt mithilfe der „Skipnav“-Technik überspringen. Dadurch kann der Nutzer leicht auf den Hauptinhalt einer Seite zugreifen. Wenn Sie dem <main>-Element ein id-Attribut hinzufügen, wird es zum Ziel eines Skip-Navigationslinks.

Syntax

Das <main>-Tag kommt paarweise vor. Der Inhalt wird zwischen dem öffnenden (<main>) und dem schließenden (</main>) Tag geschrieben.

Beispiel für das HTML `<main>`-Tag:

HTML <main>-Tag

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <main>
      <h1>Programming languages</h1>
      <p>
        Languages HTML and CSS are intended for site layout.
      </p>
      <article>
        <h2>HTML</h2>
        <p>
          HTML (Hyper Text Markup Language) is a language of hypertext markup, which is used to create web pages.
        </p>
        <p>... </p>
        <p>... </p>
      </article>
      <article>
        <h2>CSS</h2>
        <p>
          CSS is a language of styles, defining the display of HTML documents.
        </p>
        <p>... </p>
      </article>
    </main>
  </body>
</html>

Try it Yourself »

Ergebnis

main tag example

Attribute

Das <main>-Tag unterstützt die Global Attributes und die Event Attributes.

Wie man ein HTML <main>-Tag stylt

css

main {
  padding: 20px;
  background-color: #f9f9f9;
}

Practice

What is the significance and usage of the <main> tag in HTML?

It is used to sectionalize the main content on a webpage.It helps web browsers and assistive devices understand the structure of the website.It modifies the style of the main content on a webpage.It may exist multiple times on a page.It's optional and can be omitted on a webpage.

HTML <main>-Tag ​

Syntax ​

Beispiel für das HTML <main>-Tag: ​

Ergebnis ​