Estructura de etiqueta en HTML

Comprendiendo las etiquetas HTML y su funcionamiento

Tal como mencionamos anteriormente, una página web no es más que un archivo de texto enriquecido, compuesto por múltiples elementos llamados etiquetas HTML, las cuales le indican al navegador qué tipo de contenido debe mostrar y cómo presentarlo visualmente al usuario al momento de cargar la página.

🏷️ Clasificación de etiquetas en HTML

HTML no permite el uso de cualquier palabra como etiqueta. Existe un conjunto predefinido de etiquetas, organizadas por su función específica. A continuación, se presentan las principales categorías:

  1. Textuales: Se emplean para definir títulos, párrafos y fragmentos de texto.
  2. De agrupación: Permiten estructurar bloques de contenido con características similares.
  3. Multimedia: Incluyen imágenes, audios, videos y elementos relacionados.
  4. Tabulares: Se usan para presentar datos en forma de tabla.
  5. Formularios: Facilitan la entrada de información por parte del usuario.
  6. Interactivas: Ofrecen funcionalidades con las que el usuario puede interactuar.
  7. Semánticas: Sustituyen el uso genérico de etiquetas como <div> para mejorar la comprensión del contenido.
  8. De scripting: Relacionadas con la integración de lenguajes como JavaScript.

Más adelante en este curso, podrás consultar una “tabla periódica de etiquetas HTML”, donde verás una vista general de todas estas categorías con sus elementos más representativos.

📌 Estructura de una etiqueta HTML

Cada etiqueta HTML sigue una estructura específica que facilita su identificación y funcionamiento:

htmlCopiarEditar<nombre-de-etiqueta>Contenido</nombre-de-etiqueta>
  • La etiqueta de apertura se indica entre los signos < y >, por ejemplo: <p>.
  • La etiqueta de cierre es igual a la de apertura, pero añade una barra / al inicio, por ejemplo: </p>.

Aunque los navegadores modernos aceptan etiquetas escritas en mayúsculas, la buena práctica es usar minúsculas para mantener la consistencia y legibilidad.

⛔ Etiquetas sin cierre

Algunas etiquetas no necesitan cierre porque su función es puntual. Ejemplos:

htmlCopiarEditar<br>
<img src="imagen.jpg" alt="Descripción">

Estas etiquetas son conocidas como auto-contenidas o vacías.

⚙️ Atributos en las etiquetas

Las etiquetas pueden llevar atributos que modifican su comportamiento o aportan información adicional. Estos se escriben dentro de la etiqueta de apertura, después del nombre de la etiqueta y antes del símbolo >:

htmlCopiarEditar<input type="text" placeholder="Escribe aquí">

Reglas para los atributos:

  • Siempre deben llevar un valor, separado con el signo =.
  • Los valores deben ir entre comillas dobles " " (aunque también se permiten simples).
  • No se debe repetir un atributo en la misma etiqueta.

Ejemplo con múltiples atributos:

htmlCopiarEditar<strong class="resaltado" lang="es">Texto importante</strong>

🎯 Tipos de atributos

Existen tres tipos principales de atributos:

  1. De valores fijos: Solo aceptan ciertos valores definidos.
    Ejemplo: htmlCopiarEditar<audio preload="auto"></audio> <!-- auto, metadata, none -->
  2. De valor libre: Puedes ingresar el valor que consideres necesario.
    Ejemplo: htmlCopiarEditar<img src="foto.jpg" alt="Descripción personalizada">
  3. Booleanos: No requieren valor. Si están presentes, se consideran true; si están ausentes, se entienden como false.
    Ejemplo: htmlCopiarEditar<audio muted></audio>

🧱 Contenido dentro de una etiqueta

Entre las etiquetas de apertura y cierre, se coloca el contenido que queremos que sea interpretado por el navegador. Este contenido puede ser texto simple, otras etiquetas o una mezcla de ambos.

Ejemplo 1 – Solo texto:

htmlCopiarEditar<p>Este es un párrafo de ejemplo.</p>

Ejemplo 2 – Etiquetas anidadas:

htmlCopiarEditar<div id="contenedor">
  <strong>Texto resaltado dentro de un contenedor</strong>
</div>

Recuerda que una etiqueta puede tener múltiples atributos sin importar el orden, pero nunca deben repetirse. Si lo haces, el navegador solo reconocerá el último.

📝 Comentarios en HTML

Los comentarios son notas visibles solo en el código, útiles para explicar partes específicas o dejar recordatorios. El navegador los ignora por completo.

htmlCopiarEditar<!-- Este es un comentario que no será visible en la página -->

Se escriben iniciando con <!-- y finalizando con -->. Muchos editores permiten activar o desactivar líneas como comentario mediante atajos de teclado (por ejemplo, Ctrl + /).