Sintaxis HTML: cómo se escribe el lenguaje
Aprende la estructura de las etiquetas, los atributos, los elementos vacíos, el anidamiento y los comentarios. Sin esto no se puede escribir HTML correctamente.
HTML se escribe con etiquetas: cada etiqueta tiene un nombre y, en la mayoría de los casos, una de apertura y una de cierre.
Los atributos van en la etiqueta de apertura y dan información adicional (por ejemplo, la URL de un enlace o el texto alternativo de una imagen).
Algunos elementos no tienen contenido ni cierre: son elementos vacíos (img, br, input, meta, link).
Las etiquetas se anidan: una puede contener otras; el orden de cierre debe ser el correcto.
- La parte esencial: nombre entre menor que y mayor que.
- Una etiqueta HTML se escribe entre los caracteres < y >. La etiqueta de apertura lleva el nombre del elemento (por ejemplo, p para párrafo, strong para negrita). La mayoría de las etiquetas necesitan un cierre: la misma palabra precedida de una barra / dentro de < y >, es decir </nombre>. El contenido que queremos que afecte la etiqueta va entre la apertura y el cierre.
- Apertura: <nombre> (por ejemplo <p>).
- Cierre: </nombre> (por ejemplo </p>).
- Contenido: lo que va entre apertura y cierre.
Etiquetas de apertura y cierre
La parte esencial: nombre entre menor que y mayor que.
Una etiqueta HTML se escribe entre los caracteres < y >. La etiqueta de apertura lleva el nombre del elemento (por ejemplo, p para párrafo, strong para negrita). La mayoría de las etiquetas necesitan un cierre: la misma palabra precedida de una barra / dentro de < y >, es decir </nombre>. El contenido que queremos que afecte la etiqueta va entre la apertura y el cierre.
- Apertura: <nombre> (por ejemplo <p>).
- Cierre: </nombre> (por ejemplo </p>).
- Contenido: lo que va entre apertura y cierre.
- En HTML las etiquetas se escriben en minúsculas por convención.
Atributos
Información adicional dentro de la etiqueta de apertura.
Los atributos se escriben después del nombre de la etiqueta, separados por un espacio. Suelen tener la forma <code>nombre="valor"</code>. El valor va entre comillas dobles (también se permiten simples, pero se recomienda dobles). Hay atributos booleanos que no llevan valor: si están presentes, se consideran verdadero (por ejemplo <code>required</code> o <code>disabled</code>).
Para profundizar, consulta la <a href="https://developer.mozilla.org/es/docs/Web/HTML/Attributes" target="_blank" rel="noreferrer">referencia de atributos HTML en MDN</a>.
- Forma: nombre="valor" dentro de <etiqueta ...>.
- Varios atributos: separados por espacio; el orden no importa.
- Comillas dobles recomendadas para el valor.
- Booleanos: se escriben solo el nombre (ej. required).
Elementos vacíos (sin cierre)
Etiquetas que no envuelven contenido y no tienen </etiqueta>.
Algunos elementos no tienen contenido ni etiqueta de cierre. En HTML5 se escriben solo con la etiqueta de apertura. Ejemplos: img (imagen), br (salto de línea), input, meta, link. No se escribe </img> ni </br>; el navegador interpreta que el elemento termina ahí. En XHTML o por costumbre a veces se escribe <br /> (con barra al final), que también es válido en HTML5.
- img, br, hr, input, meta, link, source, track son elementos vacíos.
- No llevan etiqueta de cierre en HTML.
- La información va en atributos (src, alt, href, etc.).
Anidamiento
Etiquetas dentro de etiquetas; el cierre en orden inverso.
Una etiqueta puede contener texto u otras etiquetas. Las que abres después debes cerrarlas antes: si abres div y luego p, cierras primero </p> y luego </div>. Anidar mal (por ejemplo cerrar el div antes que el p) puede dar resultados inesperados o HTML inválido.
- Las etiquetas se anidan como cajas: la que abres después cierra antes.
- Orden correcto: <div><p>Texto</p></div>.
- Orden incorrecto: <div><p>Texto</div></p>.
Comentarios HTML
Texto que el navegador no muestra.
Los comentarios sirven para documentar el código o dejar notas. Se escriben entre <!-- y -->. El navegador ignora todo lo que haya entre esas marcas. No se puede anidar un comentario dentro de otro con la misma sintaxis.
