En esta oportunidad les ofrecemos una breve explicación sobre la estructura bàsica de HTML5. Nos encontramos frente a algunas variaciones con respecto a la antigua manera de maquetar.
En un primer vistazo podemos ver que es más limpia y sencilla, Lo vemos en la declaración del “Doctype”, que es muchísimo más pequeña y amigable de lo que era antes.
<!DOCTYPE html>
Luego nos encontramos con la declaración del lenguaje la etiqueta “lang”, que ayudarà a los motores buscadores a indexar tu página de una manera más óptima.
<html lang="es">
A partir de aquí entramos a la sección del “head” que se encuentra en la misma situación de la antigua maner a de maquetar.
Dentro, nos encontramos con Metadatos como “charset” el cual es imprescindible usarlo para no tener problema al querer mostrar cierto tipo de caracteres.
<head> <title>Titular de la Aplicación</title> <meta charset="utf-8" /> <link rel="stylesheet" href="estructura.css" /> <link rel="shortcut icon" href="favicon.ico" />
Un poco más adelante nos topamos con los enlaces “link” hacia nuestra hoja u hojas de estilo y hacia el Favicon. Estas últimas no han sufrido gran variación excepto por el atributo REL, que permite dar un mejor significado semántico a nuestro código.
Los Elementos del Body
Más adelante nos encontramos con la etiqueta BODY, la cual nos indica el inicio de los elementos visibles de nuestra página.
Los siguientes elementos son nuevos y han sido creados en base a un riguroso estudio de estandarización de parte de la w3c, cuyo resultado a determinado secciones más usadas entre cientos de miles de sitios Web.
El elemento <header> es bastante obvio y nos ayudará a indicar la parte principal de nuestra página, que normalmente, se repite en todo el Sitio. Puede contener el logo de la empresa u organización, un subtítulo o tagline, entre otros.
El elemento <nav> guardará nuestro menú principal de navegación.
El elemento <section> se trata de una sección de la página que contiene información directamente relacionada con el tema principal del sitio que estamos desarrollando.
Los elementos <article> son pequeñas porciones de artículos con una estructura propia cuya principal característica es que pueden ser aislados para ser indexados en otros sitios.
El elemento <aside> se trata de una sección en la cual almacenaremos información “tangencial” al tema principal del sitio que estamos maquetando, se pueden guardar los iconos sociales, o un listado de noticias relacionadas.
Finalmente el elemento <footer> cuyo uso es bastante obvio. Nos ayudará a almacenar información como el copyright o los términos y condiciones del sitio.
En conclusión vemos que el HTML5 nos presenta una estructura orientada a dar un mayor valor semántico a nuestros desarrollos, y que cada elemento “signifique” algo diferente, lo cual ayudará con la accesibilidad y comportamiento según el dispositivo desde el que estemos navegando.
Código Completo
<!DOCTYPE html> <title>Titular de la Aplicación</title> <<link rel="stylesheet" href="estructura.css" /> <link rel="shortcut icon" href="favicon.ico" /> </head> <body> <header> </header> <nav> </nav> <section> <article> </article> </section> <aside> </aside> <footer> </footer> </body> </html>
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure