AdNow

loading...

Migración de HTML5

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ípicoHTML5 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>&amp;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:

Ejemplo

<!DOCTYPE html>
Pruebelo usted mismo »

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:

Ejemplo

<meta charset="utf-8">
Pruebelo usted mismo »

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 »
Obtenga más información sobre HTML5Shiv en la compatibilidad con navegadores HTML5 .

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>&copy; 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 »

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Entradas más populares de este blog

Listado pasaporte y cedulas SAIME 2018

Etiqueta HTML < abbr >

HTML < a > tag

Visitas a este blog