Los últimos tutoriales de desarrollo web

Migración HTML5


La migración de HTML 4 a HTML5

Este capítulo es del todo acerca de cómo migrar de HTML 4 a HTML5.

En este capítulo se muestra cómo convertir una página HTML 4 en una página HTML 5, sin destruir nada del contenido o estructura original.

Puede migrar de XHTML para HTML5, usando la misma receta.

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

Una típica página HTML 4

Ejemplo

<!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>
Inténtalo tú mismo "

Cambiar a HTML5 Doctype

Cambiar el tipo de documento, desde el tipo de documento HTML 4:

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

al tipo de documento HTML 5:

Ejemplo

<!DOCTYPE html>
Inténtalo tú mismo "

Cambiar a HTML5 Codificación

Cambiar la información de codificación, desde HTML 4:

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

a HTML5:

Ejemplo

<meta charset="utf-8">
Inténtalo tú mismo "

Añadir El Shiv

HTML5 elementos semánticos son compatibles con todos los navegadores modernos.

Además, se puede "teach" los navegadores antiguos cómo manejar "unknown elements" .

Añadir the shiv para el soporte de Internet Explorer:

Ejemplo

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

Lea acerca de the shiv en HTML5 de compatibilidad con navegadores .


Añadir CSS para HTML5 semántico Elementos

Mire sus estilos CSS existentes:

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

Duplicar con estilos CSS iguales para elementos semánticos HTML5:

Ejemplo

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;
}
Inténtalo tú mismo "

Cambiar a HTML5 <header> y <footer>

Cambiar los <div> elementos con id="header" y id="footer" :

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

a HTML5 semánticas <header> y <footer> elementos:

Ejemplo

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>&copy; 2014 w3ii. All rights reserved.</p>
</footer>
Inténtalo tú mismo "

El cambio a HTML5 <nav>

Cambiar el <div> elemento con id="menu" :

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

a un elemento HTML5 semántica <nav>:

Ejemplo

<nav>
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</nav>
Inténtalo tú mismo "

El cambio a HTML5 <section>

Cambiar el <div> elemento con id="content" :

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

a un elemento HTML5 semántica <sección>:

Ejemplo

<section>
.
.
.
</section>
Inténtalo tú mismo "

El cambio a HTML5 <article>

Cambiar todo <div> elemento con 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>

a HTML5 semánticas <article> elementos:

Ejemplo

<article>
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
  lurum hurum turum.</p>
</article>
Inténtalo tú mismo "

Remover estos "no longer needed" <style> elementos:

Ejemplo

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;
}
Inténtalo tú mismo "

Una típica página HTML5

Por último, puede eliminar los <head> etiquetas. No son necesarios en HTML5:

Ejemplo

<!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>
Inténtalo tú mismo "

La diferencia entre <article> <section> y <div>

Hay un confuso (lack of) la diferencia en el estándar HTML 5, entre <article> <section> y <div> .

En el estándar HTML 5, la <section> elemento se define como un bloque de elementos relacionados.

La <article> elemento se define como un bloque completo, autónomo de los elementos relacionados.

La <div> elemento se define como un bloque de elementos de niños.

Cómo interpretar eso?

En el ejemplo anterior, hemos utilizado <section> como un contenedor para relacionados <articles> .

Sin embargo, podríamos haber utilizado <article> como contenedor de artículos también.

Estos son algunos ejemplos diferentes:

<article> en <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>
Inténtalo tú mismo "

<div> en <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>
Inténtalo tú mismo "

<div> en <section> en <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>
Inténtalo tú mismo "