2. Etiquetas y documento

Anatomía de una etiqueta

Un elemento son tres cosas: la etiqueta de apertura, el contenido y la etiqueta de cierre.

<p>Hola mundo</p>

Trozo	Cómo se llama	Qué es
<p>	Etiqueta de apertura	Dice qué empieza aquí
Hola mundo	Contenido	Lo que el usuario verá
</p>	Etiqueta de cierre	Dice dónde termina. Lleva /

La etiqueta de cierre es igual a la de apertura pero con una barra / delante del nombre.

Algunas etiquetas llevan atributos: información extra que va dentro de la etiqueta de apertura, como un par nombre="valor".

<a href="pagina.html">Ir a la página</a>

No todas se cierran

Unas pocas etiquetas no llevan cierre porque no envuelven nada. Las dos que verás siempre son <img> (una imagen) y <br> (un salto de línea).

Anidación e indentación

Las etiquetas se meten unas dentro de otras, como cajas dentro de cajas. La regla única: la que se abre última se cierra primero.

<!-- Así sí -->
<p>Hola <strong>mundo</strong></p>

Se cierra strong y después p: las cajas quedan una dentro de otra.

<!-- Así no -->
<p>Hola <strong>mundo</p></strong>

Aquí las etiquetas se cruzan: p se cierra antes que strong, que se abrió después. El navegador intenta arreglarlo por su cuenta y el resultado es impredecible.

Es el error que más tiempo cuesta

Un cruce de etiquetas no da un mensaje de error. La página carga igual, pero algo se ve raro y no es evidente dónde. Por eso vale la pena escribir siempre el cierre inmediatamente después de la apertura, y recién entonces llenar el contenido.

Indentación

Cada nivel de anidación se escribe dos espacios más adentro que el anterior:

<!-- un comentario no se ve en la página -->
<main>
  <article>
    <h2>Título</h2>
  </article>
</main>

Al navegador la indentación le da exactamente igual: podrías escribir todo en una línea y funcionaría. A ti no: es lo que te permite ver de un vistazo qué está dentro de qué.

VSCode lo ordena solo

Shift + Alt + F formatea el documento completo y arregla la indentación. Si tienes Prettier instalado, además puedes activar Format on Save y se ordena cada vez que guardas.

Padre e hijo

Un elemento que está dentro de otro es su hijo; el de afuera es su padre. En el ejemplo de arriba, h2 es hijo de article, que a su vez es hijo de main.

Es vocabulario que vas a necesitar en cuanto lleguemos a CSS: muchos selectores se escriben justamente en términos de padres e hijos.

El esqueleto de una página

Toda página HTML tiene la misma estructura mínima:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Página personal de Ana Soto" />
    <link rel="icon" href="img/favicon.png" />
    <title>Sobre mí · Ana Soto</title>
  </head>
  <body>
    <nav>
      <!-- menú -->
    </nav>
    <h1>Hola mundo</h1>
    <footer>
      <!-- pie -->
    </footer>
  </body>
</html>

Parte	Qué es
<!DOCTYPE html>	Le dice al navegador que esto es HTML5. Va siempre en la primera línea
<html lang="es">	Envuelve todo el documento. El lang declara el idioma del contenido
<head>	Información que no se ve en la página
<body>	Todo lo que sí se ve: textos, imágenes, tablas y formularios
<nav>	El menú del sitio, arriba: los enlaces a las otras vistas
<footer>	El pie de la página, abajo: autoría, contacto, año

nav y footer ya vienen en el esqueleto porque son las dos zonas que se repiten igual en todas las vistas del sitio.

Qué va dentro del head

Nada de esto se ve en la página, y sin embargo cada línea cambia algo.

Línea	Qué hace	Qué pasa si falta
<meta charset="UTF-8">	Declara cómo se codifican los caracteres	Las tildes y la ñ salen como símbolos raros
<meta name="viewport" …>	Le dice al móvil que use el ancho real de la pantalla	El móvil finge una pantalla de escritorio y encoge todo
<meta name="description" …>	El resumen que muestra Google bajo el título	El buscador inventa uno con el primer texto que encuentre
<link rel="icon" …>	El favicon: el ícono de la pestaña	Sale el ícono genérico del navegador
<title>	El texto de la pestaña y del resultado en Google	La pestaña muestra la ruta del archivo
lang="es" (en <html>)	El idioma del contenido	El lector de pantalla lee en inglés, y el navegador ofrece traducir del idioma equivocado

Sin <meta name="viewport"> la página no sirve en el móvil

Es una sola línea, y es la que decide si la página funciona o no en un celular. Cuando lleguemos a Tailwind, sin ella nada de lo responsivo va a funcionar.

El title es distinto en cada vista

Es lo que se ve en la pestaña y en los favoritos. Contacto · Ana Soto dice dónde estás; Documento o index.html repetido en las tres vistas, no.

Atajos de Emmet

VSCode trae Emmet, que expande una abreviatura en HTML completo. Se escribe la abreviatura y se aprieta Tab (o Enter, si aparece la sugerencia).

Escribes	Obtienes
!	El esqueleto completo de la página
ul>li*3	Una ul con tres li dentro (> es “dentro”, * repite)
nav>ul>li*3>a	La navbar entera, con sus tres enlaces
p.destacado	<p class="destacado"></p> (el punto es la clase)
img	<img src="" alt="">, con los dos atributos ya puestos

El esqueleto de Emmet viene en inglés

! escribe <html lang="en"> y <title>Document</title>. Cámbialos a lang="es" y a un título propio en cuanto lo generes.

¿Qué es un div?

Un div es una caja sin significado: no describe qué es el contenido, solo lo agrupa para poder tratarlo como un bloque.

<div>
  <h2>Sobre mí</h2>
  <p>Estudio Análisis de Sistemas.</p>
</div>

El div envuelve los dos elementos: ahora son un solo bloque, que se puede mover, alinear o pintar de un color como una sola unidad.

DIV y Span

	<div>	<span>
Tipo	De bloque	En línea
Qué hace	Ocupa todo el ancho disponible y empuja lo que sigue hacia abajo	Marca un trozo de texto sin cortar el párrafo
Para qué	Agrupar varios elementos	Destacar o marcar una palabra dentro de un texto

<p>Hola <span>Ana</span></p>

Bloque y línea

Esa diferencia entre div y span no es cosa de esas dos etiquetas: todo elemento de HTML es de bloque o de línea, y eso decide cómo se acomoda en la página.

	De bloque	En línea
Ancho	Ocupa todo el disponible	Solo lo que mide su contenido
Salto	Empuja hacia abajo lo que sigue	Se queda en la misma línea
Ejemplos	div, p, h1–h6, ul, li, section, main, footer	span, a, strong, em, img

La regla de anidación que se deriva de esto

Un elemento de texto en línea no puede contener uno de bloque. <span><div>…</div></span> es inválido; <div><span>…</span></div> es correcto. Lo mismo pasa con <p><div>…</div></p>: un párrafo solo admite contenido en línea.

La excepción que vas a ver seguido es <a>: en HTML5 un enlace sí puede envolver bloques, como una tarjeta completa que se pueda pulsar.

Esta distinción es la base de todo el modelo de caja de CSS, así que conviene tenerla clara desde ahora.

Si existe una etiqueta con significado, úsala

El vicio más común de quien empieza es llenar la página de div. Si la zona que estás marcando es el menú, va en <nav>; si es el contenido principal, en <main>; si es el pie, en <footer>.

El div es para cuando ninguna etiqueta semántica aplica.

Esto se llama escribir HTML semántico, y tiene tres consecuencias prácticas: los lectores de pantalla pueden anunciar las zonas de la página, los buscadores entienden mejor el contenido, y tu propio código se lee solo.

Checkpoint

Intenta responder antes de desplegar cada pregunta.

¿Qué partes tiene un elemento HTML?

Tres: la etiqueta de apertura (<p>), el contenido y la etiqueta de cierre (</p>, con barra). Algunos elementos llevan además atributos dentro de la apertura, como href="pagina.html".

Unas pocas etiquetas no se cierran, como <img> y <br>.

¿Por qué no se pueden cruzar las etiquetas al anidarlas?

Porque se anidan como cajas dentro de cajas: la que se abre última se cierra primero. Si se cruzan (<p><strong>Hola</p></strong>), el navegador intenta arreglarlo por su cuenta y el resultado es impredecible (y no da ningún mensaje de error).

¿Qué va en el <head> y qué va en el <body>?

En el <head> va la información que no se ve: el charset, el viewport, la description, el favicon y el <title> de la pestaña.

En el <body> va todo lo que sí se ve: textos, imágenes, tablas, formularios, el menú y el pie.

¿Qué pasa si falta <meta name="viewport">?

El teléfono asume que la página fue hecha para escritorio, finge una pantalla de unos 980 px y encoge todo hasta que cabe: el texto queda ilegible y hay que hacer zoom.

Es una sola línea y decide si la página sirve o no en un celular. Cuando lleguemos a Tailwind, sin ella nada de lo responsivo funciona.

¿Qué hacen <div> y <span>, y en qué se diferencian?

Los dos agrupan sin significar nada: solo sirven para tratar contenido como una unidad. La diferencia es cómo se acomodan.

El div es de bloque: ocupa todo el ancho disponible y empuja hacia abajo lo que sigue. El span es en línea: marca un trozo de texto sin cortar el párrafo.

Si existe una etiqueta con significado (nav, main, footer), se usa esa.

¿Qué atajos de Emmet conoces y qué generan?

• ! + Tab (el esqueleto completo de la página).
• ul>li*3 (una ul con tres li dentro).
• nav>ul>li*3>a (la navbar entera con sus tres enlaces).
• p.destacado (<p class="destacado"></p>).
• img (<img src="" alt="">, con los dos atributos ya puestos).

Y Shift + Alt + F formatea el documento y arregla la indentación.