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>&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:
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:
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>&copy; 2014 w3ii. All rights reserved.</p>
</div>
la HTML5 semantic <header> si <footer> elemente:
Exemplu
<header>
<h1>Monday Times</h1>
</header>
.
.
.
<footer>
<p>© 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>:
Schimbarea la HTML5 <section>
Schimbarea <div> elementul cu id="content" :
<div id="content">
.
.
.
</div>
la un element HTML5 semantic <section>:
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>&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 »