HTML
Conceptos esenciales de la sintaxis HTML: elementos, etiquetas, atributos, anidamiento, IDs, caracteres reservados y errores frecuentes.
HTML describe un documento mediante elementos, atributos y texto.
<a href="/portfolio">Ver proyectos</a><a> → etiqueta de apertura
href="/portfolio" → atributo
Ver proyectos → contenido
</a> → etiqueta de cierreUna etiqueta es parte de la sintaxis escrita:
<p>
</p>El elemento es la estructura que el parser crea en el documento, incluyendo contenido y relaciones con otros nodos.
<p>Hola</p>El navegador crea un elemento p con un nodo de texto como hijo.
La mayoría tiene apertura y cierre:
<article>
<h2>Nuevo producto</h2>
<p>Descripción del producto.</p>
</article>Cerrar correctamente hace visible la intención y evita depender de reglas de corrección del parser.
Algunos elementos no pueden contener hijos ni tener etiqueta de cierre:
<img src="product.webp" alt="Teclado mecánico negro">
<br>
<hr>
<input type="email" name="email">
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">Esto es incorrecto:
<br></br>
<hr>Separador</hr>
<img></img>El slash de estilo XML puede escribirse:
<img src="product.webp" alt="Teclado mecánico negro" />En HTML no “cierra” el elemento; el parser sigue tratándolo como void. El espacio antes del slash evita que se mezcle accidentalmente con un valor sin comillas.
<p>
Conoce nuestro
<a href="/catalog">catálogo</a>.
</p>Los elementos deben cerrarse respetando su anidamiento:
<strong><em>Texto</em></strong>No:
<strong><em>Texto</strong></em>El parser intentará corregirlo, pero el árbol resultante puede no coincidir con lo que imaginabas.
<input
id="email"
name="email"
type="email"
autocomplete="email"
required
>Un atributo añade información o configura comportamiento.
id → identifica el elemento dentro del documento
name → nombre utilizado al enviar el control
type → estado o variante del elemento
autocomplete → propósito del dato para autocompletado
required → atributo booleanoUsa comillas para evitar ambigüedad:
<a href="/search?q=html basics">Buscar</a>Sin comillas, espacios y ciertos caracteres terminan el valor.
Las comillas dobles son una convención común; las simples también son válidas.
La presencia representa verdadero:
<input required>
<button disabled>Guardar</button>
WNC0