Migracja HTML5

Przenoszenie z HTML4 do HTML5

Rozdział ten wyjaśnia, jak przenieść się z typowej strony HTML4 do typowej strony HTML5.

Rozdział ten pokazuje, jak przekształcić istniejącą stronę HTML4 w stronę HTML5, nie niszcząc jej oryginalnych treści i struktury.

Komentarz:Możesz użyć tych samych technik, aby przenieść się z HTML4 oraz XHTML do HTML5.

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

Typowy strona HTML4

Przykład

<!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>Informacje</li>
    <li>Sport</li>
    <li>Pogoda</li>
  </ul>
</div>
<div id="content">
<h2> Sekcja Informacyjna</h2>
<div id="post">
  <h2>Artykuł Informacyjny</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>Artykuł Informacyjny</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. Wszelkie prawa zastrzeżone.</p>
</div>
</body>
</html>

Spróbuj sam

na Doctype HTML5

Zmień typ dokumentu z doctype HTML4:

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

Zmień na doctype HTML5:

<!DOCTYPE html>

Spróbuj sam

na kodowanie HTML5

Zmień informacje o kodowaniu z HTML4:

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

Zmień na HTML5:

<meta charset="utf-8">

Spróbuj sam

Dodaj shiv

Wszystkie współczesne przeglądarki wspierają elementy semantyczne HTML5.

Dodatkowo, możesz "nauczyć" przestarzałych przeglądarek jak obsługiwać "nieznane elementy".

Dodaj shiv dla obsługi Internet Explorer:

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

Spróbuj sam

Komentarz:Przeczytaj więcej o shiv w obszarze obsługi przeglądarek HTML5.

Dodaj CSS dla elementów semantycznych HTML5

Zobacz istniejące style CSS:

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;
}
Powtarzaj z równymi stylami CSS dla elementów semantycznych HTML5:
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;
}

Spróbuj sam

na HTML5 <header> i <footer>

Zmień elementy <div> z id="header" i id="footer":

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© 2016 CodeW3C.com. Wszelkie prawa zastrzeżone.</p>
</div>

Zmień na elementy semantyczne HTML5 <header> i <footer>:

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© 2016 CodeW3C.com. Wszelkie prawa zastrzeżone.</p>
</footer>

Spróbuj sam

na HTML5 <nav>

Zmień element <div> z id="menu":

<div id="menu">
  <ul>
    <li>Informacje</li>
    <li>Sports</a></li>
    <li>Pogoda</li>
  </ul>
</div>

Zmień na elementy semantyczne HTML5 <nav>:

<nav>
  <ul>
    <li>Informacje</li>
    <li>Sports</a></li>
    <li>Pogoda</li>
  </ul>
</nav>

Spróbuj sam

na HTML5 <section>

Zmień element <div> z id="content":

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

Zmień na elementy semantyczne HTML5 <section>:

<section>
.
.
.
</section>

Spróbuj sam

na HTML5 <article>

Zmień wszystkie elementy <div> z klasą "post":

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

Zmień na elementy semantyczne HTML5 <article>:

<article>
  <h2>Artykuł Informacyjny</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</article>

Spróbuj sam

Usuń te "niepotrzebne" style:

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

Spróbuj sam

Typowy dokument HTML5

Ostatecznie możesz usunąć znacznik <head>. W HTML5 nie są już one potrzebne:

Przykład

<!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>Informacje</li>
    <li>Sport</li>
    <li>Pogoda</li>
  </ul>
</nav>
<section>
<h2> Sekcja Informacyjna</h2>
<div id="post">
  <h2>Artykuł Informacyjny</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>Artykuł Informacyjny</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. Wszelkie prawa zastrzeżone.</p>
</footer>
</body>
</html>

Spróbuj sam

Różnice między <article>, <section> a <div>：

W standardzie HTML5, różnice między <article>, <section> a <div> są małe, ale mogą być mylące.

W standardzie HTML5, element <section> zdefiniowany jest jako blokowy element powiązany.

Element <article> zdefiniowany jest jako kompletny, zamknięty blok dla powiązanych elementów.

Element <div> zdefiniowany jest jako blokowy potomek.

Jak zrozumieć to?

W powyższych przykładach użyliśmy <section> jako kontenera dla powiązanych <articles>.

Ale możemy również używać <article> jako kontenera dla artykułów.

Poniżej znajdują się różne przykłady：

W <article> znajduje się <article>：
<article>
<h2>Znane miasta</h2>
<article>
<h2>London</h2>
<p>London jest stolicą Anglii. Jest najbardziej zaludnionym miastem w Zjednoczonym Królestwie,</p>
<p>z obszarem metropolitalnym przekraczającym 13 milionów mieszkańców.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris jest stolicą i najbardziej zaludnionym miastem Francji.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo jest stolicą Japonii, centrum obszaru metropolitalnego Greater Tokyo,</p>
i najbardziej zaludnionego obszaru metropolitalnego na świecie.</p>
</article>
</article>

Spróbuj sam

<article> w <div>：</article>
<article>
<h2>Znane miasta</h2>
<div class="city">
<h2>London</h2>
<p>London jest stolicą Anglii. Jest najbardziej zaludnionym miastem w Zjednoczonym Królestwie,</p>
<p>z obszarem metropolitalnym przekraczającym 13 milionów mieszkańców.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris jest stolicą i najbardziej zaludnionym miastem Francji.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo jest stolicą Japonii, centrum obszaru metropolitalnego Greater Tokyo,</p>
i najbardziej zaludnionego obszaru metropolitalnego na świecie.</p>
</div>
</article>

Spróbuj sam

<article> w <section> w <div>：</article>
<article>
<section>
<h2>Znane miasta</h2>
<div class="city">
<h2>London</h2>
<p>London jest stolicą Anglii. Jest najbardziej zaludnionym miastem w Zjednoczonym Królestwie,</p>
<p>z obszarem metropolitalnym przekraczającym 13 milionów mieszkańców.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris jest stolicą i najbardziej zaludnionym miastem Francji.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo jest stolicą Japonii, centrum obszaru metropolitalnego Greater Tokyo,</p>
i najbardziej zaludnionego obszaru metropolitalnego na świecie.</p>
</div>
</section>
<section>
<h2>Znane kraje</h2>
<div class="country">
<h2>Anglia</h2>
<p>London jest stolicą Anglii. Jest najbardziej zaludnionym miastem w Zjednoczonym Królestwie,</p>
<p>z obszarem metropolitalnym przekraczającym 13 milionów mieszkańców.</p>
</div>
<div class="country">
<h2>Francja</h2>
<p>Paris jest stolicą i najbardziej zaludnionym miastem Francji.</p>
</div>
<div class="country">
<h2>Japonia</h2>
<p>Tokyo jest stolicą Japonii, centrum obszaru metropolitalnego Greater Tokyo,</p>
i najbardziej zaludnionego obszaru metropolitalnego na świecie.</p>
</div>
</section>
</article>

Spróbuj sam