El documento HTML5.
Resumen.
En HTML como en otros tantos lenguajes ha habido diferentes versiones, cada cual con sus particularidades, pero sin duda, la gran versión diferenciadora en HTML es la HTML5. Las versiones 2 a 4 eran simples mejoras de un mismo concepto. HTML5 manteniendo su objetivo, hizo patente la gran diferencia con los anteriores. En este artículo diferenciaremos las versiones anteriores del actual HTML5 y entraremos en su sintaxis. Dado que esta es muy sencilla, contemplaremos sus implicaciones SEO.» HTML y SEO
Artículo.
Como ya se comentó, HTML es un lenguaje estructurado que es interpretado por un navegador. Cada parte tiene un objetivo, vamos a descubrir su estructura, su sintaxis.
html.- Indica el tipo de documento en que estamos.
head (cabeza).- Aunque hemos dicho que es un parte no visible para el usuario no es del todo cierto, pero en esencia, su objetivo no es el usuario.
body (cuerpo).- Es la parte visible para el usuario, en ella se encuentran todos los contenidos de interés que vemos cuando navegamos: textos, imágenes, menús…
Vamos a verlas ahora con un poco mas de detalle.
html.- Inicialmente bastaba con la etiqueta <html> para iniciar un documento html, pero con el paso de tiempo las cosas han ido cambiando. Ahora lo adecuado es, justo antes de la apertura del código declarar el tipo de documento con que estamos. La declaración de tipo de documento ó Document Type Definition (DTD) debe ser lo primero, justo antes de la apertura de la etiqueta html y su forma es la siguiente:
<div lang="es">Texto en español</div>
<div lang="en">Text in english</div>
Esto puede tener sentido por ejemplo en webs que se dediquen a la enseñanza de idiomas. Pero no nos desviemos del tema, solo estamos hablando de la declaración de documento, y la etiqueta “div” no tiene nada que ver con eso, solo la hemos mentado por que el atributo “lang” puede ocupar otras partes del documento HTML para declarar un idioma.
Otro detalle que más de uno se preguntará, ¿es importante el uso de mayúsculas o minúsculas? En realidad es indiferente, aunque se recomienda el uso de minúsculas, ya que, sobre todo para programadores, resulta visualmente mucho mas cómodo para trabajar. No obstante, ciertas etiquetas tendemos a ponerlas en mayúsculas, como la declaración de documento DOCTYPE o la etiqueta de encabezado <H1>, seria lo mismo que <h1>.
La última línea de nuestra página será la que cierre el documento html con la etiqueta </html>. Con esto, nuestra página html tomaría la siguiente forma.
También se pueden ubicar aquí ciertos códigos javascript, cargar archivos javascript, librerías jquery o archivos de maquetación CSS.
Otros elementos que pueden ir en el head de manera habitual son la URL canónica de la página o el favicon, ambos de la máxima importancia SEO aunque por motivos muy diferentes.
Así nuestro head podría tomar la siguiente forma:
El title igualmente es presentado por Google en los resultados de las búsquedas. El favicon hace que nuestra Web destaque en los resultados de la búsqueda:
Pero lo que si es cierto, es que aparte de lo dicho y poco mas, lo que se puede ver por parte de un usuario del head es mínimo respecto al body, pero si de la máxima importancia. Exploraremos estos aspectos detalladamente en capítulos posteriores.
body.- Y por fin llegamos a la parte del documento HTML que todos vemos, la que suscita nuestro interés, donde están esos textos, imágenes y videos que nos interesan, el body o cuerpo de la página.
En esta parte de la página es donde usaremos esas etiquetas que todos conocemos, las <H>, las <p>, las <b> y otras muchas. Aquí irán los contenidos de nuestra página, organizados para que el usuario (visitante) tenga acceso a ellos.
En las primeras versiones de HTML, toda la maquetación de la página dependía de HTML, y el esquema de organización se basaba en las tablas <table>, y fue a partir de 1995 cuando CSS (Cascading Style Sheets) u Hojas de Estilos en Cascada, hizo acto de presencia. Con CSS se superaron las escuetas formas de mostrar los contenidos de una página Web, y el esquema de organización de contenidos dejo de ser la tabla para ser el contenedor o capa el archiconocido hoy <div>.
Pero no adelantemos acontecimientos, hasta la llegada de HTML5 el contenido del body se podía resumir en unas etiquetas <H> para indicar que eran títulos, las negritas, cursivas y subrayado. De todas estas, la que sigue estando tan presenta ahora como entonces, son las etiquetas <H>, las demás, aunque se pueden seguir usando y son correctamente interpretadas por los navegadores, son suplidas en muchas ocasiones por CSS.
Con la llegada de HTML5 (2014) las cosas cambiaron y mucho, aparecieron nuevas etiquetas para determinar que tipo de contenido había en cada parte de la página. No son estas las únicas diferencias que trajo, pero si las mas importantes de cara a SEO.
En el artículo introductorio ya se describieron estas nuevas etiquetas, por lo que ahora solo presentaremos su sintaxis, que es la siguiente:
Por último, decir que los aspectos de maquetación quedan todos en manos de CSS, ya que en HTML5 más que agregar etiquetas de formato, se han eliminado, como es el caso de <big>, <center> o <font>, por citar algunas.
Como podemos ver, la sintaxis no podía ser mas sencilla:<html> <head> <!-- Contenido no visible para el usuario --> </head> <body> Contenido visible para el usuario </body> </html>
A modo de resumen tenemos 3 etiquetas:<etiqueta apertura> Contenido de la etiqueta </etiqueta cierre>
html.- Indica el tipo de documento en que estamos.
head (cabeza).- Aunque hemos dicho que es un parte no visible para el usuario no es del todo cierto, pero en esencia, su objetivo no es el usuario.
body (cuerpo).- Es la parte visible para el usuario, en ella se encuentran todos los contenidos de interés que vemos cuando navegamos: textos, imágenes, menús…
Vamos a verlas ahora con un poco mas de detalle.
html.- Inicialmente bastaba con la etiqueta <html> para iniciar un documento html, pero con el paso de tiempo las cosas han ido cambiando. Ahora lo adecuado es, justo antes de la apertura del código declarar el tipo de documento con que estamos. La declaración de tipo de documento ó Document Type Definition (DTD) debe ser lo primero, justo antes de la apertura de la etiqueta html y su forma es la siguiente:
Esta declaración, mas que etiqueta, debe ocupar la primera línea del documento, seguidamente tras ella, abriremos la etiqueta html, en la que agregaremos el atributo “lang” para declarar el idioma de la pagina (o el idioma principal si es que hay mas de uno), lo que haremos de la siguiente manera:<!DOCTYPE html>
donde “es” representa al idioma español, “en” al ingles o “fr” al francés o “de” al alemán. Cuando en una página hay más de un idioma también se puede agregar este atributo a ciertas etiquetas, como a un div o a un link.<html lang="es">
<div lang="es">Texto en español</div>
<div lang="en">Text in english</div>
Esto puede tener sentido por ejemplo en webs que se dediquen a la enseñanza de idiomas. Pero no nos desviemos del tema, solo estamos hablando de la declaración de documento, y la etiqueta “div” no tiene nada que ver con eso, solo la hemos mentado por que el atributo “lang” puede ocupar otras partes del documento HTML para declarar un idioma.
Otro detalle que más de uno se preguntará, ¿es importante el uso de mayúsculas o minúsculas? En realidad es indiferente, aunque se recomienda el uso de minúsculas, ya que, sobre todo para programadores, resulta visualmente mucho mas cómodo para trabajar. No obstante, ciertas etiquetas tendemos a ponerlas en mayúsculas, como la declaración de documento DOCTYPE o la etiqueta de encabezado <H1>, seria lo mismo que <h1>.
La última línea de nuestra página será la que cierre el documento html con la etiqueta </html>. Con esto, nuestra página html tomaría la siguiente forma.
head.- Una vez declarado el tipo de documento, vamos con la cabeza del documento. Esta parte del documento html tiene varias funciones, como la definición del conjunto de caracteres el documento (meta charset) incluir el título de la página (title) y diferentes etiquetas meta como son las frases clave (description), las palabras claves (ya en desuso). La meta “robots” también ira aquí siendo esta de gran importancia, ya que con ella podemos indicar a los spiders que tengan uno u otro comportamiento. Con el valor “index”, indicamos que queremos que esta página sea indizada, en caso contrario, usaríamos “noindex”. Con el valor “follow” indicamos que queremos que se sigan los enlaces y por consiguiente, aportando posicionamiento a esas páginas, en caso contrario, usaríamos “nofollow”.<!DOCTYPE html> <html lang="es"> <head> <!-- Contenido no visible para el usuario --> </head> <body> Contenido visible para el usuario </body> </html>
También se pueden ubicar aquí ciertos códigos javascript, cargar archivos javascript, librerías jquery o archivos de maquetación CSS.
Otros elementos que pueden ir en el head de manera habitual son la URL canónica de la página o el favicon, ambos de la máxima importancia SEO aunque por motivos muy diferentes.
Así nuestro head podría tomar la siguiente forma:
Las etiquetas mentadas no son todas las que podemos encontrar, pero si son las que no van a faltar casi nunca. Y vamos a agregar unos matices, ¿recordáis que dijimos que en el head no se encuentran elementos visibles para el usuario? Pues bien, esto no es del todo cierto, ya que el title así como el favicon se podrá ver así:<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <title>El titulo de la página</title> <meta name="description" content="frases clave" /> <meta name="robots" content="index, follow" /> <link rel="stylesheet" href="estilos.css" /> <script src="validacion.js"></script> <link rel="canonical" href="https://www.dominio.com/canonica.htm" /> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> </head> <body> Contenido visible para el usuario </body> </html>
El title igualmente es presentado por Google en los resultados de las búsquedas. El favicon hace que nuestra Web destaque en los resultados de la búsqueda:
Pero lo que si es cierto, es que aparte de lo dicho y poco mas, lo que se puede ver por parte de un usuario del head es mínimo respecto al body, pero si de la máxima importancia. Exploraremos estos aspectos detalladamente en capítulos posteriores.
body.- Y por fin llegamos a la parte del documento HTML que todos vemos, la que suscita nuestro interés, donde están esos textos, imágenes y videos que nos interesan, el body o cuerpo de la página.
En esta parte de la página es donde usaremos esas etiquetas que todos conocemos, las <H>, las <p>, las <b> y otras muchas. Aquí irán los contenidos de nuestra página, organizados para que el usuario (visitante) tenga acceso a ellos.
En las primeras versiones de HTML, toda la maquetación de la página dependía de HTML, y el esquema de organización se basaba en las tablas <table>, y fue a partir de 1995 cuando CSS (Cascading Style Sheets) u Hojas de Estilos en Cascada, hizo acto de presencia. Con CSS se superaron las escuetas formas de mostrar los contenidos de una página Web, y el esquema de organización de contenidos dejo de ser la tabla para ser el contenedor o capa el archiconocido hoy <div>.
Pero no adelantemos acontecimientos, hasta la llegada de HTML5 el contenido del body se podía resumir en unas etiquetas <H> para indicar que eran títulos, las negritas, cursivas y subrayado. De todas estas, la que sigue estando tan presenta ahora como entonces, son las etiquetas <H>, las demás, aunque se pueden seguir usando y son correctamente interpretadas por los navegadores, son suplidas en muchas ocasiones por CSS.
Con la llegada de HTML5 (2014) las cosas cambiaron y mucho, aparecieron nuevas etiquetas para determinar que tipo de contenido había en cada parte de la página. No son estas las únicas diferencias que trajo, pero si las mas importantes de cara a SEO.
En el artículo introductorio ya se describieron estas nuevas etiquetas, por lo que ahora solo presentaremos su sintaxis, que es la siguiente:
Por supuesto no debe tomarse este como el esquema incuestionable, como el esquema que puede tomar una Web concreta, trata de presentar cuales son los contenidos que teóricamente corresponde a cada etiqueta. Queda en manos del diseñador en función de los objetivos de su proyecto como usar las etiquetas, y no todas, en particular, “nav, section, article, aside” tienen que estar presentes de manera inexcusable en cada página del sitio Web, pero como ya digo, eso ya es cuestión del diseñador y la naturaleza concreta de cada página en cuestión.<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <title>El titulo de la página</title> <meta name="description" content="frases clave" /> <meta name="robots" content="index, follow" /> <link rel="stylesheet" href="estilos.css" /> <script src="validacion.js"></script> <link rel="canonical" href="https://www.dominio.com/canonica.htm" /> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> </head> <body> <header> Mi pagina web. </header> <nav> Apartado 1 Apartado 2 Apartado 3 Apartado 4 </nav> <section> Ultimas publicaciones </section> <article> <H1>Titulo</H1> Texto y demas contenidos de un articulo </article> <aside> Interesante 1 Interesante 2 Interesante 3 </aside> <footer> Cockies Legal Contacto </footer> </body> </html>
Por último, decir que los aspectos de maquetación quedan todos en manos de CSS, ya que en HTML5 más que agregar etiquetas de formato, se han eliminado, como es el caso de <big>, <center> o <font>, por citar algunas.
Tags: Html5 || header || nav || section || article || aside || footer