fbpx
Photo by Sarah Pflug from Burst

Basic HTML Elemente

Websites werden häufig Inhalte in mehreren Spalten angezeigt wie bei in einer Zeitschrift oder Zeitung.

HTML bietet hierzu verschiedene semantische HTML Elemente, die die verschiedenen Teile einer Webseite definieren:

Basic Elemente

HTML5 Semantic Elements
  • „Header“ Definiert einen Header (Kopfzeile) für ein Dokument oder einen Abschnitt.
  • „Nav“ Definiert einen Container für Navigationslinks.
  • „Section“ Definiert einen Abschnitt in einem Dokument.
  • „Article“ Definiert einen eigenständigen, in sich geschlossenen Artikel.
  • „Aside“ Definiert den Inhalt neben dem Inhalt (wie eine Seitenleiste).
  • Footer“ Definiert eine Fußzeile für ein Dokument oder einen Abschnitt.
  • „Details“ Definiert zusätzliche Details.
  • „Summary“ Definiert Überschrift für das Element.

Tab Navigations Element

<div id="tabpanel"> 
  <ul role="tablist" id="tablist"> 
    <li id="1" role="tab" aria-controls="panel-1">1 - Button</li> 
    <li id="2" role="tab" aria-controls="panel-2">2 - Button</li> 
    <li id="3" role="tab" aria-controls="panel-3">3 - Button</li> 
  </ul> 
 
  <div id="tabcontent"> 
    <div id="panel-1" role="tabpanel" aria-labelledby="1"> 
      <h3>Inhalt</h3> 
      <p>Tab Button Name</p> 
    </div> 
    <div id="panel-2" role="tabpanel" aria-labelledby="2"> 
    <h3>Inhalt</h3> 
      <p>Tab Button Name</p> 
    </div> 
    <div id="panel-3" role="tabpanel" aria-labelledby="3"> 
      <h3>Inhalt</h3> 
      <p>Tab Button Name</p> 
    </div> 
  </div> 
</div>   
</section> 

Quellen und Verweise


Erstellt am 06.12.2019 durch A. Denda / Web Agentur SEO DENDA
Überarbeitet am 24.12.2019 durch A. Denda / SEO DENDA