HTML Elementos

Un documento HTML está compuesto por una serie de elementos HTML (Element), que son la base de la estructura de la página web.

¿Qué es un elemento HTML?

Un elemento HTML es la estructura completaentre la etiqueta de inicio (start tag)llegary la etiqueta de cierre (end tag).

Etiqueta de inicio Contenido del elemento Etiqueta de cierre
<p> Esto es un párrafo </p>
<a href="default.htm.html"> Esto es un enlace </a>
<br> Salto de línea (elemento vacío) Ninguno

Explicación:

  • La etiqueta de inicio también se llamaetiqueta de apertura (opening tag)
  • La etiqueta de cierre también se llamaetiqueta de cierre (closing tag)

Reglas de sintaxis de los elementos HTML

  • Un elemento conla etiqueta de iniciocomienza,la etiqueta de cierretermina.
  • El contenido del elemento se encuentra entre la etiqueta de inicio y la etiqueta de cierre.
  • Algunos elementos sonelementos vacíos (empty element), no tienen contenido.
  • Los elementos vacíos suelen autocerrarse en la etiqueta de inicio (como<br />）
  • La mayoría de los elementos pueden conteneratributos (Attributes)

Consejo:Los atributos se explicarán en detalle en capítulos posteriores.

Anidamiento de elementos HTML

Los elementos HTML pueden anidarse entre sí, formando una estructura de árbol:

  • Un elemento puede contener otros elementos
  • Un documento HTML es, en esencia, una estructura anidada (árbol DOM).

Ejemplo de documento HTML

<!DOCTYPE html>
<html>

  <body>
<p>Este es el primer párrafo.</p>
  </body>

</html>

Este ejemplo contiene 3 elementos centrales:html、body、p。

Explicación del ejemplo

Elemento <p> (párrafo)

<p>Este es el primer párrafo.</p>

Define un párrafo, que incluye contenido de texto.

Elemento <body> (cuerpo principal)

<body>
<p>Este es el primer párrafo.</p>
</body>

Define el contenido principal de la página y puede contener varios elementos secundarios.

Elemento <html> (elemento raíz)

<html>

  <body>
<p>Este es el primer párrafo.</p>
  </body>

</html>

Es el nodo raíz de todo el documento HTML; todo el contenido debe estar incluido en él.

Acerca de la etiqueta de cierre

En algunos casos, el navegador completa automáticamente la etiqueta de cierre que falta:

<p>Este es un párrafo
<p>Este es otro párrafo

Aunque puede mostrarse correctamente,no se recomienda depender de este comportamiento, lo que puede causar:

  • estructura desordenada
  • estilos anómalos
  • problemas de compatibilidad

Elementos vacíos en HTML

Los elementos vacíos son elementos sin contenido, por ejemplo:

  • <br>(salto de línea)
  • <img>(imagen)
  • <input>(campo de entrada)

Forma recomendada:

<br />

Esta forma es compatible con HTML, XHTML y XML, y es más estándar.

Mejores prácticas: usar etiquetas en minúsculas

Las etiquetas HTMLno distinguen entre mayúsculas y minúsculas, pero se recomienda:

  • usar de manera uniformeetiquetas en minúsculas
  • cumplir con las especificaciones W3C
  • mejorar la legibilidad y consistencia del código
Otras extensiones