Μεταφορά του HTML5

Μεταφορά από HTML4 σε HTML5

Αυτό το κεφάλαιο εξηγεί πώς να μεταφέρετε μια τυπική σελίδα HTML4 σε τυπική σελίδα HTML5.

Αυτό το κεφάλαιο δείχνει πώς να μετατρέπετε μια υπάρχουσα σελίδα HTML4 σε σελίδα HTML5 χωρίς να καταστρέφετε το αρχικό περιεχόμενο και τη δομή.

Note:Μπορείτε να χρησιμοποιήσετε τις ίδιες τεχνικές για να μεταφέρετε από HTML4 και XHTML σε HTML5.

Τυπική HTML4 Τυπική HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <article>
<div id="footer"> <footer>

Τυπική σελίδα HTML4

Παράδειγμα

<!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>News</li>
    <li>Sports</li>
    <li>Weather</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. All rights reserved.</p>
</div>
</body>
</html>

Προσπαθήστε το Ενάντια

Change to HTML5 Doctype

Modify document type from HTML4 doctype:

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

Change to HTML5 doctype:

<!DOCTYPE html>

Προσπαθήστε το Ενάντια

Change to HTML5 encoding

Modify encoding information from HTML4:

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

Change to HTML5:

<meta charset="utf-8">

Προσπαθήστε το Ενάντια

Add shiv

All modern browsers support HTML5 semantic elements.

In addition, you can "teach" old browsers how to handle "unknown elements".

shiv added for Internet Explorer support:

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

Προσπαθήστε το Ενάντια

Note:Read more about shiv in HTML5 browser support.

Add CSS for HTML5 semantic elements

Please see the existing CSS styles:

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;
}
Duplicate with equal CSS styles for HTML5 semantic elements:
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;
}

Προσπαθήστε το Ενάντια

Change to HTML5 <header> and <footer>

Modify the <div> elements with id="header" and id="footer":

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  © 2016 CodeW3C.com. All rights reserved.
</div>

Αναθεωρήστε σε στοιχεία σημασιολογικής σημασίας HTML5 <header> και <footer>:

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© 2016 CodeW3C.com. All rights reserved.</p>
</footer>

Προσπαθήστε το Ενάντια

σε HTML5 <nav>

Αλλάξτε το στοιχείο <div> με id="menu":

<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</a></li>
    <li>Weather</li>
  </ul>
</div>

Αναθεωρήστε σε στοιχεία σημασιολογικής σημασίας HTML5 <nav>:

<nav>
  <ul>
    <li>News</li>
    <li>Sports</a></li>
    <li>Weather</li>
  </ul>
</nav>

Προσπαθήστε το Ενάντια

σε HTML5 <section>

Αλλάξτε το στοιχείο <div> με id="content":

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

Αναθεωρήστε σε στοιχεία σημασιολογικής σημασίας HTML5 <section>:

<section>
.
.
.
</section>

Προσπαθήστε το Ενάντια

σε HTML5 <article>

Αλλάξτε όλα τα στοιχεία <div> με 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>

Αναθεωρήστε σε στοιχεία σημασιολογικής σημασίας HTML5 <article>:

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

Προσπαθήστε το Ενάντια

Διαγράψτε αυτές τις "μη χρήσιμες" στυλ:

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

Προσπαθήστε το Ενάντια

Τυπική σελίδα HTML5

Τελικά μπορείτε να διαγράψετε το ετικέτα <head>. Η HTML5 δεν χρειάζεται πλέον αυτές τις ετικέτες:

Παράδειγμα

<!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>News</li>
    <li>Sports</li>
    <li>Weather</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. All rights reserved.</p>
</footer>
</body>
</html>

Προσπαθήστε το Ενάντια

Η διαφορά μεταξύ του <article>, <section> και <div>;

Στο πρότυπο HTML5, η διαφορά μεταξύ του <article>, <section> και <div> είναι μικρή και αποκαταστατική.

Στο πρότυπο HTML5, το στοιχείο <section> ορίζεται ως τοκικός κύριος των σχετικών στοιχείων.

Το στοιχείο <article> ορίζεται ως ολοκληρωμένος αυτο περιέχων κουτί των σχετικών στοιχείων.

Το στοιχείο <div> ορίζεται ως τοκικός κύριος του στοιχείου.

Πώς να το κατανοήσουμε;

Στο παραπάνω παράδειγμα, χρησιμοποιήσαμε το <section> ως κουτί των σχετικών <articles>.

Αλλά, μπορούμε επίσης να χρησιμοποιήσουμε το <article> ως κουτί άρθρου.

Παρακάτω είναι μερικά διαφορετικά παραδείγματα:

Το στοιχείο <article> μέσα στο <article>:
<article>
<h2>Παραδοσιακές Πόλεις</h2>
<article>
<h2>Λονδίνο</h2>
<p>Το Λονδίνο είναι η πρωτεύουσα της Αγγλίας. Είναι η πιο πληθυσμιακή πόλη του Ηνωμένου Βασιλείου,</p>
<p>με αστική περιοχή πάνω από 13 εκατομμύρια κατοίκους.</p>
</article>
<article>
<h2>Παρίσι</h2>
<p>Το Παρίσι είναι η πρωτεύουσα και η πιο πληθυσμιακή πόλη της Γαλλίας.</p>
</article>
<article>
<h2>Τόκιο</h2>
<p>Το Τόκιο είναι η πρωτεύουσα της Ιαπωνίας, το κέντρο της Μεγάλης Περιοχής Τόκιο,</p>
και η πιο πληθυσμιακή αστική περιοχή του κόσμου.</p>
</article>
</article>

Προσπαθήστε το Ενάντια

<article> μέσα σε <div>：</article>
<article>
<h2>Παραδοσιακές Πόλεις</h2>
<div class="city">
<h2>Λονδίνο</h2>
<p>Το Λονδίνο είναι η πρωτεύουσα της Αγγλίας. Είναι η πιο πληθυσμιακή πόλη του Ηνωμένου Βασιλείου,</p>
<p>με αστική περιοχή πάνω από 13 εκατομμύρια κατοίκους.</p>
</div>
<div class="city">
<h2>Παρίσι</h2>
<p>Το Παρίσι είναι η πρωτεύουσα και η πιο πληθυσμιακή πόλη της Γαλλίας.</p>
</div>
<div class="city">
<h2>Τόκιο</h2>
<p>Το Τόκιο είναι η πρωτεύουσα της Ιαπωνίας, το κέντρο της Μεγάλης Περιοχής Τόκιο,</p>
και η πιο πληθυσμιακή αστική περιοχή του κόσμου.</p>
</div>
</article>

Προσπαθήστε το Ενάντια

<article> με <section> μέσα σε <div>：</article>
<article>
<section>
<h2>Παραδοσιακές Πόλεις</h2>
<div class="city">
<h2>Λονδίνο</h2>
<p>Το Λονδίνο είναι η πρωτεύουσα της Αγγλίας. Είναι η πιο πληθυσμιακή πόλη του Ηνωμένου Βασιλείου,</p>
<p>με αστική περιοχή πάνω από 13 εκατομμύρια κατοίκους.</p>
</div>
<div class="city">
<h2>Παρίσι</h2>
<p>Το Παρίσι είναι η πρωτεύουσα και η πιο πληθυσμιακή πόλη της Γαλλίας.</p>
</div>
<div class="city">
<h2>Τόκιο</h2>
<p>Το Τόκιο είναι η πρωτεύουσα της Ιαπωνίας, το κέντρο της Μεγάλης Περιοχής Τόκιο,</p>
και η πιο πληθυσμιακή αστική περιοχή του κόσμου.</p>
</div>
</section>
<section>
<h2>Παραδοσιακές Χώρες</h2>
<div class="country">
<h2>Αγγλία</h2>
<p>Το Λονδίνο είναι η πρωτεύουσα της Αγγλίας. Είναι η πιο πληθυσμιακή πόλη του Ηνωμένου Βασιλείου,</p>
<p>με αστική περιοχή πάνω από 13 εκατομμύρια κατοίκους.</p>
</div>
<div class="country">
<h2>Γαλλία</h2>
<p>Το Παρίσι είναι η πρωτεύουσα και η πιο πληθυσμιακή πόλη της Γαλλίας.</p>
</div>
<div class="country">
<h2>Ιαπωνία</h2>
<p>Το Τόκιο είναι η πρωτεύουσα της Ιαπωνίας, το κέντρο της Μεγάλης Περιοχής Τόκιο,</p>
και η πιο πληθυσμιακή αστική περιοχή του κόσμου.</p>
</div>
</section>
</article>

Προσπαθήστε το Ενάντια