Atributos Globales, Contenedores Div y Span, y Comentarios en HTML5

Atributos Globales

Los atributos globales son aquellos que pueden ser utilizados en cualquier elemento HTML5. Estos atributos permiten configurar y personalizar el comportamiento y estilo de los elementos.

Algunos ejemplos comunes son:

id

Identificador único para un elemento.

html
<p id="parrafo-1">Este es un párrafo con un ID único.</p>

class

Define una o más clases para aplicar estilos CSS o JavaScript.

html
<div class="contenedor">Contenido dentro de un contenedor</div>

style

Añade estilos CSS directamente al elemento.

html
<p style="color: blue; font-size: 16px;">Texto con estilo en línea.</p>

title

Proporciona un texto emergente (tooltip) cuando el cursor pasa sobre el elemento.

html
<img src="imagen.png" title="Descripción de la imagen">

data-*

Permite almacenar datos personalizados en los elementos, usados comúnmente en JavaScript.

html
<div data-usuario="123">Usuario 123</div>

Divs y Spans

En HTML, los elementos div y span son usados para organizar y agrupar contenido, aunque tienen diferentes propósitos:

Div: Es un contenedor de nivel de bloque, utilizado para agrupar grandes secciones de contenido o elementos.

html
<div class="seccion">
  <h2>Título de la Sección</h2>
  <p>Este es un párrafo dentro de un div.</p>
</div>

Span: Es un contenedor de nivel en línea, útil para agrupar pequeños fragmentos de texto o elementos dentro de una línea.

html
<p>Este es un <span style="color: red;">texto en rojo</span> dentro de un párrafo.</p>
  Diferencia clave:

  • div: Bloquea el contenido y suele apilarse verticalmente.
  • span: Mantiene el contenido en línea sin generar un nuevo bloque.

Comentarios en HTML

Los comentarios en HTML se utilizan para agregar notas o descripciones que no serán visibles en el navegador, pero que sirven para dejar mensajes o guías en el código. Son útiles para colaborar con otros desarrolladores o para recordar el propósito de un fragmento de código.

Sintaxis de comentario:

html
<!-- Este es un comentario en HTML -->