HTML5-Migration

Migration von HTML4 zu HTML5

Dieses Kapitel erläutert, wie von einer typischen HTML4-Seite zu einer typischen HTML5-Seite migriert wird.

Dieses Kapitel zeigt, wie eine vorhandene HTML4-Seite in eine HTML5-Seite umgewandelt wird, ohne die ursprünglichen Inhalte und Strukturen zu beeinträchtigen.

Anmerkung:Sie können die gleichen Techniken verwenden, um von HTML4 und XHTML auf HTML5 zu migrieren.

Typische HTML4 Typische HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <article>
<div id="footer"> <footer>

Typische HTML4-Seite

Beispiel

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4</title>
<style>
  body {font-family:Verdana,sans-serif;font-size:0.8em;}
  div#header,div#footer,div#content,div#post 
  {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
  div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
  div#content {background-color:#ddd;}
  div#menu ul {margin:0;padding:0;}
  div#menu ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<div id="header">
  <h1>Monday Times</h1>
</div>
<div id="menu">
  <ul>
    <li>Nachrichten</li>
    <li>Sport</li>
    <li>Wetter</li>
  </ul>
</div>
<div id="content">
<h2>News Section</h2>
<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</div>
<div id="footer">
  <p>© 2014 Monday Times. Alle Rechte vorbehalten.</p>
</div>
</body>
</html>

Versuchen Sie es selbst

in HTML5 Doctype ändern

Ändern Sie den Dokumenttyp von HTML4 doctype:

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

Ändern Sie in HTML5 doctype:

<!DOCTYPE html>

Versuchen Sie es selbst

in HTML5-Kodierung ändern

Modifizieren Sie die Kodierungsinformationen von HTML4:

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

Umwandeln in HTML5:

<meta charset="utf-8">

Versuchen Sie es selbst

Shiv hinzufügen

Alle modernen Browser unterstützen HTML5 semantische Elemente.

Darüber hinaus können Sie "lehrreicherweise" veraltete Browser, wie sie mit "unbekannten Elementen" umgehen, behandeln.

Shiv hinzugefügt für Internet Explorer-Unterstützung:

<![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Versuchen Sie es selbst

Anmerkung:Lesen Sie mehr über shiv im Abschnitt zur Unterstützung von HTML5-Browsern.

CSS für HTML5 semantische Elemente hinzufügen

Sehen Sie sich die vorhandenen CSS-Stile an:

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}
Doppelt mit gleichen CSS-Styles für HTML5 semantische Elemente:
header,footer,section,article {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}

Versuchen Sie es selbst

in HTML5 <header> und <footer> umwandeln

Ändern Sie die <div> -Elemente mit id="header" und id="footer":

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© 2016 CodeW3C.com. Alle Rechte vorbehalten.</p>
</div>

Ändern Sie in HTML5-Semantik-Elemente <header> und <footer> um:

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© 2016 CodeW3C.com. Alle Rechte vorbehalten.</p>
</footer>

Versuchen Sie es selbst

in HTML5 <nav> ändern

Ändern Sie das <div>-Element mit id="menu":

<div id="menu">
  <ul>
    <li>Nachrichten</li>
    <li>Sports</a></li>
    <li>Wetter</li>
  </ul>
</div>

Ändern Sie in HTML5-Semantik-Elemente <nav> um:

<nav>
  <ul>
    <li>Nachrichten</li>
    <li>Sports</a></li>
    <li>Wetter</li>
  </ul>
</nav>

Versuchen Sie es selbst

in HTML5 <section> ändern

Ändern Sie das <div>-Element mit id="content":

<div id="content">
.
.
.
</div>

Ändern Sie in HTML5-Semantik-Elemente <section> um:

<section>
.
.
.
</section>

Versuchen Sie es selbst

in HTML5 <article> ändern

Ändern Sie alle <div>-Elemente mit class="post":

<div class="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

Ändern Sie in HTML5-Semantik-Elemente <article> um:

<article>
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</article>

Versuchen Sie es selbst

Löschen Sie diese "nicht mehr erforderlichen" Stile:

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}

Versuchen Sie es selbst

Typische HTML5-Seite

Sie können den <head>-Tag am Ende löschen. Er ist in HTML5 nicht mehr erforderlich:

Beispiel

<!DOCTYPE html>
<html lang="en">
<title>HTML5</title>
<meta charset="utf-8">
<![if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {
    font-family:Verdana,sans-serif;font-size:0.8em;
}
header,footer,section,article {
    border:1px solid grey;
    margin:5px;margin-bottom:15px;padding:8px;
    background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}
</style>
<body>
<header>
  <h1>Monday Times</h1>
</header>
<nav>
  <ul>
    <li>Nachrichten</li>
    <li>Sport</li>
    <li>Wetter</li>
  </ul>
</nav>
<section>
<h2>News Section</h2>
<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
<h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</section>
<footer>
  <p>© 2014 Monday Times. Alle Rechte vorbehalten.</p>
</footer>
</body>
</html>

Versuchen Sie es selbst

Unterschiede zwischen <article>, <section> und <div>:

Im HTML5-Standard sind die Unterschiede zwischen <article>, <section> und <div> gering und können verwirrend sein.

Im HTML5-Standard wird das <section>-Element als Block für verwandte Elemente positioniert.

Das <article>-Element wird als vollständiger, selbstinhaltiger Block für verwandte Elemente definiert.

Das <div>-Element wird als Block für Unterelemente definiert.

Wie kann man das verstehen?

Im obigen Beispiel haben wir <section> als Container für verwandte <articles> verwendet.

Aber wir können <article> auch als Container für Artikel verwenden.

Hier sind einige verschiedene Beispiele:

Der <article> im <article>:
<article>
<h2>Bekannte Städte</h2>
<article>
<h2>London</h2>
<p>London ist die Hauptstadt Englands. Es ist die bevölkerungsreichste Stadt im Vereinigten Königreich,</p>
<p>mit einer Metropolregion von über 13 Millionen Einwohnern.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris ist die Hauptstadt und bevölkerungsreichste Stadt Frankreichs.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo ist die Hauptstadt Japans, der Mittelpunkt des Greater Tokyo Area,</p>
und die bevölkerungsreichste Metropolregion der Welt.</p>
</article>
</article>

Versuchen Sie es selbst

<article> innerhalb von <div>：
<article>
<h2>Bekannte Städte</h2>
<div class="city">
<h2>London</h2>
<p>London ist die Hauptstadt Englands. Es ist die bevölkerungsreichste Stadt im Vereinigten Königreich,</p>
<p>mit einer Metropolregion von über 13 Millionen Einwohnern.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris ist die Hauptstadt und bevölkerungsreichste Stadt Frankreichs.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo ist die Hauptstadt Japans, der Mittelpunkt des Greater Tokyo Area,</p>
und die bevölkerungsreichste Metropolregion der Welt.</p>
</div>
</article>

Versuchen Sie es selbst

<article> innerhalb von <section> innerhalb von <div>：
<article>
<section>
<h2>Bekannte Städte</h2>
<div class="city">
<h2>London</h2>
<p>London ist die Hauptstadt Englands. Es ist die bevölkerungsreichste Stadt im Vereinigten Königreich,</p>
<p>mit einer Metropolregion von über 13 Millionen Einwohnern.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris ist die Hauptstadt und bevölkerungsreichste Stadt Frankreichs.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo ist die Hauptstadt Japans, der Mittelpunkt des Greater Tokyo Area,</p>
und die bevölkerungsreichste Metropolregion der Welt.</p>
</div>
</section>
<section>
<h2>Bekannte Länder</h2>
<div class="country">
<h2>England</h2>
<p>London ist die Hauptstadt Englands. Es ist die bevölkerungsreichste Stadt im Vereinigten Königreich,</p>
<p>mit einer Metropolregion von über 13 Millionen Einwohnern.</p>
</div>
<div class="country">
<h2>Frankreich</h2>
<p>Paris ist die Hauptstadt und bevölkerungsreichste Stadt Frankreichs.</p>
</div>
<div class="country">
<h2>Japan</h2>
<p>Tokyo ist die Hauptstadt Japans, der Mittelpunkt des Greater Tokyo Area,</p>
und die bevölkerungsreichste Metropolregion der Welt.</p>
</div>
</section>
</article>

Versuchen Sie es selbst