La estructura básica de cualquier página o documento XHTML válido incluye al menos las siguientes etiquetas:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>Por suerte, como me hicieron caso están utilizando Visual studio Code, y alcanza simplemente con apretar el signo de cierre de exclamación: ” ! ” y luego ” Tab “.
Pero, hay varias cosas que vemos en la etiqueta del documento. Desmenucemos cada una de ellas:
1. DOCTYPE
El Doctype o “Declaración del tipo de documento” es una instrucción especial que va al inicio de nuestro documento HTML y que permite al navegador entender qué versión de HTML estamos utilizando. Esta información determinará la manera en la que el navegador procesará el documento, un DOCTYPE distinto podría implicar hasta una visualización diferente del sitio web dentro del mismo navegador.
En el caso de HTML5, el DOCTYPE a emplear es el siguiente: <!DOCTYPE html>
2. Lang
El atributo global lang participa en la definición del lenguaje del elemento, es decir, el lenguaje en que están escritos los elementos no editables o el lenguaje en el cual los elementos editables deberían de estar escritos.
En este caso tenemos <html lang="en">, que nos está diciendo que el lenguaje del HTML está en “English”, es decir, en inglés. Sí queremos cambiarlo a español, deberíamos utilizar el siguiente: <html lang="es">.
3. Head
El head ya sabemos lo que es, pero, dentro de la propia etiqueta hay otras tantas que vamos a definir:
3.1 Meta Charset
El elemento meta con atributo charset en un documento HTML está el destinado a indicar la codificación de caracteres utilizada (charset). En HTML5 tiene la sintaxis:
<meta charset="identificador-juego-de-caracteres">Por ejemplo, si se utiliza la codificación UTF-8 (estándar en HTML5 reconocido por la RFC 3629 de la Internet Engineering Task Force (IETF) y una de las tres posibilidades de codificación reconocidas por Unicode):
<meta charset="utf-8">En HTML4 la sintaxis era diferente:
<meta http-equiv="content-type" content="text/html; utf-8">El valor se puede escribir en minúsculas o en mayúsculas, es indiferente, aunque es muhco más común en minúsculas. Además, cuándo el valor de charset no contiene espacios se puede escribir sin comillas:
<meta charset=UTF-8>Es importante que el meta charset se coloque justo después de la apertura de la etiqueta <head>. De este modo nos aseguramos que el navegador conocerá la codificación de caracteres utilizada antes de que comience a procesar nada. Por ejemplo, una página HTML5 típica podría empezar así:
<!DOCTYPE html>
<html lang="ecs">
<head>
<meta charset="UTF-8">
...
</head>
<body>
</body>
</html>Según las recomendaciones de Google en cuánto a mejorar la velocidad de respuesta de las páginas web, se debe enviar la codificación del documento en las cabeceras HTTP para permitir que el navegador comience a analizar el HTML y a ejecutar scripts de forma inmediata. En Apache se puede hacer añadiendo la siguiente línea al archivo .htaccess:
AddDefaultCharset UTF-8¿Por qué se debe especificar el Charset?
Aunque el meta charset no es obligatorio, se debería incluir en cualquier página web para indicar de forma expresa la codificación de caracteres utilizada. Las dos razones principales son:
Asegurar que la página se ve correctamente
En HTML5 la codificación por defecto si no se especifica nada es UTF-8. No obstante, es el navegador el que finalmente decide la codificación a utilizar. Para evitar un visionado incorrecto en algunos navegadores o navegadores mal configurados, es recomendable incluir siempre la etiqueta meta charset.
En HTML4 la codificación utilizada por defecto es ISO-8859-1 (latin-1). Con con esta codificación todos los caracteres que no aparezcan en el alfabeto latino deberán ser escritos como entidad HTML. Por ejemplo, € para el símbolo del euro €.
UTF-7 XSS Cheat Sheet
El conocido como UTF-7 XSS Cheat Sheet es una vulnerabilidad de seguiridad en webs que no especifican la codificación de sus páginas. Para prevenirlo basta con especificar la codificación, ya sea a través del meta charset o a través de las cabeceras HTTP.
Hemos visto lo fácil que es utilizar el meta charset y su importancia, aunque no lo parezca, no es nada trivial. Así que no te olvides nunca de ponerlo!
3.2 meta http-equiv
El meta http-equiv = "X-UA-compatible"en HTML es otro meta-tag útil en la página HTML y este meta-tag se relaciona mayormente con el navegador.
Así que usando la etiqueta X-UA-Compatible en su sitio con los cambios que Microsoft ha hecho en sus navegadores (más en los que se indican a continuación). Dependiendo de los navegadores de Microsoft que usted apoye, puede que no necesite seguir usando la etiqueta X-UA-Compatible.
También existe chrome=1 que puedes usar o utilizar junto con una de las opciones anteriores, es decir, nos quedaría algo así: <meta http-equiv="X-UA-Compatible" content"IE=Edge,chrome=1">. Pasando en limpio:
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">El frame de Chrome de Google es un complemento de código abierto para el navegador. Los usuarios que tengan instalado el plug-in tienen acceso a las tecnologías web abiertas de Google Chrome y al rápido motor de JavaScript cuando abren páginas en el navegador.
Google Chrome Frame mejora a la perfección la experiencia de navegación en Internet Explorer. Muestra los sitios habilitados para Google Chrome Frame mediante la tecnología de renderizado de Google Chrome, lo que te permite acceder a las últimas funciones HTML5, así como a las funciones de rendimiento y seguridad de Google Chrome sin interrumpir en modo alguno el uso habitual del navegador.
Cuando se instala Google Chrome Frame, la web mejora sin que tengas que pensar en ello. Pero, la realidad es que no diferencias notorias para el usuario corriente.
3.3 meta Viewport
El Viewport es una de las etiquetas más representativas de la web móvil, que nos permite configurar cómo debe interpretar una página el navegador web para móviles.
Inicialmente creada por Apple para definir diversas directrices sobre cómo el iPhone debe renderizar un documento web, el viewport es una etiqueta META que se ha convertido en un estándar en el momento actual. La mayoría de dispositivos móviles la soportan en la mayor gama de sistemas operativos, lo que la convierte en un integrante imprescindible para cualquier página que esté pensada para verse también en dispositivos en movilidad.
El viewport es uno de esos conceptos que cuesta más de explicar que de entender, o por lo menos a mí me lo parece. Quizás tampoco sea el interlocutor más adecuado para hablar de esta etiqueta META, pero alguien la tiene que tratar con el detalle que se merece en el Manual para el diseño web en móviles. Así que ¡vamos manos a la obra!
Básicamente, sirve para definir qué área de pantalla está disponible al renderizar un documento, cuál es nivel de escalado que puede realizar el usuario, así como si el navegador debe mostrarla con algún zoom inicial. Todo ello se indica a través de varios parámetros en la propia etiqueta META, como veremos en el presente artículo.
Diseño para dispositivos móviles
Comencemos por entender qué es el viewport. Y como veremos, se trata de un concepto bien sencillo, pues corresponde con el área que está disponible en la pantalla del navegador.
Aunque el viewport es algo propio de navegadores para móviles y cobra sentido justamente cuando estemos pensando en estos dispositivos con pantallas reducidas, podemos entenderlo primero en el contexto de un navegador de escritorio.
El viewport en un navegador en cualquier ordenador con sistemas tradicionales es igual al área de la ventana, o mejor dicho, al área disponible para renderizar el documento web. Es decir, le restamos toda la interfaz del navegador, como botones, barra de direcciones, barra de menús, barras de desplazamiento, etc. Dicho de otro modo, es el área útil donde se mostrará la página web.
Por eso, es que los atributos que vienen por defecto son: content="width=device-width, initial-scale=1.0". Ya que con eso le estamos diciendo al código HTML que queremos que se ajuste al tamaño de la pantalla del dispositivo del usuario.
4. Resto del documento
En el propio head nos resta ver la etiqueta <title>, la cual ya vimos en otras clases. Vale recordar que esta sirve para indicar el nombre del título de nuestro head. Es decir, la solapa que aparece en la ventana de navegación.
Y en cuanto al body, lo fuimos trabajando bastante, y no queda nada más por añadir en esta clase.