Curso de HTML / Sintaxis de HTML: elementos, etiquetas y atributos
La sintaxis de HTML establece cómo escribir elementos, etiquetas, atributos, texto y comentarios. Muchos elementos tienen una etiqueta de apertura y otra de cierre; los atributos se escriben en la apertura y los elementos anidados se cierran de dentro hacia fuera. Los elementos vacíos, como img o br, no tienen etiqueta de cierre.
Distinguir el elemento de sus etiquetas
Esta es una forma esquemática, no una etiqueta llamada literalmente tagname que debas usar en una página:
<tagname>Content</tagname>La apertura marca el comienzo y el cierre lleva una barra antes del nombre. El elemento comprende ambas etiquetas y su contenido. En un párrafo real se utiliza p:
<p>HTML syntax</p>Los nombres de etiquetas en la sintaxis HTML no distinguen mayúsculas y minúsculas ASCII. Escribirlos en minúsculas sigue siendo una convención útil para mantener un código uniforme. No extiendas esa regla a todos los valores de atributos: un nombre de archivo puede distinguir mayúsculas según el servidor.
Elementos vacíos y barras de cierre
Los siguientes elementos no contienen texto ni otros elementos. No inventes cierres como </img> o </br>.
<br>
<img src="image.webp" alt="Sunrise over a blue ocean">
<input type="text" name="username">
<meta charset="utf-8">En HTML, la barra de <br /> está permitida en ese contexto, pero no tiene una función de autocierre y no es necesaria. Tampoco convierte cualquier elemento, como div, en un elemento vacío. Estas reglas pertenecen a la sintaxis HTML y no deben confundirse con las de XML.
Escribir atributos y comillas
Un atributo proporciona información o configura el elemento. Se escribe dentro de la etiqueta de apertura; normalmente separa nombre y valor mediante =.
<tagname attribute="value">Content</tagname>El siguiente ejemplo asigna un identificador al bloque de cita:
<blockquote id="quote-01">
Quoted text
</blockquote>Utilizar comillas dobles de forma consistente evita ambigüedades, especialmente si el valor contiene espacios. Este ejemplo encierra correctamente el valor de style:
<p style="color: red;">Red text</p>El siguiente es intencionadamente incorrecto: el espacio interrumpe el valor sin comillas después de color:. No representa la misma instrucción de color.
<p style=color: red;>Red text</p>Un atributo booleano, como disabled, puede escribirse solo con su nombre. El control siguiente aparece deshabilitado:
<input type="text" disabled>Para distinguir atributos con funciones diferentes, compara for, id y name en la asociación de etiquetas e inputs.
Anidar y cerrar desde el interior
En una estructura correcta, el elemento interior queda completamente contenido en el exterior:
<p>This sentence contains <strong>important text</strong>.</p>El siguiente contraejemplo cruza los cierres de p y strong:
<p>This sentence contains <strong>important text</p></strong>Un navegador puede recuperar un error y mostrar algo aparentemente razonable. Eso no demuestra que el marcado sea correcto: el DOM (Document Object Model, modelo de objetos del documento) resultante puede no coincidir con la estructura escrita. Corrige el origen en lugar de depender de esa reparación.
Comentarios y límites de su uso
Los delimitadores de comentario son <!-- y -->. El contenido no aparece como texto de la página, aunque sigue disponible en el código fuente.
<!-- This comment is not displayed on the page. -->Un comentario puede ocupar varias líneas:
<!--
This is a multiline
HTML comment.
-->No anides comentarios. Este contraejemplo puede terminar en un punto distinto del esperado:
<!--
<!-- Do not nest comments. -->
-->No escribas contraseñas, claves de API ni datos personales en comentarios. Que un texto no se vea en la presentación no significa que sea privado. Utiliza los comentarios para explicar el propósito de una parte del código, no para ocultar información confidencial.
Practicar con un documento independiente
Guarda este ejemplo completo como index.html en UTF-8 y ábrelo en un navegador. Comprueba qué texto aparece en la pestaña y cuál en la página. Sus textos de muestra están en inglés y, por coherencia, la raíz declara lang="en".
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document title</title>
</head>
<body>
<h1>Page heading</h1>
<p>Page content goes here.</p>
</body>
</html>Si sustituyes todo ese contenido por español, cambia el idioma a es. Para revisar el archivo completo puedes usar Nu HTML Checker. Examina primero el primer error y la línea anterior: una comilla sin cerrar puede provocar muchos avisos posteriores. La sección de sintaxis del estándar HTML especifica las reglas formales.
Atributos booleanos y caracteres literales
Un atributo booleano es verdadero cuando está presente. checked="false" sigue estando presente y no es una forma válida de expresar falso para ese atributo. Para iniciar una casilla sin selección, elimina checked.
<label><input type="checkbox" name="news" value="yes" checked> News</label>
<label><input type="checkbox" name="updates" value="yes"> Updates</label>Solo la primera casilla debe comenzar seleccionada. Si quieres mostrar las letras de una etiqueta, utiliza referencias de caracteres para sus signos: < y >. Cuando sea necesario escapar un ampersand, utiliza &.
<p><p> is a paragraph element. A & B are two names.</p>El resultado muestra el texto literal <p> y un ampersand; no crea un párrafo dentro de otro. Puedes contrastar los valores permitidos con las reglas de atributos booleanos. Una comprobación sintáctica no valida por sí sola el destino de los enlaces ni la utilidad de los textos: esas revisiones se practican en la detección de errores de un documento HTML.
