Claves para hacer una migración de HTML4 a HTML5
Hacer el cambio de html4 a 5 es posible sin necesidad de tener que hacer de nuevo toda la página si tenemos en cuenta unas cuantas pautas, lo cual es muy útil porqué imaginemos que en cada actualización esto no fuese así. Sería una catástrofe para muchas empresas y una gran inversión de dinero que no sabes cuanto va a durar. Por suerte cuando se mejora este lenguaje se tiene en cuenta el anterior y se construye con los estándares en mente para que nada de esto ocurra. Hoy vamos a ver algunas de las características que debemos cambiar para que los buscadores consideren nuestra web en la última versión de html y no tengamos problemas en la indexación de resultados que tan duro hemos trabajado para mantener al día.
Migrar a HTML5 sin morir en el intento
Antes de nada debemos tener en mente distintas etiquetas importantes en una web, como la cabecera, la declaración de algunas partes de la web o incluso el doctype. Veréis que estas etiquetas ahora se declaran de otro modo, pero no estamos hablando de un cambio radical de nombre, para nada. Recordemos que la W3C, la organización encargada de determinar estas decisiones, siempre las considera como una mejora de lo ya existente a su vez que resulte una facilidad a nivel de desarrollo. Lo que no quieren por nada en el mundo es que ahora, de repente, nos encontremos en la situación de que nada de lo construido previamente sirve en el nuevo estándar y, como consecuencia, debamos partir de cero una vez más. Esto es lento, es costoso y es una chapuza, hablando claro y sin rodeos. Vamos a ver algunos de los cambios más importantes que se nos proponen para nosotros y nuestra presencia en internet:
Doctype. Como ya sabemos, el doctype es la etiqueta que ponemos en la línea número 1 para comunicarle al navegador qué clase de página está cargando. Este elemento debe estar presente siempre, o será considerado un fallo semántico y como tal es considerado un error, algo que afecta a las búsquedas. Hasta ahora en el doctype documentábamos una larga línea que hacía tal que así:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
Pero ahora es tan simple como poner :
<!DOCTYPE HTML>
Como podemos ver se ha reducido bastante y ya estamos comunicando la naturaleza de nuestra web. A esto se le llama el “encoding” o la codificación
Estilos div. En este caso son varias etiquetas que se han simplificado pero significan exactamente lo mismo. Hacen referencia a la cabecera, pie de página, menú, cuerpo de texto y el contenido. Estas etiquetas son (a la izquierda en HTML4 y a la derecha en HTML5):
<div id=”header”> pasa a ser <header>
<div id=”menu”> pasa a ser <nav>
<div id=”content”> pasa a ser <section>
<div id=”post”> pasa a ser <article>
<div id=”footer”> pasa a ser <footer>
Codificación de carácter. Finalmente, esta etiqueta comunicaba que tipo de codificación contiene la web. Esto, dicho en palabras más llanas, está relacionado con la visualización de los caracteres especiales. Recordemos que todas estas normas nacen en un ámbito anglosajón, lo que implica que símbolos como las tildes, “ç”, u otros signos de puntuación que tenemos en la literatura española, u otros idiomas como el portugués o catalán, no son interpretados como se debe a menos que nosotros, a mano, dejemos constancia al navegador que la web no está en inglés. De lo contrario lo que se mostrará en el lugar de la tilde, por ejemplo, es un código sin sentido para nosotros, ni para nadie al otro lado de la pantalla, dejando rastro a un aspecto poco profesional, dejado y, por supuesto, generando conflicto con la evaluación de nuestra web. Para evitar todos estos dolores de cabeza, debemos poner lo siguiente en la línea 2, justo después del doctype:
<meta charset=”utf-8”>
Simplemente con esto ya estamos codificando todos los caracteres para que sean interpretados. Lo curioso es que si no configuramos la web con este objetivo, nosotros podemos llegar a escribir a mano el código de la tilde, o del carácter que necesitemos, pero no es exactamente lo mismo, pese a que a nivel visual el resultado sea igual. Recordemos que estamos hablando de comunicarle al navegador qué está cargando, y una cosa es decirle que nuestra web está debidamente codificada, a que él interprete un código que nosotros hemos escrito previamente. A nivel de interpretación el proceso es distinto y eso se tiene en cuenta en el momento de evaluar la web.
Esto es lo más importante que debemos tener en cuenta para transformar html4 a 5. Puede parecer poco trabajo, pero ahora pensad en todas las etiquetas div u otras que se repitan más que necesiten una revisión. Puede dar pereza o ser largo de hacer, pero creedme cuando os digo que sería aún peor tener que hacer de nuevo toda la web.
Curso relacionado: Curso de Programación con HTML5 y CSS
©2025 Deusto Formación