Migración a HTML5
En esta página, mostraremos cómo puedes migrar de HTML4 a HTML5. Aprendámoslo paso a paso.
En HTML4, a menudo usábamos elementos genéricos <div> con atributos id y class para definir la estructura. HTML5 introduce elementos semánticos que pueden reemplazar muchos de estos contenedores genéricos. Aunque los IDs y las clases no determinan automáticamente la semántica, aquí tienes reemplazos estructurales comunes:
Etiquetas HTML con id
<div id="header"> - <header>
<div id="menu"> - <nav>
<div id="content"> - <main>
<div class="article"> - <article>
<div id="footer"> - <footer>TIP
Los pasos descritos a continuación también pueden seguirse 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
<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 por defecto es text/javascript y text/css, respectivamente.
Paso 3: Añadir HTML5Shiv
Todos los navegadores modernos admiten los nuevos elementos semánticos de HTML5. Además, puedes "enseñar" a los navegadores antiguos a manejar "elementos desconocidos". HTML5Shiv se utiliza para habilitar el estilo de los elementos HTML5 en esos navegadores. Ten en cuenta que este script está en gran medida obsoleto para el desarrollo web moderno, ya que todos los navegadores actuales admiten de forma nativa los elementos semánticos de HTML5.
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
Primero, veamos un ejemplo en el que se usan elementos semánticos de HTML4.
Ejemplo de elementos HTML4:
Ejemplo de 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>© 2020 All rights reserved.</p>
</div>
</body>
</html>Ahora, veamos la migración de elementos HTML4 a elementos semánticos de HTML5.
Ejemplo de elementos semánticos de HTML5:
Ejemplo de elementos semánticos de HTML5:
<!DOCTYPE html>
<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;
}
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>© 2020 All rights reserved.</p>
</footer>
</body>
</html>La diferencia entre los elementos <section>, <article> y <div>
En HTML5, hay algunas diferencias entre los elementos <section>, <article> y <div>. En particular:
<code><section></code>agrupa contenido temáticamente relacionado, normalmente con un encabezado.<code><article></code>representa contenido autónomo que podría distribuirse o reutilizarse de forma independiente.<code><div></code>es un contenedor genérico sin significado semántico, usado únicamente para estilos o scripts.
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>Práctica
Which of the following are new elements introduced in HTML5 as per the content in the provided URL?