W3docs
es
Iniciar sesión

Migración a HTML5

En esta página encontrarás información sobre HTML5, diferencias entre HTML4 y HTML5, y cómo migrar de HTML4 a HTML5 paso a paso.

Migrar de HTML4 a HTML5 implica reemplazar el doctype antiguo y las declaraciones de codificación por sus equivalentes más cortos en HTML5, sustituir los contenedores genéricos <div> por elementos semánticos, y eliminar las etiquetas y atributos de presentación que HTML5 ya no admite. Esta página recorre el proceso paso a paso y concluye con un resumen que puedes usar como lista de verificación.

Consejo

Los pasos descritos a continuación también se pueden seguir para migrar de XHTML a HTML5.

Al migrar desde XHTML, recuerda eliminar el atributo xmlns="http://www.w3.org/1999/xhtml" de la etiqueta <html>.

Paso 1: Cambiar el Doctype

Cambiamos el doctype de HTML4 al doctype de HTML5.

HTML4

Doctype heredado de HTML4

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

HTML5

Migración a HTML5

<!DOCTYPE html>

Paso 2: Cambiar la Codificación

Aquí cambiamos la información de codificación de HTML4 a la codificación de HTML5.

HTML4

Declaración de codificación heredada de HTML4

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

HTML5

Migración a HTML5

<meta charset="utf-8">

Además, HTML5 permite omitir el atributo type de las etiquetas <script> y <style>, ya que su valor predeterminado es text/javascript y text/css respectivamente.

Paso 3: Agregar el HTML5Shiv

Todos los navegadores modernos son compatibles con los nuevos elementos semánticos de HTML5. Además, puedes "enseñar" a los navegadores más antiguos a manejar "elementos desconocidos". El HTML5Shiv se utiliza para habilitar el estilo de los elementos HTML5 en dichos navegadores. Ten en cuenta que este script es prácticamente obsoleto en el desarrollo web moderno, ya que todos los navegadores actuales admiten elementos semánticos de HTML5 de forma nativa.

Migración a HTML5 - HTML5Shiv

<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

Paso 4: Cambiar a Elementos Semánticos de HTML5

En HTML4, se usaban frecuentemente elementos genéricos <div> con atributos id y class para describir la estructura. HTML5 introduce elementos semánticos que pueden reemplazar muchos de estos contenedores genéricos, ofreciendo a los navegadores, motores de búsqueda y tecnologías de asistencia una imagen más clara de la página. Los IDs y las clases no dictan semántica automáticamente, pero estos son los reemplazos estructurales más comunes:

Contenedor HTML4Elemento semántico HTML5
<div id="header"><header>
<div id="menu"><nav>
<div id="content"><main>
<div class="article"><article>
<div class="sidebar"><aside>
<div id="footer"><footer>

El elemento <aside> merece una mención especial: marca contenido tangencialmente relacionado con el contenido circundante, como una barra lateral, una cita destacada o un bloque de enlaces relacionados. No tiene un equivalente directo en HTML4, por lo que generalmente se introduce durante la migración para reemplazar un <div class="sidebar"> o un contenedor similar.

Primero, veamos un ejemplo donde se utilizan elementos HTML4.

Ejemplo de elementos HTML4:

Ejemplo con HTML4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Title of the document</title>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <style>
      body {
        font-size: 0.9em;
      }
      #header,
      #footer {
        padding: 10px;
        color: white;
        background-color: black;
        text-align: center;
      }
      h2 {
        text-align: center
      }
      h3 {
        text-align: right;
        padding-right: 20px;
      }
      div.content {
        margin: 5px;
        padding: 20px;
        background-color: lightgrey;
      }
      .article {
        margin: 20px;
        padding: 10px;
        background-color: white;
      }
      #header-menu ul {
        padding: 0;
      }
      #header-menu ul li {
        display: inline;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <h1>LaravelSoft</h1>
    </div>
    <div id="header-menu">
      <ul>
        <li>
          <a href="https://www.w3docs.com/learn-html.html">Books</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/quiz/">Quizzes</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/snippets">Snippets</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/tool/">Tools</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/string-functions/">String Functions</a>
        </li>
      </ul>
    </div>
    <div class="content">
      <h2>Article Section</h2>
      <div class="article">
        <h3>Article Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. 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">
        <h3>News Article</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
        <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; 2020 All rights reserved.</p>
    </div>
  </body>
</html>
Pruébalo tú mismo »

Ahora veamos la migración de elementos HTML4 a elementos semánticos de HTML5.

Ejemplo de elementos semánticos de HTML5:

La versión migrada que se muestra a continuación elimina el script HTML5Shiv, ya que todos los navegadores actualmente en uso comprenden los elementos semánticos de forma nativa. Agrega el shiv nuevamente solo si necesitas admitir Internet Explorer 8 o anterior.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <meta charset="utf-8" />
    <style>
      body {
        font-size: 0.9em;
      }
      header,
      footer {
        padding: 10px;
        color: white;
        background-color: black;
        text-align: center;
      }
      h2 {
        text-align: center
      }
      h3 {
        text-align: right;
        padding-right: 20px;
      }
      main {
        margin: 5px;
        padding: 20px;
        background-color: lightgrey;
      }
      article {
        margin: 20px;
        padding: 10px;
        background-color: white;
      }
      nav ul {
        padding: 0;
      }
      nav ul li {
        display: inline;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>LaravelSoft</h1>
    </header>
    <nav>
      <ul>
        <li>
          <a href="https://www.w3docs.com/learn-html.html">Books</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/quiz/">Quizzes</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/snippets">Snippets</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/tool/">Tools</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/string-functions/">String Functions</a>
        </li>
      </ul>
    </nav>
    <main>
      <h2>Article Section</h2>
      <article>
        <h3>Article Title</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
      </article>
      <article>
        <h3>News Article</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
      </article>
    </main>
    <footer>
      <p>&copy; 2020 All rights reserved.</p>
    </footer>
  </body>
</html>
Pruébalo tú mismo »

Paso 5: Eliminar Elementos y Atributos Obsoletos de HTML4

La migración no se trata solo de reemplazar contenedores estructurales <div>. HTML5 también eliminó un grupo de etiquetas y atributos de presentación cuya función ahora corresponde a CSS. Dejarlos en su lugar mezcla el marcado con el estilo y puede producir resultados inesperados en navegadores modernos, por lo que es recomendable eliminarlos como parte de la migración.

Elementos comunes que se deben eliminar y sus reemplazos en CSS:

Elemento obsoletoQué usar en su lugar
<font>Definir font-family, font-size y color en CSS
<center>Usar text-align: center o un diseño con flex/grid
<big>, <tt>, <strike>Usar font-size, una font-family monoespaciada o text-decoration: line-through
<frame>, <frameset>, <noframes>Reestructurar la página; usar <iframe> solo cuando realmente se necesite un documento incrustado

Atributos comunes que se deben eliminar y sus reemplazos en CSS:

Atributo obsoletoQué usar en su lugar
align, valigntext-align, vertical-align
bgcolorbackground-color
width, height (en tablas/celdas de diseño)CSS width / height
border (presentacional)CSS border
cellpadding, cellspacingpadding y border-spacing

Por ejemplo, este marcado HTML4:

<center>
  <font face="Arial" color="red" size="5">Welcome</font>
</center>
<table border="1" bgcolor="#eee" cellpadding="10">
  <tr><td align="center">Cell</td></tr>
</table>

se convierte en esto en HTML5, con toda la presentación trasladada a CSS:

<p class="title">Welcome</p>
<table class="data">
  <tr><td>Cell</td></tr>
</table>

<style>
  .title {
    text-align: center;
    font-family: Arial, sans-serif;
    color: red;
    font-size: 1.5em;
  }
  .data {
    border: 1px solid black;
    border-collapse: collapse;
    background-color: #eee;
  }
  .data td {
    padding: 10px;
    text-align: center;
  }
</style>

La Diferencia Entre los Elementos <section>, <article> y <div>

En HTML5, existen algunas diferencias entre los elementos <section>, <article> y <div>. En particular:

  • <section> agrupa contenido temáticamente relacionado, generalmente con un encabezado.
  • <article> representa contenido independiente que podría distribuirse o reutilizarse de forma autónoma.
  • <div> es un contenedor genérico sin significado semántico, utilizado únicamente para estilo o scripting.

Ejemplo de las etiquetas <section>, <article> y <div>:

Ejemplo de las etiquetas <section>, <article> y <div>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <section>
      <h1>Articles about flowers</h1>
      <article>
        <h2>Roses</h2>
        <p>
          Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration.
        </p>
      </article>
      <div>
        <h2>Lilies</h2>
        <p>
          Lily - an amazing beauty flower, one of the most ancient among a variety of bulbous plants.
        </p>
      </div>
    </section>
  </body>
</html>
Pruébalo tú mismo »

Resumen de la Migración

Usa estos pasos como lista de verificación al trasladar una página de HTML4 a HTML5:

  1. Reemplaza el largo doctype de HTML4 con <!DOCTYPE html>.
  2. Reemplaza la etiqueta meta http-equiv de tipo de contenido con el formato abreviado <meta charset="utf-8">.
  3. Agrega el HTML5Shiv solo si aún necesitas admitir Internet Explorer 8 o anterior; de lo contrario, omítelo.
  4. Reemplaza los contenedores estructurales <div> con elementos semánticos como <header>, <nav>, <main>, <article>, <aside> y <footer>.
  5. Elimina los elementos y atributos de presentación obsoletos (<font>, <center>, align, <frameset> y similares) y traslada su estilo a CSS.

Práctica

Práctica
Selecciona todas las que correspondan. ¿Cuáles de los siguientes son elementos nuevos introducidos en HTML5?
Selecciona todas las que correspondan. ¿Cuáles de los siguientes son elementos nuevos introducidos en HTML5?
Was this page helpful?