HTML5 Migración desde HTML4
Transición de HTML4 a HTML5
Esta sección trata completamente sobre cómo migrar de HTML4 a HTML5.
Esta sección muestra cómo convertir una página HTML4 en una página HTML5 sin romper ningún contenido ni estructura original.
También puedes migrar de XHTML a HTML5 utilizando el mismo método.
| HTML4 típico | HTML5 típico |
|---|---|
| <div id="header"> | <header> |
| <div id="menu"> | <nav> |
| <div id="content"> | <section> |
| <div class="article"> | <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.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>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 class="article">
<h2>News Article</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>News Article</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>&copy; 2024 Monday Times. All rights reserved.</p>
</div>
</body>
</html>
Pruébalo tú mismo »
Cambiar al doctype de HTML5
Cambia el doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
al doctype de HTML5:
Cambiar a la codificación HTML5
Cambia la información de codificación:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
a la codificación HTML5:
Añadir HTML5Shiv
Los nuevos elementos semánticos de HTML5 son compatibles con todos los navegadores modernos. Además, puedes “enseñar” a los navegadores antiguos a trabajar con “elementos desconocidos”.
Sin embargo, IE8 y versiones anteriores no permiten aplicar estilos a elementos desconocidos. Por lo tanto, HTML5Shiv es una solución en JavaScript que permite aplicar estilos a los elementos HTML5 en versiones de Internet Explorer anteriores a la versión 9.
Añade HTML5Shiv:
Ejemplo
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
Pruébalo tú mismo »
Aprende más sobre HTML5Shiv en la sección Compatibilidad de HTML5 con los navegadores.
Cambiar a elementos semánticos de HTML5
El CSS existente contiene IDs y clases usados para dar estilo a los elementos:
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;
}
Reemplázalos con estilos CSS equivalentes para los elementos semánticos de 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, reemplaza los elementos por elementos semánticos de HTML5:
Ejemplos
<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>Lorem ipsum dolor sit amet..</p>
</article>
<article>
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet..</p>
</article>
</section>
<footer>
<p>© 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
Pruébalo tú mismo »
La diferencia entre <article>, <section> y <div>
En el estándar HTML5, no existe una diferencia estricta entre <article>, <section> y <div>.
En el estándar HTML5, el elemento <section> se define como un bloque de contenido relacionado.
El elemento <article> se define como un bloque completo y autónomo de contenido relacionado.
El elemento <div> se define como un bloque de elementos secundarios.
¿Cómo interpretar esto?
En el ejemplo anterior, usamos <section> como contenedor para elementos <article> relacionados.
Pero también podríamos haber usado <article> como contenedor para los artículos.
A continuación se muestran varios ejemplos diferentes:
<article> dentro de <article>:
<article>
<h2>Famous Cities</h2>
<article>
<h2>London</h2>
<p>London is the capital city of England.</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.</p>
</article>
</article>
Pruébalo tú mismo »
<div> dentro de <article>:
<article>
<h2>Famous Cities</h2>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</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.</p>
</div>
</article>
Pruébalo tú mismo »
<div> dentro de <section> dentro de <article>:
<article>
<section>
<h2>Famous Cities</h2>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</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.</p>
</div>
</section>
<section>
<h2>Famous Countries</h2>
<div class="country">
<h2>England</h2>
<p>London is the capital city of England.</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.</p>
</div>
</section>
</article>
Pruébalo tú mismo »
