Shadow
Slider

HTML5 Elemente

HTML5 Elemente

Von inHTML & HTML5 library, HTML5 - Tipps und Tricks
HTML5_Logo

Was ist in HTML5 neu, was wurde übernommen und was viel raus.

Auf dieser Seite finden Sie eine Liste aller Standard HTML5-Elemente, beschrieben durch ihr öffnendes Tag, nach Funktion gruppiert. Diese Liste enthält ausschließlich die gültigen HTML5-Elemente. In neuen Websites sollten nur die hier aufgezählten Tags verwendet werden. Eine komplette Liste aller HTML-Elemente finden Sie im Index aller HTML-Elemente. Dieser enthält sämtliche möglichen Tags: standardisierte, nicht-standardkonforme, gültige, obsolete und als veraltet („deprecated“) betrachtete.

  • Das Symbol Neu in HTML5 steht für ein in HTML5 neu hinzugekommenes Element. Beachten Sie, dass andere hier aufgeführte Elemente in der HTML5-Spezifikation möglicherweise verändert oder erwitert wurden.

< html >

Steht für den Wurzelknoten eines HTML- oder XHTML-Dokuments. Alle weiteren Elemente müssen Nachkommen dieses Elements sein

Beispiel
< doctype >

Die Deklaration < !DOCTYPE > ist kein HTML-Tag; sie ist eine Anweisung an den Webbrowser, in welcher Version von HTML die Seite geschrieben ist.

Beispiel

< head >

Bezeichnet eine Sammlung von Metadaten des Dokuments. Hierzu gehören auch Links zu oder Definitionen von Skripts und Stylesheets.

< title >
Definiert den Titel eines Dokuments, der in der Titelzeile des Browsers im Tab der betreffenden Seite angezeigt wird. Darf ausschließlich Text enthalten. Eventuell enthaltene Tags werden nicht interpretiert.
< base >

Definiert den Basis-URL für in der Seite verwendete relative URLs.

< link >

Wird verwendet, um externe JavaScript- und CSS-Dateien in das aktuelle HTML-Dokument einzubinden.

< meta >
Wird für die Definition von Metadaten verwenden, die mit keinem anderen HTML-Element definiert werden können.
< style >

Tag für die Definition eines internen CSS-Stylesheets.

Beispiel

< script>

Definiert entweder ein internes Skript oder einen Link auf ein externes Skript. Als Programmiersprache wird JavaScript verwendet.

Neu in HTML5, fällt die Angabe über Type weg

< noscript >

Definiert alternative Inhalte, die angezeigt werden sollen, wenn der Browser kein Skripting unterstützt.

< body >

Steht für den Hauptinhalt eines HTML-Dokuments. Jedes Dokument kann nur ein body-Element enthalten.

Beispiel
< section >

Beschreibt einen Abschnitt eines Dokuments.

Beispiel
< nav >

Beschreibt einen Abschnitt der ausschließlich Navigationslinks enthält.

Beispiel
< article >

Beschreibt eigenständigen Inhalt, der unabhängig von den übrigen Inhalten sein kann.

Beispiel
< aside >

Steht für eine Randbemerkung. Der übrige Inhalt sollte auch verständlich sein, wenn dieses Element entfernt wird.

Beispiel

You must be logged in to post a comment

<!DOCTYPE html>
  <html lang="de">
</html>

 

<!-- HTML5 -->
 <!DOCTYPE html>

<!-- HTML 4.01 Strict -->
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- HTML 4.01 Transitional -->
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!-- HTML 4.01 Frameset -->
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<!-- XHTML 1.0 Strict -->
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- XHTML 1.0 Transitional -->
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- XHTML 1.0 Frameset -->
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!-- XHTML 1.1 -->
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

 

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8"/> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
      <title>HTML5-Seite mit Grundstruktur</title>
      <base href="http://www.deine-ideenschmiede.de/">
      <link href="style.css" rel="stylesheet">
      <style type="text/css">
        p {
          color: #26b72b;
        }
      </style>
    </head>
    <body> 
     <p>Das ist ein Beispiel</p>
    </body>
  </html>

 

<html>
  <head>
   <title>Title of the document</title>
  </head>

  <body>
    The content of the document......
  </body>

</html>

 

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

 

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

 

<article>
  <h1>Google Chrome</h1>
  <p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
</article>

 

<p>My family and I visited The Epcot center this summer.</p>

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

<p><strong>Note:</strong> The aside tag is not supported in Internet 
Explorer 8 and earlier versions.</p>