HTML5-Migration
Auf dieser Seite zeigen wir, wie Sie von HTML4 zu HTML5 migrieren können. Lernen wir es Schritt für Schritt.
In HTML4 verwendeten wir häufig generische <div>-Elemente mit id- und class-Attributen, um die Struktur zu definieren. HTML5 führt semantische Elemente ein, die viele dieser generischen Container ersetzen können. IDs und Klassen legen zwar nicht automatisch die Semantik fest, aber hier sind gängige strukturelle Ersetzungen:
HTML-Tags mit id
<div id="header"> - <header>
<div id="menu"> - <nav>
<div id="content"> - <main>
<div class="article"> - <article>
<div id="footer"> - <footer>TIP
Die unten beschriebenen Schritte können auch bei der Migration von XHTML zu HTML5 angewendet werden.
Wenn Sie von XHTML migrieren, denken Sie daran, das Attribut xmlns="http://www.w3.org/1999/xhtml" aus dem <html>-Tag zu entfernen.
Schritt 1: Ändern des Doctypes
Wir ändern den HTML4-Doctype in den HTML5-Doctype.
HTML4
Legacy-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: Ändern der Kodierung
Hier ändern wir die HTML4-Kodierungsinformationen in HTML5-Kodierung.
HTML4
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />HTML5
HTML5-Migration
<meta charset="utf-8">Außerdem erlaubt HTML5, das type-Attribut bei <script>- und <style>-Tags wegzulassen, da es standardmäßig text/javascript bzw. text/css ist.
Schritt 3: Hinzufügen von HTML5Shiv
Alle modernen Browser unterstützen die neuen semantischen HTML5-Elemente. Außerdem können Sie älteren Browsern beibringen, mit „unbekannten Elementen“ umzugehen. 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 überholt ist, da alle aktuellen Browser semantische HTML5-Elemente 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: Umstellung auf semantische HTML5-Elemente
Zuerst sehen Sie ein Beispiel, in dem semantische HTML4-Elemente verwendet werden.
Beispiel für HTML4-Elemente:
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>© 2020 All rights reserved.</p>
</div>
</body>
</html>Nun sehen Sie die Migration von HTML4-Elementen zu semantischen HTML5-Elementen.
Beispiel für semantische HTML5-Elemente:
Beispiel für semantische HTML5-Elemente:
<!DOCTYPE html>
<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;
}
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>© 2020 All rights reserved.</p>
</footer>
</body>
</html>Der Unterschied zwischen den Elementen <section>, <article> und <div>
In HTML5 gibt es einige Unterschiede zwischen den Elementen <section>, <article> und <div>. Insbesondere:
<code><section></code>gruppiert thematisch zusammengehörige Inhalte, typischerweise mit einer Überschrift.<code><article></code>steht für in sich geschlossene Inhalte, die unabhängig verteilt oder wiederverwendet werden können.<code><div></code>ist ein generischer Container ohne semantische Bedeutung, der nur für Styling oder Skripting verwendet wird.
Beispiel für die <section>-, <article>- und <div>-Tags:
Beispiel für die <section>-, <article>- und <div>-Tags
<!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>Practice
Which of the following are new elements introduced in HTML5 as per the content in the provided URL?