HTML5-migrering

Migrering från HTML4 till HTML5

Detta kapitel förklarar hur man migrerar från en typisk HTML4-sida till en typisk HTML5-sida.

Detta kapitel visar hur man konverterar en befintlig HTML4-sida till en HTML5-sida utan att förstöra den ursprungliga innehållet och strukturen.

Kommentar:Du kan använda samma tekniker för att migrera från HTML4 och XHTML till HTML5.

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

Typisk HTML4-sida

Exempel

<!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>Nyheter</li>
    <li>Sport</li>
    <li>Väder</li>
  </ul>
</div>
<div id="content">
<h2>Nyhetsavsnitt</h2>
<div id="post">
  <h2>Nyhetsartikel</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>Nyhetsartikel</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. Alla rättigheter förbehållna.</p>
</div>
</body>
</html>

Prova själv

Till HTML5 Doctype

Ändra dokumenttyp, från HTML4 doctype:

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

Ändra till HTML5 doctype:

<!DOCTYPE html>

Prova själv

Till HTML5-kodning

Ändra kodingsinformation, från HTML4:

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

Ändra till HTML5:

<meta charset="utf-8">

Prova själv

Lägg till shiv

Alla moderna webbläsare stöder HTML5 semantiska element.

Dessutom kan du "lär" gamla webbläsare hur de ska hantera "okända element".

Shiv tillägg för Internet Explorer-stöd:

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

Prova själv

Kommentar:Läs mer om shiv i stöd för HTML5-webbläsare.

Lägg till CSS för HTML5 semantiska element

Se redan befintliga CSS-stilar:

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;
}
Kopiera med samma CSS-stilar för HTML5 semantiska element:
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;
}

Prova själv

Till HTML5 <header> och <footer>

Ändra <div> elementen med id="header" och id="footer":

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© 2016 CodeW3C.com. Alla rättigheter förbehållna.</p>
</div>

Ändra till HTML5-semantiska element <header> och <footer>:

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© 2016 CodeW3C.com. Alla rättigheter förbehållna.</p>
</footer>

Prova själv

Till HTML5 <nav>

Ändra det <div>-element som har id="menu":

<div id="menu">
  <ul>
    <li>Nyheter</li>
    <li>Sports</a></li>
    <li>Väder</li>
  </ul>
</div>

Ändra till HTML5-semantiska element <nav>:

<nav>
  <ul>
    <li>Nyheter</li>
    <li>Sports</a></li>
    <li>Väder</li>
  </ul>
</nav>

Prova själv

Till HTML5 <section>

Ändra det <div>-element som har id="content":

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

Ändra till HTML5-semantiska element <section>:

<section>
.
.
.
</section>

Prova själv

Till HTML5 <article>

Ändra alla <div>-element med class="post":

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

Ändra till HTML5-semantiska element <article>:

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

Prova själv

Ta bort dessa "inte längre nödvändiga" stilar:

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;
}

Prova själv

En typisk HTML5-sida

Du kan sedan ta bort <head>-taggen. De behövs inte längre i HTML5:

Exempel

<!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>Nyheter</li>
    <li>Sport</li>
    <li>Väder</li>
  </ul>
</nav>
<section>
<h2>Nyhetsavsnitt</h2>
<div id="post">
  <h2>Nyhetsartikel</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>Nyhetsartikel</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. Alla rättigheter förbehållna.</p>
</footer>
</body>
</html>

Prova själv

Skillnaden mellan <article>, <section> och <div>:

I HTML5-standarden är skillnaden mellan <article>, <section> och <div> mycket liten och kan vara förvirrande.

I HTML5-standarden är elementet <section> placerat som en blockbehållare för relaterade element.

Elementet <article> definieras som en helt självinkluderande blockbehållare för relaterade element.

Elementet <div> definieras som en blockelement underläggare.

Hur förstår man detta?

I de ovanstående exemplen använde vi <section> som behållare för relaterade <articles>.

Men vi kan också använda <article> som en behållare för artiklar.

Nedan är några olika exempel:

I artikeln <article> in <article>:
<article>
<h2>Kända städer</h2>
<article>
<h2>London</h2>
<p>London är huvudstaden i England. Det är den mest befolkade staden i Förenade kungariket,</p>
<p>med ett storstadsområde över 13 miljoner invånare.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris är huvudstaden och mest befolkade staden i Frankrike.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo är huvudstaden i Japan, mittpunkten för den större Tokyo-området,</p>
och den mest befolkade storstadsområdet i världen.</p>
</article>
</article>

Prova själv

<article> inuti <div>：</article>
<article>
<h2>Kända städer</h2>
<div class="city">
<h2>London</h2>
<p>London är huvudstaden i England. Det är den mest befolkade staden i Förenade kungariket,</p>
<p>med ett storstadsområde över 13 miljoner invånare.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris är huvudstaden och mest befolkade staden i Frankrike.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo är huvudstaden i Japan, mittpunkten för den större Tokyo-området,</p>
och den mest befolkade storstadsområdet i världen.</p>
</div>
</article>

Prova själv

<article> inuti <section> inuti <div>：</article>
<article>
<section>
<h2>Kända städer</h2>
<div class="city">
<h2>London</h2>
<p>London är huvudstaden i England. Det är den mest befolkade staden i Förenade kungariket,</p>
<p>med ett storstadsområde över 13 miljoner invånare.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris är huvudstaden och mest befolkade staden i Frankrike.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo är huvudstaden i Japan, mittpunkten för den större Tokyo-området,</p>
och den mest befolkade storstadsområdet i världen.</p>
</div>
</section>
<section>
<h2>Kända länder</h2>
<div class="country">
<h2>England</h2>
<p>London är huvudstaden i England. Det är den mest befolkade staden i Förenade kungariket,</p>
<p>med ett storstadsområde över 13 miljoner invånare.</p>
</div>
<div class="country">
<h2>Frankrike</h2>
<p>Paris är huvudstaden och mest befolkade staden i Frankrike.</p>
</div>
<div class="country">
<h2>Japan</h2>
<p>Tokyo är huvudstaden i Japan, mittpunkten för den större Tokyo-området,</p>
och den mest befolkade storstadsområdet i världen.</p>
</div>
</section>
</article>

Prova själv