<meta charset=»UTF-8″>
charset es el juego de caracteres en el cual está modificada una página. Y UTF-8 es el juego de caracteres universal estándar en la actualidad. Existen caracteres que no se aceptan por ejm en el idioma inglés. En el idioma inglés, por ejm no existe la ñ, esta etiqueta <meta charset=»UTF-8″> le comunica al documento es que utilice el juego de caracteres universal, y para el carácter y el idioma que se esté utilizando, lo codifique de manera correcta en el navegador.
Cada uno de estos caracteres ajenos al inglés tienen una forma de escribirse en forma de carácter especial. Si hacemos una búsqueda en Google con la consulta caracteres especiales en HTML encontraremos algunos enlaces a tablas, entre los que destacan los siguientes:
Cada carácter especial ajeno al inglés tiene su codificación, por ejm la ñ se escribiría ñ. UTF-8 evita que tengamos que escribir este tipo de código a mano.
Nota: para este curso vamos a utilizar mucho la página https://htmlreference.io/.
<meta http-equiv=»X-UA-Compatible» content=»IE-edge»>
El atributo http-equiv=»X-UA-Compatible» lo que hace es tratar el contenido del documento para Internet Explorer igualarlo a la configuración de Edge, que es el nuevo navegador de Microsoft. Esta etiqueta la agrega Visual Studio Code en los documentos nuevos que vamos creando, ya que dicho programa es de Microsoft. No se trata de un estándar que haya que incluir por fuerza.
<meta name=»viewport» content=»width=device-with, initial-scale=1.0″>
Se trata de una etiqueta muy importante, es la etiqueta del viewport. Tiene dos atributos, name que hace alusión al nombre de la etiqueta, y content que es el atributo de la misma. El viewport es la zona visible del navegador donde se dibuja o renderiza el contenido HTML.
El navegador web está formado por varias secciones, como son la barra de las pestañas, la barra de direcciones, la barra de marcadores, la caja de desarrolladores, pues bien, el área donde se visualiza el contenido es el viewport, y esta etiqueta es muy importante, y la deben tener todos los documentos HTML, porque le indica a los dispositivos como se va a adaptar el contenido.
Esta etiqueta tiene varios atributos, si queremos saber más de ella podemos pinchar en el siguiente enlace.
Los dos atributos más importantes de esta metaetiqueta son:
- width=device-with: indica que el ancho del documento se va a adaptar al ancho del dispositivo.
- inital-scale=1.0: indica que la escala inicial a la que va a empezar el contenido es a la escala 1, es decir, al 100% del contenido.
Si escribimos la siguiente sintaxis.
Ejm
<meta name="viewport" content="width=device-with, initial-scale=2.0"> <meta name="viewport" content="width=device-with, initial-scale=0.5">
El primer ejm mostrará el contenido el 200% más grande de lo normal, es decir, el doble de la proporción. El segundo mostrará el contenido la mitad de la proporción.
<title>
Es el título del documento HTML, se ha de tratar de un título referente a lo que va a encontrar el usuario en la página que está visitando. Importante que nuestro título esté entre los 55 y los 65 caracteres de longitud.
<meta name=»description» content=»descripción del contenido»>
Esta etiqueta sirve para poner una descripción de la página. Esta descripción no debe sobrepasar los 165 caracteres, y sirve para explicar a nuestros usuarios que contenido van a encontrar en nuestro documento.
tanto la etiqueta <title> como la metaetiqueta description son muy importantes porque nos van a ayudar mucho en el SEO (posicionamiento en buscadores). Es muy importante respetar la longitud de ambas etiquetas, ya que son los caracteres que se van a ver en los buscadores.
Nota: no poner los mismos títulos y mismas descripciones en todas las páginas, ya que penalizan en el SEO. Cada documento tiene que tener su propio título y su propia descripción.
El contenido de la etiqueta <title> lo veremos en la barra de título de la pestaña del navegador en el que estamos, la descripción no se ve, pero los robots SEO sí que indexan el contenido de esta metaetiqueta.