Estructura básica HTML5. El html5 es un importante avance en el diseño y desarrollo de paginas web, Ademas de mejorar la comprensión del código con etiquetas menos técnicas y mas humanas, tambien ofrece multitud de nuevas funcionalidades para sacarle el máximo partido al navegador.
La cabecera
La Estructura básica HTML5 no dista tanto de otras versiones que hemos visto de html. pero es apreciable que DOCTYPE es increíblemente mucho mas corto y fácil de recordar. Aquí debajo podéis ver la diferencia notable, entre la antigua y la nueva sintaxis.
Antiguamente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/2006/xhtml">
Html5:
<!DOCTYPE html> <html lang="es">
El header
En html5 tambien seguimos usando las antiguas etiquetas de metadatos para darle formato al documento. en ellas podemos definir opciones como la codificación de caracteres, que habitualmente suele ser UTF-8.
Hoja de estilos CSS, icono de Favoritos/Marcadores, Rss feeds… Todo esto lo establecemos dentro de la etiqueta HEADER
<head> <title>Titulo de la web</title> <meta charset="utf-8" /> <link rel="stylesheet" href="estilos.css" /> <link rel="shortcut icon" href="favicon.ico" /> <link rel="alternate" title="Ovejeando RSS" type="application/rss+xml" href="/feed.rss" /> </head>
Body y vista del documento completo
Ahora veamos una vista completa de como quedaría un documento html5 básico.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Titulo de la web</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="estilos.css" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="alternate" title="Ovejeando RSS" type="application/rss+xml" href="/feed.rss" />
</head>
<body>
<header>
<h1>Mi sitio web</h1>
<p>Mi sitio web html5</p>
</header>
<section>
<article>
<h2>Titulo de contenido<h2>
<p> Contenido bla bla bla... </p>
</article>
</section>
<aside>
<h3>Titulo de contenido</h3>
<p>contenido bla bla bla... </p>
</aside>
<footer>
Ovejeando.com 2017
</footer>
</body>
</html>
Así de fácil. Ahora solo tienes que rellenar tu contenido y editarla a tu antojo, pero con todo el potencial de HTML5.
Si quieres añadir html5 a tus diseños, y poner el logotipo a pie de pagina…
…quizás tambien te interese este enlace:
Si te ha gustado comenta y comparte en las redes sociales. 😀