Migración HTML5

Migración de HTML4 a HTML5

Este capítulo explica cómo migrar de una página HTML4 típica a una HTML5 típica.

Este capítulo muestra cómo convertir una página HTML4 existente en una página HTML5 sin dañar el contenido original y la estructura.

Notas:Puede usar las mismas técnicas para migrar de HTML4 y XHTML a HTML5.

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

Página HTML4 típica

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>Sección de Noticias</h2>
<div id="post">
  <h2>Artículo de Noticias</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>Artículo de Noticias</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. Todos los derechos reservados.</p>
</div>
</body>
</html>

Prueba personalmente

a HTML5 Doctype

Modificar el tipo de documento, de HTML4 doctype:

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

Modificar el doctype a HTML5:

<!DOCTYPE html>

Prueba personalmente

a la codificación de HTML5

Modificar la información de codificación, de HTML4:

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

Cambiar a HTML5:

<meta charset="utf-8">

Prueba personalmente

Añadir shiv

Todos los navegadores modernos admiten elementos semánticos de HTML5.

Además, puede "enseñar" a los navegadores antiguos cómo manejar los "elementos desconocidos".

Añadir shiv para compatibilidad con Internet Explorer:

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

Prueba personalmente

Notas:Lea más sobre shiv en la compatibilidad de navegadores HTML5.

Añadir CSS para elementos semánticos de HTML5

Vea los 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 de HTML5:
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;
}

Prueba personalmente

por <header> y <footer> en HTML5

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

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© 2016 CodeW3C.com. Todos los derechos reservados.</p>
</div>

Modifique a los elementos semánticos de HTML5 <header> y <footer>:

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© 2016 CodeW3C.com. Todos los derechos reservados.</p>
</footer>

Prueba personalmente

a HTML5 <nav>

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

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

Modifique a los elementos semánticos de HTML5 <nav>:

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

Prueba personalmente

a HTML5 <section>

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

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

Modifique a los elementos semánticos de HTML5 <section>:

<section>
.
.
.
</section>

Prueba personalmente

a HTML5 <article>

Cambie todos los elementos <div> con class="post":

<div class="post">
  <h2>Artículo de Noticias</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

Modifique a los elementos semánticos de HTML5 <article>:

<article>
  <h2>Artículo de Noticias</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</article>

Prueba personalmente

Elimine estos estilos "ya no necesarios":

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

Prueba personalmente

Página típica de HTML5

Finalmente, puede eliminar la etiqueta <head>. Ya no es necesaria 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>Sección de Noticias</h2>
<div id="post">
  <h2>Artículo de Noticias</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>Artículo de Noticias</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. Todos los derechos reservados.</p>
</footer>
</body>
</html>

Prueba personalmente

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

En la norma HTML5, la diferencia entre <article>, <section> y <div> es pequeña y puede ser confusa.

En la norma HTML5, el elemento <section> se sitúa como un bloque de elementos relacionados.

El elemento <article> se define como un bloque completamente autocontenedor de elementos relacionados.

El elemento <div> se define como un bloque de subelementos.

¿Cómo entenderlo?

En el ejemplo anterior, utilizamos <section> como contenedor de <articles> relacionados.

Sin embargo, también podemos usar <article> como contenedor de artículos.

Aquí hay algunos ejemplos diferentes:

El elemento <article> dentro de <article>:
<article>
<h2>Ciudades Famosas</h2>
<article>
<h2>London</h2>
<p>London es la ciudad capital de Inglaterra. Es la ciudad más poblada del Reino Unido,</p>
<p>con una área metropolitana de más de 13 millones de habitantes.</p>
</article>
<article>
<h2>París</h2>
<p>París es la capital y la ciudad más poblada de Francia.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo es la capital de Japón, el centro del Gran Área de Tokio,</p>
y la área metropolitana más poblada del mundo.</p>
</article>
</article>

Prueba personalmente

<article> con <div>：</article>
<article>
<h2>Ciudades Famosas</h2>
<div class="city">
<h2>London</h2>
<p>London es la ciudad capital de Inglaterra. Es la ciudad más poblada del Reino Unido,</p>
<p>con una área metropolitana de más de 13 millones de habitantes.</p>
</div>
<div class="city">
<h2>París</h2>
<p>París es la capital y la ciudad más poblada de Francia.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo es la capital de Japón, el centro del Gran Área de Tokio,</p>
y la área metropolitana más poblada del mundo.</p>
</div>
</article>

Prueba personalmente

<article> con <section> dentro de <div>：</article>
<article>
<section>
<h2>Ciudades Famosas</h2>
<div class="city">
<h2>London</h2>
<p>London es la ciudad capital de Inglaterra. Es la ciudad más poblada del Reino Unido,</p>
<p>con una área metropolitana de más de 13 millones de habitantes.</p>
</div>
<div class="city">
<h2>París</h2>
<p>París es la capital y la ciudad más poblada de Francia.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo es la capital de Japón, el centro del Gran Área de Tokio,</p>
y la área metropolitana más poblada del mundo.</p>
</div>
</section>
<section>
<h2>Países Famosos</h2>
<div class="country">
<h2>Inglaterra</h2>
<p>London es la ciudad capital de Inglaterra. Es la ciudad más poblada del Reino Unido,</p>
<p>con una área metropolitana de más de 13 millones de habitantes.</p>
</div>
<div class="country">
<h2>Francia</h2>
<p>París es la capital y la ciudad más poblada de Francia.</p>
</div>
<div class="country">
<h2>Japón</h2>
<p>Tokyo es la capital de Japón, el centro del Gran Área de Tokio,</p>
y la área metropolitana más poblada del mundo.</p>
</div>
</section>
</article>

Prueba personalmente