Etiquetas y elementos

Un elemento suele ser tres cosas seguidas: una etiqueta de apertura, algo de contenido y una etiqueta de cierre con una barra.

Las partes de un elemento

Mira <p>Bread is ready.</p>. La etiqueta de apertura <p> dice que aquí empieza un párrafo. La etiqueta de cierre </p>, con una barra después del primer corchete angular, dice que termina. Todo lo que hay entre ellas es el contenido. El conjunto, etiquetas más contenido, es el elemento. Mucha gente dice etiqueta cuando quiere decir elemento, y en una conversación no pasa nada, pero la diferencia ayuda al leer documentación: una etiqueta es la parte entre corchetes angulares; un elemento es la pieza terminada de la página.

Los atributos agregan detalles

Una etiqueta de apertura puede llevar atributos, ajustes extra escritos como name="value". En <a href="menu.html">Menu</a> el atributo href dice adónde lleva el enlace. En <html lang="en"> el atributo lang indica el idioma. Pon el valor entre comillas dobles; el estándar permite algunos valores sin comillas, pero las comillas nunca causan problemas. Varios atributos se separan con espacios, y su orden no importa. Unos pocos atributos, como required en un campo de formulario, son booleanos: escribir solo el nombre los activa.

<p class="note" id="opening">We open at <strong>7 am</strong>.</p>

Anidar: cerrar en orden inverso

Los elementos van dentro de otros elementos. En el ejemplo de arriba, <strong> está dentro de <p>. La regla es la misma que con los paréntesis en aritmética: lo que se abrió último debe cerrarse primero. <p><strong>7 am</p></strong> está mal porque el párrafo se cierra mientras el elemento strong sigue abierto. Los navegadores adivinarán lo que quisiste decir, pero errores distintos llevan a suposiciones distintas. Sangrar los elementos hijos con dos espacios, como hacen los ejemplos de este curso, hace que el anidamiento se vea fácilmente.

Elementos vacíos

Algunos elementos no pueden tener contenido, así que no tienen etiqueta de cierre. Se llaman elementos vacíos (void elements). Los comunes son <br> (un salto de línea), <hr> (un cambio temático), <img>, <input>, <meta> y <link>. Puede que los veas escritos con una barra, como <br />; en HTML la barra está permitida y se ignora, así que las dos formas funcionan.

Significado, no apariencia

Dentro de un párrafo puedes marcar palabras con <strong> para una importancia fuerte y con <em> para el énfasis, el que cambia cómo se dice una oración. Los navegadores muestran strong en negrita y em en cursiva, pero lo que importa es el significado. Un lector de pantalla puede leerlos con otra voz, y un buscador los trata como palabras importantes. Si solo quieres texto en negrita como decoración, ese es trabajo de CSS. <b> e <i> todavía existen para texto que se distingue sin importancia extra, como el nombre de un barco o una palabra extranjera.

Caracteres especiales y comentarios

Como < empieza una etiqueta, no puedes escribirlo como texto común. En su lugar, escribe una referencia de carácter: < para menor que, > para mayor que y & para el propio signo et (ampersand). Un comentario, <!-- like this -->, lo ignora el navegador y sirve para dejarte notas. Por último, HTML colapsa los espacios en blanco: diez espacios o tres saltos de línea en tu archivo aparecen como un solo espacio. El diseño sale de los elementos y de CSS, no de presionar la barra espaciadora.