W3docs
de
Anmelden

HTML5-Migration

Auf dieser Seite finden Sie Informationen zu HTML5, Unterschiede zwischen HTML4 und HTML5 sowie eine schrittweise Anleitung zur Migration von HTML4 zu HTML5.

Die Migration von HTML4 zu HTML5 bedeutet, den alten Doctype und die Zeichencodierungsdeklarationen durch ihre kürzeren HTML5-Äquivalente zu ersetzen, generische <div>-Container durch semantische Elemente auszutauschen und präsentationsbezogene Tags und Attribute zu entfernen, die HTML5 nicht mehr unterstützt. Diese Seite führt Sie schrittweise durch den Prozess und endet mit einer Zusammenfassung, die Sie als Checkliste verwenden können.

Tipp

Die unten beschriebenen Schritte können auch für die Migration von XHTML zu HTML5 angewendet werden.

Bei der Migration von XHTML denken Sie daran, das Attribut xmlns="http://www.w3.org/1999/xhtml" aus dem <html>-Tag zu entfernen.

Schritt 1: Änderung des Doctypes

Wir ändern den HTML4-Doctype in den HTML5-Doctype.

HTML4

Veralteter HTML4-Doctype

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

HTML5

HTML5 Migration

<!DOCTYPE html>

Schritt 2: Änderung der Zeichencodierung

Hier ändern wir die HTML4-Zeichencodierungsinformation in die HTML5-Zeichencodierung.

HTML4

Veraltete HTML4-Zeichencodierungsdeklaration

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

HTML5

HTML5 Migration

<meta charset="utf-8">

Darüber hinaus erlaubt HTML5 das Weglassen des type-Attributs bei <script>- und <style>-Tags, da es standardmäßig text/javascript bzw. text/css ist.

Schritt 3: Hinzufügen des HTML5Shiv

Alle modernen Browser unterstützen die neuen semantischen HTML5-Elemente. Außerdem können Sie älteren Browsern beibringen, mit "unbekannten Elementen" umzugehen. Der HTML5Shiv wird verwendet, um das Styling von HTML5-Elementen in solchen Browsern zu ermöglichen. Beachten Sie, dass dieses Skript für die moderne Webentwicklung weitgehend veraltet ist, da alle aktuellen Browser HTML5-Semantikelemente nativ unterstützen.

HTML5 Migration - HTML5Shiv

<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

Schritt 4: Umstieg auf semantische HTML5-Elemente

In HTML4 verwendeten wir oft generische <div>-Elemente mit id- und class-Attributen, um die Struktur zu beschreiben. HTML5 führt semantische Elemente ein, die viele dieser generischen Container ersetzen können und Browsern, Suchmaschinen und unterstützenden Technologien ein klareres Bild der Seite vermitteln. IDs und Klassen bestimmen die Semantik nicht automatisch, aber hier sind die häufigen strukturellen Ersetzungen:

HTML4-ContainerSemantisches HTML5-Element
<div id="header"><header>
<div id="menu"><nav>
<div id="content"><main>
<div class="article"><article>
<div class="sidebar"><aside>
<div id="footer"><footer>

Das Element <aside> verdient besondere Beachtung: Es kennzeichnet Inhalte, die thematisch mit dem umgebenden Inhalt verwandt sind, wie zum Beispiel eine Seitenleiste, ein hervorgehobenes Zitat oder ein Block mit verwandten Links. Es hat kein direktes HTML4-Äquivalent und wird daher in der Regel während der Migration eingeführt, um einen <div class="sidebar"> oder ähnliche Container zu ersetzen.

Sehen Sie zunächst ein Beispiel, in dem HTML4-Elemente verwendet werden.

Beispiel mit HTML4-Elementen:

HTML4-Beispiel

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Title of the document</title>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <style>
      body {
        font-size: 0.9em;
      }
      #header,
      #footer {
        padding: 10px;
        color: white;
        background-color: black;
        text-align: center;
      }
      h2 {
        text-align: center
      }
      h3 {
        text-align: right;
        padding-right: 20px;
      }
      div.content {
        margin: 5px;
        padding: 20px;
        background-color: lightgrey;
      }
      .article {
        margin: 20px;
        padding: 10px;
        background-color: white;
      }
      #header-menu ul {
        padding: 0;
      }
      #header-menu ul li {
        display: inline;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <h1>LaravelSoft</h1>
    </div>
    <div id="header-menu">
      <ul>
        <li>
          <a href="https://www.w3docs.com/learn-html.html">Books</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/quiz/">Quizzes</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/snippets">Snippets</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/tool/">Tools</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/string-functions/">String Functions</a>
        </li>
      </ul>
    </div>
    <div class="content">
      <h2>Article Section</h2>
      <div class="article">
        <h3>Article Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
      </div>
      <div class="article">
        <h3>News Article</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
      </div>
    </div>
    <div id="footer">
      <p>&copy; 2020 All rights reserved.</p>
    </div>
  </body>
</html>
Probier es selbst »

Sehen Sie nun die Migration von HTML4-Elementen zu semantischen HTML5-Elementen.

Beispiel mit semantischen HTML5-Elementen:

Die migrierte Version unten verzichtet auf das HTML5Shiv-Skript, da jeder noch verwendete Browser die semantischen Elemente nativ versteht. Fügen Sie den Shiv nur dann wieder hinzu, wenn Sie Internet Explorer 8 oder früher unterstützen müssen.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <meta charset="utf-8" />
    <style>
      body {
        font-size: 0.9em;
      }
      header,
      footer {
        padding: 10px;
        color: white;
        background-color: black;
        text-align: center;
      }
      h2 {
        text-align: center
      }
      h3 {
        text-align: right;
        padding-right: 20px;
      }
      main {
        margin: 5px;
        padding: 20px;
        background-color: lightgrey;
      }
      article {
        margin: 20px;
        padding: 10px;
        background-color: white;
      }
      nav ul {
        padding: 0;
      }
      nav ul li {
        display: inline;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>LaravelSoft</h1>
    </header>
    <nav>
      <ul>
        <li>
          <a href="https://www.w3docs.com/learn-html.html">Books</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/quiz/">Quizzes</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/snippets">Snippets</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/tool/">Tools</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/string-functions/">String Functions</a>
        </li>
      </ul>
    </nav>
    <main>
      <h2>Article Section</h2>
      <article>
        <h3>Article Title</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
      </article>
      <article>
        <h3>News Article</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
      </article>
    </main>
    <footer>
      <p>&copy; 2020 All rights reserved.</p>
    </footer>
  </body>
</html>
Probier es selbst »

Schritt 5: Entfernung veralteter HTML4-Elemente und Attribute

Die Migration beschränkt sich nicht nur auf das Ersetzen struktureller <div>-Container. HTML5 hat auch eine Gruppe präsentationsbezogener Tags und Attribute entfernt, deren Aufgabe nun von CSS übernommen wird. Wenn man sie beibehält, vermischt man Markup mit Styling und kann unerwartete Ergebnisse in modernen Browsern erzielen, daher ist es am besten, sie im Rahmen der Migration zu entfernen.

Häufig zu entfernende Elemente und ihre CSS-Entsprechungen:

Veraltetes ElementWas stattdessen tun
<font>font-family, font-size und color in CSS setzen
<center>text-align: center oder ein Flex/Grid-Layout verwenden
<big>, <tt>, <strike>font-size, eine monospaced font-family oder text-decoration: line-through verwenden
<frame>, <frameset>, <noframes>Seite umstrukturieren; <iframe> nur verwenden, wenn ein eingebettetes Dokument wirklich benötigt wird

Häufig zu entfernende Attribute und ihre CSS-Entsprechungen:

Veraltetes AttributWas stattdessen tun
align, valigntext-align, vertical-align
bgcolorbackground-color
width, height (bei Layout-Tabellen/Zellen)CSS width / height
border (präsentationsbezogen)CSS border
cellpadding, cellspacingpadding und border-spacing

Zum Beispiel wird dieses HTML4-Markup:

<center>
  <font face="Arial" color="red" size="5">Welcome</font>
</center>
<table border="1" bgcolor="#eee" cellpadding="10">
  <tr><td align="center">Cell</td></tr>
</table>

in HTML5 so, wobei alle Präsentation in CSS verschoben wird:

<p class="title">Welcome</p>
<table class="data">
  <tr><td>Cell</td></tr>
</table>

<style>
  .title {
    text-align: center;
    font-family: Arial, sans-serif;
    color: red;
    font-size: 1.5em;
  }
  .data {
    border: 1px solid black;
    border-collapse: collapse;
    background-color: #eee;
  }
  .data td {
    padding: 10px;
    text-align: center;
  }
</style>

Der Unterschied zwischen den Elementen <section>, <article> und <div>

In HTML5 gibt es einige Unterschiede zwischen den Elementen <section>, <article> und <div>. Insbesondere:

  • <section> gruppiert thematisch zusammengehörige Inhalte, typischerweise mit einer Überschrift.
  • <article> repräsentiert in sich geschlossene Inhalte, die unabhängig verteilt oder wiederverwendet werden könnten.
  • <div> ist ein generischer Container ohne semantische Bedeutung, der ausschließlich für Styling oder Scripting verwendet wird.

Beispiel der Tags <section>, <article> und <div>:

Beispiel der Tags <section>, <article> und <div>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <section>
      <h1>Articles about flowers</h1>
      <article>
        <h2>Roses</h2>
        <p>
          Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration.
        </p>
      </article>
      <div>
        <h2>Lilies</h2>
        <p>
          Lily - an amazing beauty flower, one of the most ancient among a variety of bulbous plants.
        </p>
      </div>
    </section>
  </body>
</html>
Probier es selbst »

Migrations-Zusammenfassung

Verwenden Sie diese Schritte als Checkliste, wenn Sie eine Seite von HTML4 zu HTML5 migrieren:

  1. Ersetzen Sie den langen HTML4-Doctype durch <!DOCTYPE html>.
  2. Ersetzen Sie das http-equiv-Content-Type-Meta-Tag durch das kurze <meta charset="utf-8">.
  3. Fügen Sie den HTML5Shiv nur hinzu, wenn Sie Internet Explorer 8 oder früher unterstützen müssen; andernfalls lassen Sie ihn weg.
  4. Ersetzen Sie strukturelle <div>-Container durch semantische Elemente wie <header>, <nav>, <main>, <article>, <aside> und <footer>.
  5. Entfernen Sie veraltete präsentationsbezogene Elemente und Attribute (<font>, <center>, align, <frameset> und ähnliche) und verschieben Sie deren Styling in CSS.

Übung

Übung
Wählen Sie alle zutreffenden Antworten aus. Welche der folgenden Elemente wurden in HTML5 neu eingeführt?
Wählen Sie alle zutreffenden Antworten aus. Welche der folgenden Elemente wurden in HTML5 neu eingeführt?
Was this page helpful?