Migración HTML5

Migración de HTML4 a HTML5

Este capítulo trata sobre como migrar de HTML4 a HTML5. Aquí se muestra como convertir una página HTML4 a una página HTML5, sin destruir ningún de los contenidos original o estructura original. Se puede migrar XMTML a HTML5, usando la misma receta.

HTML4
<div id="header">
<div id="menu">
<div id="content">
<div class="article">
<div id="footer">

HTML5
<header>
<menu>
<section>
<article>
<footer>

Página en 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.9em;
}
div#header, div#footer {
    padding: 10px;
    color: white;
    background-color: black;
}
div#content {
    margin: 5px;
    padding: 10px;
    background-color: lightgrey;
}
div.article {
    margin: 5px;
    padding: 10px;
    background-color: white;
}
div#menu ul {
    padding: 0;
}
div#menu ul li {
    display: inline;
    margin: 5px;
}
</style>
</head>
<body>
<div id="header">
  <h1>Periodico</h1>
</div>
<div id="menu">
  <ul>
    <li>Noticias</li>
    <li>Deportes</li>
    <li>Clima</li>
  </ul>
</div>
<div id="content">
  <h2>Sección de Noticias</h2>
  <div class="article">
    <h2>Artículo Noticias</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  </div>
  <div class="article">
    <h2>Artículo Noticias</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  </div>
</div>
<div id="footer">
  <p>&amp;copy; 2016 Noticias. Todos los derechos reservados.</p>
</div>
</body>
</html>

Cambiar a el Doctype HTML5

El doctype HTM4:

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

Por el doctype HTML5:

<!DOCTYPE html>

Cambiar a la codificación HTML5

La codificación HTML4:

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

Por la codificación HTML5:

<meta charset="utf-8">

Añadir el HTML5Shiv

Los nuevos elementos semánticos de HTML5 son compatibles con todos los navegadores web modernos. Para los navegadores web antiguos se les puede enseñar a cómo manejar los elementos desconocidos para ellos. Pero Internet Explorer 8 y anteriores no permiten el estilo de elementos desconocidos. Por lo tanto, HTML5Shiv es una solución alternativa de Javascript para habilitar el estilo de elementos HTML5 en versiones de Internet explorer 8 y anteriores.

El siguiente ejemplo muestra el código para agregar HTML5Shiv:

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

Cambiar a Elementos Semánticos HTML5

El CSS existente (HTML4) contiene id y class para dar estilos a los elementos HTML:

body {
    font-family: Verdana,sans-serif;
    font-size: 0.9em;
}
div#header, div#footer {
    padding: 10px;
    color: white;
    background-color: black;
}
div#content {
    margin: 5px;
    padding: 10px;
    background-color: lightgrey;
}
div.article {
    margin: 5px;
    padding: 10px;
    background-color: white;
}
div#menu ul {
    padding: 0;
}
div#menu ul li {
    display: inline;
    margin: 5px;
}

Remplazar los estilos CSS para los elementos semánticos HTML5:

body {
    font-family: Verdana,sans-serif;
    font-size: 0.9em;
}
header, footer {
    padding: 10px;
    color: white;
    background-color: black;
}
section {
    margin: 5px;
    padding: 10px;
    background-color: lightgrey;
}
article {
    margin: 5px;
    padding: 10px;
    background-color: white;
}
nav ul {
    padding: 0;
}
nav ul li {
    display: inline;
    margin: 5px;
}

Finalmente, cambiar los elementos HTML4 por los elementos semánticos HTML5:

<body>
<header>
  <h1>Noticias</h1>
</header>
<nav>
  <ul>
    <li>Noticias</li>
    <li>Deportes</li>
    <li>Clima</li>
  </ul>
</nav>
<section>
  <h2>Sección de Noticias</h2>
  <article>
    <h2>Artículo Noticias</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  </article>
  <article>
    <h2>Artículo Noticias</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  </article>
</section>
<footer>
  <p>&copy; 2014 Noticias. Todos los derechos Reservados.</p>
</footer>
</body>

La diferencia entre article, section y div

Hay una diferencia confusa en el estandard HTML5 entre <article>, <section> y <div> que los define de la siguiente manera:

El elemento <section> es definido como un bloque de elementos relacionados.
El elemento <article> es definidio como un bloque completo y autónomo de elementos relacionados.
El elemento <div> es definico como un bloque de elementos secundarios.

¿Cómo interpretar eso?

En el ejemplo utilizado anteriormente, usamos el elemento <section> como un contenedor de elementos <article> relacionados.

Pero podriamos haber usado un elemento <article> como contenedor de los elementos <article> relacionados también.
También podriamos haber usado un elemento <article> como contenedor de los elementos <div> relacionados.
o en casos necesarios podriamos haber usado un elemento <article> como contenedor de elementos <section> relacionados que contienen elementos <div> relacionados.