Tema 3 · Fundamentos

Elementos, Etiquetas y Atributos

Aprende la diferencia entre etiquetas de cierre y elementos vacíos, y cómo los atributos configuran el comportamiento y apariencia de cada componente.

Estructura Básica y Doctype Encabezados, Párrafos y Saltos

¿Qué es un Atributo en HTML?

Todos los elementos HTML pueden tener atributos. Los atributos proveen información adicional sobre un elemento, se especifican siempre en la etiqueta de apertura y usualmente vienen en pares de clave/valor como nombre="valor". 

<a href="https://kilopolis.com" target="_blank" title="Visitar Kilopolis">Ir a Kilopolis</a>

Elementos Vacíos (Void Elements)

En HTML existen etiquetas que no tienen etiqueta de cierre ni pueden contener texto o elementos hijos en su interior. Se les conoce como etiquetas vacías o elementos autónomos.

Etiqueta Propósito Sintaxis en HTML5
<br> Inserta un salto de línea dentro de un párrafo. <br> (la barra <br /> es opcional de XHTML).
<hr> Dibuja una regla o separador temático horizontal. <hr>
<img> Inserta una imagen (requiere atributos src y alt). <img src="foto.jpg" alt="Descripción">
<input> Campo de entrada de datos en un formulario. <input type="text" name="usuario">
<meta> Metadatos en el head del documento. <meta charset="UTF-8">

Atributos Globales Esenciales

Los atributos globales son aquellos que pueden aplicarse a cualquier elemento HTML:

  • class: Asigna uno o más nombres de clase CSS separados por espacios (ej: class="tarjeta destacada") para estilizar o seleccionar en JavaScript.
  • id: Define un identificador único en todo el documento. No deben existir dos elementos con el mismo id. Se utiliza para CSS (#mi-id), JavaScript (getElementById) y enlaces de ancla interna.
  • title: Muestra un pequeño cuadro de ayuda (tooltip nativo) cuando el usuario pasa el cursor del ratón por encima del elemento.
  • style: Permite incrustar reglas CSS en línea directamente sobre el elemento (ej: style="color: red;").
  • hidden: Atributo booleano que indica al navegador que oculte el elemento visualmente.

Atributos Booleanos

Muchos atributos representan estados de verdadero/falso. La sola presencia del nombre del atributo indica que está activo, sin necesidad de asignarle un valor: 

<!-- Ambas formas son válidas en HTML5, la primera es la más limpia y recomendada -->
<button disabled>Botón Bloqueado</button>
<input type="checkbox" checked>

⚡ Uso de Atributos y Elementos Vacíos

Experimenta con atributos globales como title, id, class y elementos vacíos como br y hr:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Demostración de Atributos</title>
  <style>
    body { font-family: sans-serif; padding: 20px; line-height: 1.6; background: #f8fafc; }
    .caja-alerta {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-left: 4px solid #3b82f6;
      border-radius: 6px;
      padding: 16px;
      max-width: 500px;
    }
    .badge-destacado {
      background: #2563eb;
      color: white;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 0.8rem;
    }
    .btn-prueba {
      padding: 8px 14px;
      border-radius: 6px;
      border: 1px solid #94a3b8;
      background: #ffffff;
      cursor: pointer;
    }
    .btn-prueba:hover { background: #f1f5f9; }
  </style>
</head>
<body>

  <div id="panel-principal" class="caja-alerta" title="Este es un tooltip nativo generado por el atributo title">
    <span class="badge-destacado">Tip de Atributos</span>
    <h3 style="margin-top: 10px; color: #1e3a8a;">Pasa el mouse por esta tarjeta</h3>
    
    <p>
      El atributo <code>title</code> crea un tooltip al dejar el cursor quieto unos segundos.<br>
      La línea debajo de este texto es un elemento vacío <code>&lt;hr&gt;</code>:
    </p>

    <hr style="border: 0; border-top: 1px solid #cbd5e1; margin: 15px 0;">

    <button class="btn-prueba" onclick="alert('Elemento con id: ' + this.parentElement.id)">
      Ver ID de la tarjeta
    </button>
    <button class="btn-prueba" disabled style="opacity: 0.6; cursor: not-allowed;" title="Este botón tiene el atributo booleano disabled">
      Botón Deshabilitado
    </button>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de HTML5 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.