Estructura básica de un documento de HTML5

En HTML5 la estructura interna básica de una página web se ha simplificado, se crearon nuevas etiquetas para las diferentes secciones de las que se compone una página, lo más novedoso de HTML5 son las nuevas API y los nuevos elemento y la semántica para darle más dinamismo a las páginas con menos código y facilitando al programador el maquetado de las paginas web.

Entre las principales ventajas de HTML5 es la inclusión de elementos semánticos, o marcados semánticos, que nos ayudan a definir las distintas secciones/divisiones de una página web.

En las versiones anteriores a HTML5 se solía utilizar la etiqueta

para realizar las divisiones de una página web, pero actualmente es recomendado utilizar los elementos semánticos ya que describen claramente su propósito.

Como se puede observar mediante marcadores semánticos se puede diferenciar claramente el contenido que referencia cada etiqueta.

A continuación veamos nuestro código completo:

<!DOCTYPE html><br>
<html lang="es"><br>
<head><br>
<title>Titulo de la web</title><br>
<meta charset="utf-8" /><br>
<link rel="stylesheet" href="estilos.css" /><br>
<link rel="shortcut icon" href="/favicon.ico" /><br>
<link rel="alternate" title="RSS" type="application/rss+xml" href="/feed.rss" /><br>
</head><br>
<body><br>
<header><br>
<h1>Mi sitio web</h1><br>
<p>Mi sitio web creado en html5</p><br>
</header><br>
<section><br>
<article><br>
<h2>Titilo de contenido<h2><br>
<p> Contenido (ademas de imagenes, citas, videos etc.) </p><br>
</article><br>
</section><br>
<aside><br>
<h3>Titulo de contenido</h3><br>
<p>contenido</p><br>
</aside><br>
<footer><br>
pie de página<br>
</footer><br>
</body><br>
</html>

Lo que produce el siguiente resultado.