Etiquetas dentro de HEAD

Cómo ya definimos <head> es la cabecera de nuestro sitio web, aquí le entregamos información importante tanto a los navegadores cómo a los buscadores web entre otras funciones.

Veamos un ejemplo y analicemos sus componentes:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Título del sitio web</title>
	<meta name="description" content="Descripción del sitio web">
	<meta name="keywords" content="diseño,html,css,php">
	<meta name="author" content="Ignacio Gutiérrez">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" href="estilos.css">
</head>
<body>

</body>
</html>

Antes de empezar a definir cada elemento te comento que las etiquetas pueden contener atributos y estos sirven para entregar mayor información por ejemplo una etiqueta sería <meta> y el atributo sería name=””.

<meta charset=”UTF-8″>

Con esta etiqueta le decimos al navegador que estaremos trabajando con el conjunto de caracteres del español, aceptando así los tildes y caracteres propios como las “ñ”.

<title>Título del sitio web</title>

Definimos el título del sitio web, es importante porque es el título que muestran los navegadores.

<meta name=”description” content=”Descripción del sitio web”>

Aquí definimos la descripción del sitio web, también es leída por Google así que no olvides de incorporarla.

<meta name=”keywords” content=”diseño,html,css,php”>

Definimos las palabras claves que contiene la página web, esto ayuda mucho al SEO.

<meta name=”author” content=”Ignacio Gutiérrez”>

Define el autor del sitio web

<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>

Una de las etiquetas más importantes para hacer que nuestro sitio web sea responsive, osea adaptable a múltiples dispositivos móviles.

<link rel=”stylesheet” href=”estilos.css”>

Aquí estamos llamando a los estilos Css, puedes tener más de una hoja de estilos por lo tanto este apartado se puede repetir múltiples veces.

Aprender cada uno de estos elementos puede sonar complicado pero con la práctica se te hará cada vez más intuitivo y fácil de incorporar, además este tipo de elementos son dinámicos así que en un futuro puede que tengamos que actualizar la información.

En el siguiente apartado vamos a comenzar a analizar las etiquetas que se encuentran dentro de <body> ya que es aquí cuando comenzamos a ver nuestro sitio web en marcha.

No olvides suscribirte a mi canal de Youtube (https://www.youtube.com/bluuweb)