Ultimele tutoriale de dezvoltare web

HTML migrațiune


Migrarea de la HTML4 la HTML5

Acest capitol este în întregime despre cum să migreze de la HTML4 la HTML5.

Acest capitol demonstrează modul de a converti o pagină HTML4 într-o pagină HTML5, fără a distruge nimic din conținutul sau structura originală.

Puteți migra de la XHTML la HTML5, folosind aceeași rețetă.

HTML4 tipice HTML5 tipice
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div class="article"> <article>
<div id="footer"> <footer>

Un exemplu tipic HTML4 Pagina

Exemplu

<!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>&amp;copy; 2014 Monday Times. All rights reserved.</p>
</div>

</body>
</html>
Încearcă - l singur »

Schimbarea la HTML5 Doctype

Schimbarea doctype, de la DOCTYPE HTML4:

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

la DOCTYPE HTML5:

Exemplu

<!DOCTYPE html>
Încearcă - l singur »

Schimbarea la HTML5 Codare

Modificați informațiile de codificare, de la HTML4:

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

la HTML5:

Exemplu

<meta charset="utf-8">
Încearcă - l singur »

Se adaugă Shiv

HTML5 elemente semantice sunt acceptate în toate browserele moderne.

În plus, aveți posibilitatea să "teach" browsere mai vechi cum să se ocupe de "unknown elements" .

Adăugați the shiv pentru suport Internet Explorer:

Exemplu

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

Citiți despre the shiv în HTML5 Suport browser .


Adăugați CSS pentru HTML5 semantic Elemente

Uita-te la stilurile CSS existente:

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 cu stiluri CSS egale pentru elementele semantice HTML5:

Exemplu

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;
}
Încearcă - l singur »

Schimbarea la HTML5 <header> si <footer>

Modificarea <div> elemente cu id="header" si id="footer" :

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>&amp;copy; 2014 w3ii. All rights reserved.</p>
</div>

la HTML5 semantic <header> si <footer> elemente:

Exemplu

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>&copy; 2014 w3ii. All rights reserved.</p>
</footer>
Încearcă - l singur »

Schimbarea la HTML5 <nav>

Schimbarea <div> elementul cu id="menu" :

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

la un element semantic HTML5 <nav>:

Exemplu

<nav>
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</nav>
Încearcă - l singur »

Schimbarea la HTML5 <section>

Schimbarea <div> elementul cu id="content" :

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

la un element HTML5 semantic <section>:

Exemplu

<section>
.
.
.
</section>
Încearcă - l singur »

Schimbarea la HTML5 <article>

Schimbarea toate <div> Element cu 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>

la HTML5 semantic <article> elemente:

Exemplu

<article>
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
  lurum hurum turum.</p>
</article>
Încearcă - l singur »

Eliminați aceste "no longer needed" este "no longer needed" de "no longer needed" <style> elemente:

Exemplu

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;
}
Încearcă - l singur »

Un exemplu tipic HTML5 pagină

În cele din urmă puteți elimina <head> tag - uri. Ele nu sunt necesare în HTML5:

Exemplu

<!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>

<article>
  <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>
</article>

<article>
<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>
</article>

</section>

<footer>
  <p>&amp;copy; 2014 Monday Times. All rights reserved.</p>
</footer>

</body>
</html>
Încearcă - l singur »

Diferența dintre <article> <section> și <div>

Există o confuzie (lack of) diferență în standardul HTML5, între <article> <section> și <div> .

În standardul HTML5, <section> Elementul este definit ca un bloc de elemente conexe.

<article> Elementul este definit ca un bloc complet, autonom de elemente conexe.

<div> Elementul este definit ca un bloc de elemente pentru copii.

Cum să interpreteze asta?

În exemplul de mai sus, am folosit <section> ca un container pentru conexe <articles> .

Dar, am putea fi folosit <article> ca un container pentru articole, de asemenea.

Iată câteva exemple diferite:

<article> în <article> :

<article>

<h2>Famous Cities</h2>

<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</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, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>

</article>
Încearcă - l singur »

<div> în <article> :

<article>

<h2>Famous Cities</h2>

<div class="city">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</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, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</article>
Încearcă - l singur »

<div> în <section> în <article> :

<article>

<section>
<h2>Famous Cities</h2>

<div class="city">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</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, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>

<section>
<h2>Famous Countries</h2>

<div class="country">
<h2>England</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</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, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>

</article>
Încearcă - l singur »