Migración de HTML5
Migración de HTML4 a HTML5
Este capítulo trata completamente sobre cómo migrar de HTML4 a HTML5 .
Este capítulo demuestra cómo convertir una página HTML4 en una página HTML5, sin destruir nada del contenido o estructura original.
Puede migrar de XHTML a HTML5, usando la misma receta.
| HTML4 típico | HTML5 típico |
|---|
| <div id = "encabezado"> | <encabezado> |
| <div id = "menu"> | <nav> |
| <div id = "contenido"> | <sección> |
| <div class = "article"> | <artículo> |
| <div id = "footer"> | <pie de página> |
Una típica página HTML4
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; 2016 Monday Times. All rights reserved.</p>
</div>
</body>
</html>
Pruebelo usted mismo »
Cambiar a Doctype HTML5
Cambiar el tipo de documento :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
al doctype HTML5:
Cambiar a codificación HTML5
Cambiar la información de codificación :
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
a la codificación HTML5:
Agregar The HTML5Shiv
Los nuevos elementos semánticos HTML5 son compatibles con todos los navegadores modernos. Además, puedes "enseñar" a navegadores más antiguos cómo manejar "elementos desconocidos".
Sin embargo, IE8 y anteriores, no permiten el diseño de elementos desconocidos. Por lo tanto, HTML5Shiv es una solución de JavaScript para permitir el diseño de elementos HTML5 en versiones de Internet Explorer anteriores a la versión 9.
Agregue el HTML5Shiv:
Ejemplo
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
Pruebelo usted mismo »
Cambiar a elementos semánticos HTML5
El CSS existente contiene identificadores y clases para diseñar 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;}
Reemplazar con estilos CSS iguales para 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, cambie los elementos a elementos semánticos HTML5:
Ejemplo
<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, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
<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>
</article>
</section>
<footer>
<p>© 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
Pruebelo usted mismo »
La diferencia entre <artículo> <sección> y <div>
Existe una diferencia confusa (falta de) en el estándar HTML5, entre <artículo> <sección> y <div>.
En el estándar HTML5, el elemento <section> se define como un bloque de elementos relacionados.
El elemento <article> se define como un bloque completo e independiente de elementos relacionados.
El elemento <div> se define como un bloque de elementos secundarios.
¿Cómo interpretar eso?
En el ejemplo anterior, hemos utilizado <sección> como contenedor para <artículos> relacionados.
Pero, podríamos haber usado <article> como un contenedor para artículos también.
Aquí hay algunos ejemplos diferentes:
<artículo> en <artículo>:
<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>
Pruebelo usted mismo »
<div> en <artículo>:
<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>
Pruebelo usted mismo »
<div> en <sección> en <artículo>:
<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>
Pruebelo usted mismo »
