HTML5 Migration von HTML4
Übergang von HTML4 zu HTML5
Dieser Abschnitt behandelt vollständig den Umstieg von HTML4 auf HTML5.
Dieser Abschnitt zeigt, wie man eine HTML4‑Seite in eine HTML5‑Seite umwandelt, ohne den ursprünglichen Inhalt oder die Seitenstruktur zu beschädigen.
Du kannst auch mit derselben Methode von XHTML zu HTML5 migrieren.
| Typisches HTML4 | Typisches HTML5 |
|---|---|
| <div id="header"> | <header> |
| <div id="menu"> | <nav> |
| <div id="content"> | <section> |
| <div class="article"> | <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.9em;
}
div#header, div#footer {
padding: 10px;
color: white;
background-color: black;
}
div#content {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
div.article {
margin: 5px;
padding: 10px;
background-color: white;
}
div#menu ul {
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>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>
<div id="content">
<h2>News Section</h2>
<div class="article">
<h2>News Article</h2>
<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 class="article">
<h2>News Article</h2>
<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; 2024 Monday Times. All rights reserved.</p>
</div>
</body>
</html>
Probiere es selbst »
Wechsel zum HTML5‑Doctype
Ändere den Doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
zum HTML5‑Doctype:
Wechsel zur HTML5‑Kodierung
Ändere die Kodierungs-Information:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
zur HTML5‑Kodierung:
HTML5Shiv hinzufügen
Neue HTML5‑Semantikelemente werden in allen modernen Browsern unterstützt. Außerdem kannst du älteren Browsern „beibringen“, mit „unbekannten Elementen“ zu arbeiten.
IE8 und frühere Versionen erlauben jedoch keine Stilzuweisung für unbekannte Elemente. Daher ist HTML5Shiv ein JavaScript‑Workaround, der die Stilunterstützung für HTML5‑Elemente in Internet Explorer‑Versionen vor Version 9 ermöglicht.
Füge HTML5Shiv hinzu:
Beispiel
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
Probiere es selbst »
Erfahre mehr über HTML5Shiv im Abschnitt HTML5‑Browserunterstützung.
Wechsel zu HTML5‑Semantikelementen
Das bestehende CSS enthält IDs und Klassen, die zur Gestaltung von Elementen verwendet werden:
body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
}
div#header, div#footer {
padding: 10px;
color: white;
background-color: black;
}
div#content {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
div.article {
margin: 5px;
padding: 10px;
background-color: white;
}
div#menu ul {
padding: 0;
}
div#menu ul li {
display: inline;
margin: 5px;
}
Ersetze sie durch entsprechende CSS‑Stile für HTML5‑Semantikelemente:
body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
}
header, footer {
padding: 10px;
color: white;
background-color: black;
}
section {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
article {
margin: 5px;
padding: 10px;
background-color: white;
}
nav ul {
padding: 0;
}
nav ul li {
display: inline;
margin: 5px;
}
Ersetze schließlich die Elemente durch HTML5‑Semantikelemente:
Beispiele
<body>
<header>
<h1>Monday Times</h1>
</header>
<nav>
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</nav>
<section>
<h2>News Section</h2>
<article>
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet..</p>
</article>
<article>
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet..</p>
</article>
</section>
<footer>
<p>© 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
Probiere es selbst »
Der Unterschied zwischen <article>, <section> und <div>
Im HTML5‑Standard gibt es keinen strengen Unterschied zwischen <article>, <section> und <div>.
Im HTML5‑Standard wird das <section>-Element als ein Block verwandter Inhalte definiert.
Das <article>-Element wird als ein vollständiger, eigenständiger Block verwandter Inhalte definiert.
Das <div>-Element wird als ein Block von Kindelementen definiert.
Wie interpretiert man das?
Im obigen Beispiel haben wir <section> als Container für verwandte <article>-Elemente verwendet.
Wir hätten jedoch auch <article> als Container für die Artikel verwenden können.
Hier sind mehrere verschiedene Beispiele:
<article> innerhalb von <article>:
<article>
<h2>Famous Cities</h2>
<article>
<h2>London</h2>
<p>London is the capital city of England.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</article>
</article>
Probiere es selbst »
<div> innerhalb von <article>:
<article>
<h2>Famous Cities</h2>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</article>
Probiere es selbst »
<div> innerhalb von <section> innerhalb von <article>:
<article>
<section>
<h2>Famous Cities</h2>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</section>
<section>
<h2>Famous Countries</h2>
<div class="country">
<h2>England</h2>
<p>London is the capital city of England.</p>
</div>
<div class="country">
<h2>France</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="country">
<h2>Japan</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</section>
</article>
Probiere es selbst »
