Hemos visto que el desarrollo web se compone de tres pilares, HTML, CSS y JS. Hoy vamos a empezar con el más fundamental de todos ellos, el HTML.
Como su nombre indica HTML (HyperText Markup Language) no es un lenguaje de programación. En el sentido de que no tiene lógica, no puede sumar números y no puede tomar decisiones (para eso usamos JavaScript).
En su lugar, HTML es un lenguaje de marcado estructural. Es decir, su función es decir, “esto es un titulo”, “esto es un párrafo”, “esto es una imagen”…
Como todo lenguaje, tiene sus propias reglas de sintaxis. Así que vamos a empezar con los fundamentos de HTML 👇.
Sintaxis de HTML
Como decía, la función de HTML es es delimitar, clasificar y jerarquizar la información de un documento.
Para clasificar esa información, HTML utiliza un sistema de nodos que nosotros escribimos en forma de etiquetas y configuramos mediante atributos.
Una etiqueta es la unidad de construcción fundamental del HTML. Actúa como un contenedor que envuelve al contenido para darle un significado semántico al navegador (indicando si un texto es un título, un párrafo o un botón).
Sintácticamente, se delimitan usando los corchetes angulares < >. La inmensa mayoría de elementos requieren una etiqueta de apertura y una etiqueta de cierre (que incluye una barra diagonal /).
<p>Este es el contenido de texto de mi párrafo.</p>
Existen excepciones estrictas: las etiquetas vacías o de autocierre. Elementos como las imágenes (<img>) o las definiciones de metadatos (<meta>) no contienen texto en su interior, por lo que no necesitan etiqueta de cierre.
Un atributo es un par clave-valor que se inyecta siempre dentro de la etiqueta de apertura.
Su función técnica es proporcionar información adicional, configuración o metadatos específicos a esa etiqueta en concreto.
<a href="https://www.google.com" class="enlace-destacado">Ir a Google</a>
En este ejemplo, la etiqueta <a> define un enlace, pero el atributo href es la instrucción exacta que le indica al navegador a qué dirección URL concreta debe navegar al hacer clic.
El código base
El boilerplate de HTML es la estructura de código mínima que toda página web necesita para funcionar correctamente en un navegador.
Afortunadamente, el estándar actual de HTML5 ha simplificado muchísimo las cosas. En el pasado, crear la estructura inicial era un pequeño infierno de declaraciones larguísimas que nadie se sabía de memoria.
Hoy en día, la estructura mínima viable de cualquier archivo .html tiene esta pinta:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi primera página web</title>
</head>
<body>
</body>
</html>
Si usáis VS Code, podéis generar todo este bloque simplemente escribiendo ! y pulsando la tecla Tab (editando un fichero html).
Vamos a destripar qué hace cada una de estas líneas.
Aunque está rodeada de los símbolos < >, curiosamente no es una etiqueta HTML. Es una instrucción especial dirigida al navegador.
Su única función es decirle al navegador qué versión de HTML estamos utilizando. Al poner simplemente html, le estamos indicando que use la última versión estándar (HTML5).
Si omitís esta línea, los navegadores antiguos entrarán en el llamado Quirks Mode (modo de compatibilidad).
Básicamente, el navegador asume que la página es muy antigua e intentará renderizarla con reglas obsoletas de los años 90 (y te romperá todo el diseño).
Esta sí es una etiqueta, y es el contenedor principal de toda nuestra página. Absolutamente todo el código de nuestra web debe ir dentro de las etiquetas de apertura <html> y cierre </html>.
Incluye un atributo lang="es". Esto es muy importante para la accesibilidad y el SEO. Le indica a los lectores de pantalla (usados por personas con discapacidad visual) y a los motores de búsqueda (como Google) que el contenido está en español, para que apliquen las reglas de pronunciación y búsqueda correctas.
El head es la sección donde guardamos la información técnica, los metadatos y las configuraciones, pero nada de lo que pongamos aquí (a excepción del título) será visible en la página principal.
Dentro del <head>, destacan tres elementos fundamentales:
<meta charset="UTF-8">: Esto le dice al navegador cómo debe decodificar el texto. El formato UTF-8 incluye casi todos los caracteres de todos los idiomas del mundo. Si os olvidáis de esto, las eñes y las tildes se verán como símbolos raros (tipodiseño).<meta name="viewport"...>: Es una instrucción vital para que nuestra web se adapte a dispositivos móviles. Sin ella, el móvil intentará cargar la página como si fuera un monitor gigante encogido. (Lo veremos más a fondo cuando toquemos el diseño Responsive).<title>: Es el texto que aparece en la pestaña del navegador y el nombre que guardan los marcadores o favoritos.
El body es “el mensaje” de la carta. Todo lo que pongáis entre <body> y </body> es el contenido real que los usuarios verán en su pantalla al visitar vuestra página.
Aquí es donde pondremos nuestros textos, imágenes, botones, vídeos y menús de navegación. Por ahora, en nuestro esqueleto está vacío (solo tiene un comentario en verde), por lo que si abriéramos este archivo en Chrome, veríamos una página en riguroso blanco.
- Al
<head>van las configuraciones y conexiones (cosas invisibles). - Al
<body>va el contenido visual (lo que se pinta en pantalla).
Y con esto ya tenemos nuestros cimientos listos. Hemos pasado de no tener nada a tener un archivo HTML válido y preparado para recibir contenido.
En la próxima entrada vamos a darle vida a ese <body> vacío aprendiendo las etiquetas vitales de contenido que vais a utilizar el 90% del tiempo en vuestro día a día.
