Tutorial HTML5: la cabecera del documento

En la primera parte del tutorial de introducción al HTML conocíamos un poco la historia del HTML, veíamos la estructura HTML de la que empezaremos todas las plantillas y la explicábamos a grandes rasgos.

En esta segunda entrega vamos a ver la cabecera del sitio web y trataré de explicar un poco, aunque sea por encima, las funciones (más que importantes) que cumplen las diferentes partes de la cabecera.

Si analizamos el código de una web (por ejemplo el de Katharsix) veremos que siempre empieza con el Doctype y después vienen las etiquetas head.

El doctype fue explicado en el capitulo anterior de este tutorial.

Etiquetas title

Una parte fundamental, y uno de los pilares, es el título del sitio web. Este título se coloca en la cabecera del sitio con las etiquetas <title> y </title>. De cara al posicionamiento es importante que sea único para cada página del sitio web, pero esto ya lo explicaré más adelante o en otras entradas.

Las etiquetas meta

Por otro lado, la cabecera contendrá etiquetas meta, que son leidas por los buscadores (al menos por parte de ellos) rastreando información como palabras clave o descripción del sitio web.

Hay muchos tipos de etiquetas meta con diferentes funcionalidades, pero las más utilizadas (y prácticamente las únicas) son:

  • description: Podemos utilizarla para describir el sitio (la página actual). Debe ser una frase legible, nada de palabras sueltas separadas por comas. El tamaño máximo varía entre 150 y 200 caracteres, aunque pueden ser menos. No es aconsejable repetir palabras dado que se podría considerar spam.
    La forma en que se inserta esta descripción es la siguiente:

    <meta name="description" content="Aquí la descripción de tu página" />
  • keywords: Se utilizan para indicarle al buscador, en términos o palabras clave, de qué trata nuestro sitio. A la hora de construir esta etiqueta debemos tener en cuenta que tiene gran relevancia para el posicionamiento, por lo que deberemos de separar por coma las palabras clave en orden de relevancia.
    La forma de construir esta etiqueta es la siguiente:

    <meta name="keywords" content="recursos, tutoriales, guias, consejos, diseño, desarrollo, blogging,WordPress, posicionamiento, optimizacion" />

    Considero que esta etiqueta es mejor explicarla en una entrada sobre posicionamiento web, por lo que aquí me limito a nombrar su existencia y construcción.

  • Charset: Indica la codificación de caracteres que tendrá nuestro documento; puedes leer más en Codificación de caracteres, charset UTF-8

Scripts

En la cabecera del documento también podemos incluir scripts de diferentes lenguajes de programación, pero en especial hojas de estilos, javascript…
Si queremos incluir la librería en nuestro sitio deberemos insertar algo así:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

Incluimos la librearía JQuery desde el repositorio de Google.

Por otro lado, si deseamos incluir una hoja de estilos (CSS) la instrucción sería la siguiente:

<link rel="stylesheet" href="ruta_del_fichero/style.css" type="text/css" media="screen" />

Realmente todas estas llamadas a ficheros externos y scripts son siempre iguales, con un poco de práctica las manejarás y recordarás con total facilidad.

Hasta aquí queda explicada (aunque por encima) la cabecera de nuestro sitio web.

Seguir con el tutorial

Volver al índice
Anterior: Introducción al HTML
Siguiente: Etiquetas estructurales

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril (GDPR) y la Ley Orgánica 3/2018 de 5 de diciembre (LOPDGDD), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.

Menú

Centro de preferencias de privacidad

Necesarias

Estas cookies són necesarias para el correcto funcionamiento de este sitio web así como sus funcionalidades internas.

PHPSESSID, gdpr[allowed_cookies], gdpr[consent_types]

Promoción

newsletter_leads

Estadísticas

_gat_gtag_UA_6499264_16, _gid, _ga

Otras