# Clases HTML: cómo funciona el atributo class
Un elemento HTML puede añadirse a una clase HTML mediante el atributo `class`. Esto se puede hacer en [CSS](https://www.ionos.mx/digitalguide/paginas-web/diseno-web/que-es-css/) o JavaScript para manipular los elementos asociados de la misma manera.
## ¿Qué son las HTML classes?
Las HTML classes (o clases en español) se utilizan en [HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/que-es-html/) para **identificar y agrupar elementos en una página web**. `class` es uno de los [atributos HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/atributos-html/) que debes conocer cuando [aprendes HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/aprende-html-tutorial-para-principiantes/). Estas clases permiten a los desarrolladores estilizar o manipular múltiples elementos sin tener que tratarlos individualmente.
Consejo El atributo `class` se puede aplicar a cualquier elemento HTML.
## ¿Para qué se necesitan las clases en HTML?
Las clases en HTML son parte del repertorio estándar de los desarrolladores web. Son especialmente importantes para dos cosas:
1. **Estilización de elementos con CSS**: al [incorporar CSS en tu HTML](https://www.ionos.mx/digitalguide/paginas-web/diseno-web/css-en-html/), las clases permiten definir estilos que se pueden aplicar a múltiples elementos simultáneamente. Esto ayuda a mantener el diseño de una página web coherente y a la vez a estructurar el código CSS de manera modular.
2. **Manipulación de elementos con JavaScript**: mediante el uso de clases en HTML, los programadores pueden seleccionar fácilmente grupos específicos de elementos y manipularlos con código JavaScript. Esto es particularmente útil para interacciones dinámicas y para interfaces de usuario que deben responder al comportamiento de los usuarios.
## Sintaxis de las clases en HTML
La sintaxis para definir una clase en HTML es muy simple: **agrega el atributo `class` al elemento al que deseas asignar una clase y especifica el nombre de la clase correspondiente**. En el código, esto se vería de la siguiente manera:
```html
Este texto pertenece a la clase llamada “PruebaClase”.
```
En el ejemplo anterior, el párrafo HTML ha sido asignado a la clase “PruebaClase”.
Consejo Los nombres de las clases en HTML son **sensibles a mayúsculas y minúsculas**. En el ejemplo, “PruebaClase” y “pruebaclase” serían **dos clases HTML diferentes**.
Este ejemplo más detallado también ilustra el uso de las clases:
```html
Ejemplo de clases en HTML
Bienvenido al ejemplo de clases en HTML
Este texto está resaltado porque pertenece a la clase llamada “highlight”.
Este texto está resaltado y centrado porque pertenece a las clases “highlight” y “center”.
hash_39db33a78be012212459986dc88ca2819664178a
```
La posición y el estilo de los párrafos y encabezados en el ejemplo de código anterior se ven influenciados por las clases HTML utilizadas, haciendo referencia a las clases en el código CSS. Ten en cuenta que se accede a una **clase HTML en CSS** anteponiendo un punto (`.`) al nombre de la clase.
Consejo Un único elemento HTML puede pertenecer a varias clases. Estas se alistan simplemente una tras otra, sin separadores.
## ¿Qué diferencia hay entre las clases HTML y las ID HTML?
Además del atributo `class`, también existe el atributo ID en HTML. Aunque ambos atributos cumplen propósitos similares, no deben confundirse, ya que existen algunas diferencias clave entre ellos:
- **Unicidad**: una ID debe ser única dentro de un documento HTML, por lo que dos elementos nunca pueden compartir la misma ID. Las clases, en cambio, pueden ser compartidas por varios elementos en el mismo documento.
- **Referencia en CSS**: para aplicar estilos a las clases en CSS se utiliza un punto (.), mientras que para las ID se utiliza una almohadilla (#).
- **Especificidad**: las ID tienen una mayor especificidad que las clases. Esto significa que, si tanto una ID como una clase se aplican al mismo elemento HTML y definen estilos contradictorios, los estilos de la ID tendrán prioridad. Así que, en cierto modo, la clase puede ser sobrescrita.
This is a markdown version of: [https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/clases-html/](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/clases-html/) for AI/LLM consumption.