W3docs

HTML5-Browserunterstützung

On this page, you can find useful information about browser support in HTML5, learn about semantic elements and HTML5Shiv and find different examples.

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:

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:

<!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>

Practice

Übung

Welche der folgenden Browser unterstützen HTML5 laut www.w3docs.com?