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 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 para identificar y agrupar elementos en una página web. class es uno de los atributos HTML que debes conocer cuando aprendes HTML. Estas clases permiten a los desarrolladores estilizar o manipular múltiples elementos sin tener que tratarlos individualmente.
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:
- Estilización de elementos con CSS: al incorporar CSS en tu 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.
- 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:
<p class="PruebaClase">Este texto pertenece a la clase llamada “PruebaClase”.</p>En el ejemplo anterior, el párrafo HTML ha sido asignado a la clase “PruebaClase”.
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:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Ejemplo de clases en HTML</title>
<style>
.highlight {
background-color: blue;
}
.center {
text-align: center;
}
</style>
</head>
<body>
<h1 class="center">Bienvenido al ejemplo de clases en HTML</h1>
<p class="highlight">Este texto está resaltado porque pertenece a la clase llamada “highlight”.</p>
<p class="highlight center">Este texto está resaltado y centrado porque pertenece a las clases “highlight” y “center”.</p>
</body>
</html>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.
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.
- Certificado SSL Wildcard gratis
- Registro privado
- Función Domain Connect para una configuración DNS simplificada gratis