Lección 10 Atributos en HTML

🧩 Etiquetas HTML y Atributos Esenciales

En HTML, todo gira en torno a las etiquetas, las cuales definen la estructura del contenido que se mostrará en el navegador. Cada una cumple una función específica, y puede contener contenido de texto u otras etiquetas. Junto a estas etiquetas, encontramos los atributos, que sirven para modificar o extender el comportamiento de las mismas. Los atributos se añaden dentro de la etiqueta de apertura y aportan información adicional, como identificación, estilo o comportamiento.

🔖 Atributos comunes en HTML vinculados a CSS

A continuación, se presentan tres de los atributos más utilizados que tienen relación directa con el diseño visual mediante CSS:

Atributo	Valor esperado	Función principal
`id`	nombre único	Asigna una identidad única a una etiqueta para diferenciarla del resto.
`class`	nombre de clase	Permite agrupar elementos que comparten una misma función o estilo.
`style`	código CSS directo	Aplica estilos específicos directamente desde el HTML.

Veamos cada uno de estos con más detalle:

🆔 El atributo `id`: Identificadores únicos

El atributo id se utiliza para asignar un nombre exclusivo a un elemento dentro del documento HTML. Es útil cuando se desea referenciar ese elemento desde CSS, JavaScript o desde un enlace interno (ancla).

Reglas importantes:

No debe comenzar con un número.
Es recomendable usar nombres con guiones y letras minúsculas (ej. zona-contenido).
No se deben repetir dos elementos con el mismo id dentro del mismo archivo HTML.

Ejemplo:

htmlCopiarEditar<div id="contenedor">
  <div>Aquí irá un anuncio</div>
  <div id="articulo">Contenido del artículo</div>
</div>

Casos de uso típicos:

Vincular con estilos específicos en CSS.
Crear anclas dentro de la misma página.
Manipular elementos con JavaScript de forma precisa.

🧷 El atributo `class`: Agrupación y reutilización de estilos

A diferencia de id, el atributo class puede repetirse en distintos elementos. Se emplea para agrupar varios elementos bajo un mismo nombre de clase, lo cual es útil para aplicar estilos compartidos o comportamientos comunes.

Ejemplo:

htmlCopiarEditar<div id="pagina">
  <div class="anuncio">Anuncio 1</div>
  <div id="articulo">Artículo principal</div>
  <div class="anuncio">Anuncio 2</div>
</div>

Gracias al uso de clases, podrías aplicar un solo estilo CSS a todos los bloques con la clase anuncio, en lugar de estilizar uno por uno.

Múltiples clases:
También es posible que un elemento tenga más de una clase. Basta con separarlas por espacios dentro del atributo:

htmlCopiarEditar<div class="anuncio destacado">Publicidad destacada</div>

Importante: Si colocas más de un atributo class en la misma etiqueta, solo el último será considerado válido por el navegador. Siempre agrupa todas las clases en un solo atributo.

🎨 El atributo `style`: Aplicar CSS directamente

Este atributo permite definir estilos CSS directamente sobre una etiqueta HTML. Se conoce como estilo en línea y puede ser útil para pruebas rápidas o modificaciones puntuales.

Ejemplo:

htmlCopiarEditar<p style="color: white; background-color: navy;">Mensaje destacado</p>

Aunque funcional, no se recomienda usar esta técnica para proyectos grandes, ya que mezcla el diseño con la estructura y dificulta el mantenimiento del código. La mejor práctica es mantener los estilos en archivos .css separados.

Cuándo sí se puede usar:

Para sobrescribir rápidamente un estilo.
Para definir variables CSS en ciertos contextos específicos.

✅ Resumen de buenas prácticas

Usa id solo cuando necesites una identificación única.
Prefiere class para aplicar estilos comunes a varios elementos.
Evita el uso excesivo de style en línea; mantén el CSS separado del HTML.