.png)
Cambios en la estructura de un HTML5 respecto a HTML4 y XHTML1
A continuación se verán los principales cambios de la estructura básica o el esqueleto de una página HTML5, con comentarios HTML 😉
<!DOCTYPE html>
<!– Lo primero que llamará la atención es el hecho del nuevo doctype simple y efectivo–>
<html lang=“ES-es”>
<!– el idioma definido de manera clara dentro de la etiqueta html–>
<head>
<title>Documento HTML</title>
<!– se acabó el content-type, bienvenido el charset para definir la codificación del fichero –>
<meta charset=“UTF-8”>
<meta name=“autor” content=“David Vaquero” />
<meta name=“copyright” content=“dvaquero.blogspot.com” />
<!– adios a los type en los scripts y en los estilos 🙂 –>
<script src=“init.js”></script>
<script>
</script>
<link rel=“stylesheet” href=“estilo.css” media=“screen” />
<style>
*{
}
</style>
</head>
<body>
<!– nueva etiqueta heder para identificar la cabecera –>
<header>
<img src=“logo.jpg” />
<!– agrupaciones de H’s –>
<hgroup>
<h1>Empresa .com</h1>
<h2>Somos los mejores en lo que hacemos</h2>
</hgroup>
<!– nuevo etiqueta nav para los menús y sistemas de navegación por el sitio y la página –>
<nav id=“mainmenu”>
<ul>
<li><a href=“estructura_base.html”>Estructura base</a></li>
<li><a href=“fundamentos.html”>Fundamentos</a></li>
<li><a href=“video.html”>Video</a></li>
<li><a href=“form.html”>Formulario</a></li>
<li><a href=“canvas.html”>Canvas</a></li>
</ul>
</nav>
</header>
<div id=“content”>
<!– el contenido se organizará en artículos y secciones –>
<article>
<section id=“titulos”>
<hgroup>
<h1 class=“clase”>Titulo</h1>
<h2>Sub Titulo</h2>
<h3>Sub sub titulo</h3>
</hgroup>
</section>
<section id=“explicacion”>
<p id=“iden”>
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas “Letraset”, las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
</p>
<p id=“aviso” class=“clase”>
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas “Letraset”, las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
</p>
</section>
</article>
<!– aside representará el contenido adosado al contenido principal –>
<aside>
<section id=“tablas_relacionadas”>
<table class=“clase” border=“2”>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
</section>
</aside>
</div>
<!– el pie ya tiene su etiqueta –>
<footer>Copyright by Pepesan 2013</footer>
</body>
</html>
Este obra está bajo una licencia Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 España.