Tags para construir el head de una página HTML
Aquí ya empieza a haber unos cuantos, pero no tantos como los que veremos más adelante en el body. Los que describimos a continuación al ser del head van entre las etiquetas <head> y </head>. Al final de la página puedes ver un ejemplo con el uso de todos los tags y como deben quedar.
<title></title>
Este tag le va a dar título a nuestra página, va a ser la referencia principal tanto para los buscadores como para los navegadores ya que será el texto que veremos en la pestaña o ventana del navegador. Es muy importante que no nos olvidemos nunca de el, ya que es la base informativa sobre nuestra página, y que también nos ayudará con el posicionamiento.
<link />
Este es un tag de autocierre, y sirve para enlazar todos los archivos externos que conformarán nuestra web, como por ejemplo hojas de estilo css. También se utilizan para dar información o enlazarla desde la página indicando cosas como la url al favicon de nuestra web (iconito que sale en las pestañas), páginas relacionadas, etc. Nosotros de momento lo usaremos para cargar hojas de estilos y el favicon.
<meta />
Este tag es de vital importancia a la hora de optimizar nuestra página para su posicionamiento. Si bien es prescindible, si queremos dar información extra a los buscadores le daremos este tag dos veces con dos atributos diferentes, keywords y description, en las cuales pondremos las palabras clave que describan la página y una descripción sobre la misma. Como extra tendremos siempre un tag meta con el atributo text/html que nos permitirá indicar el tipo de codificación de nuestra página. ej: UTF8.
<style></style>
Este tag nos permite incrustar estilos css sobre nuestra página para no tener que cargar un archivo externo. Por el momento vamos a conocerlo y saber que está ahí, pero nos centraremos en utilizar hojas de estilo externas ya que desde el punto de vista de optimización web es más idóneo ya que reduce la cantidad de código y por tanto el tamaño base de nuestra página web.
<script></script>
Este otro tag es un poco más versátil, ya que nos permite o colocar directamente código javascript entre la apertura y el cierre, y también nos permite adjuntar un archivo .js externo a nuestra página con exactamente la misma funcionalidad que si incrustásemos el código. Por los mismos motivos que antes nos vamos a centrar en utilizar los archivos js cargados de forma externa, aunque para pruebas directas podemos utilizar este tag.
Por el momento estos son todos los tags principales que podemos necesitar en una página web normal. Ejemplo de uso:
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="UTF-8" />
<title>Curso de programación Web</title>
<meta name="Keywords" content="HTML,CSS,JavaScript,programacion">
<meta name="Description" content="Curso para aprender html en vichaunter.org">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="functions.js"></script>
</head>
<body>Tendremos en cuenta que segun avanze el curso veremos tags nuevos que posteriormente adjuntaremos como artículo extra a este para extender información. Por el momento nos centramos en todo lo necesario para crear una web completa que podamos posicionar perfectamente.
