HTML5-Browserunterstützung

Alle modernen Browser unterstützen HTML5 und behandeln unbekannte Elemente automatisch als Inline-Elemente. Darüber hinaus ist es möglich, ältere Browser „beizubringen“, mit solchen Elementen umzugehen.

Semantische Elemente als Blockelemente

HTML5 definiert mehrere neue semantische Elemente, und alle davon sind Blockelemente. Hier sind sie:

Legen Sie die CSS display-Eigenschaft für die oben genannten Elemente fest, um ein korrektes Verhalten in älteren Browsern zu gewährleisten:

css

header, section, footer, aside, nav, main, article, figure {
  display: block;
}

HTML5Shiv

Das HTML5Shiv wird innerhalb des <head>-Tags platziert. Es handelt sich um eine JavaScript-Datei, die in einem <script>-Tag referenziert wird.

Sie sollten das HTML5Shiv verwenden, wenn Sie die neuen HTML5-Elemente einsetzen.

Beispiel für das HTML5Shiv:

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <section>
      <h1>The most beautiful places in the world</h1>
      <article>
        <h2>Salar de Uyuni, Bolivia</h2>
        <p>The world's largest salt flats, spanning 4086 miles (10,582 sq. km), Salar de Uyuni is unlike anywhere else on earth.</p>
      </article>
      <article>
        <h2>Moraine Lake, Canada</h2>
        <p>Moraine Lake may be only half the size of its nearby neighbour Lake Louise, but it's even more scenic.</p>
      </article>
      <article>
        <h2>Iguazu Falls, Argentina/Brazil border</h2>
        <p>One of the modern natural wonders of the world, this chain of mini waterfalls is one of the planet's most awe-inspiring sights.</p>
      </article>
    </section>
  </body>
</html>

Try it Yourself »

HTML5-Browserunterstützung ​

Semantische Elemente als Blockelemente ​

HTML5Shiv ​

Beispiel für das HTML5Shiv: ​

Practice ​

HTML5-Browserunterstützung

Semantische Elemente als Blockelemente

HTML5Shiv

Beispiel für das HTML5Shiv:

Practice