# O que são classes HTML e como usar o atributo class HTML?
É possível adicionar um elemento HTML a uma classe HTML usando o atributo `class`. Ao fazer isso, você pode modificar todos os elementos que compartilham essa classe, aplicando estilos via CSS ou interagindo com eles via JavaScript.
## O que são classes HTML?
Classes HTML são usadas na linguagem HTML para identificar e agrupar **elementos em uma página web**. `Class` é um dos atributos HTML mais importantes para conhecer no aprendizado de HTML. As classes possibilitam que os desenvolvedores editem ou manipulem múltiplos elementos sem que precisem lidar com eles individualmente.
Dica O atributo `class` pode ser aplicado a qualquer elemento HTML.
## Em que situações usar classes HTML?
A class HTML faz parte do conjunto de ferramentas padrão dos desenvolvedores web. Ela é especialmente útil em duas áreas de aplicação:
1. **Estilizar elementos com CSS**: Se você deseja [incluir CSS no HTML](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/design-de-sites/como-incluir-css-no-html/), as classes possibilitam definir estilos que podem ser aplicados a diversos elementos ao mesmo tempo. Isso possibilita manter o design do seu site consistente e, ao mesmo tempo, tornar o código CSS modular.
2. **Manipular elementos com JavaScript**: Ao usar classes HTML, os programadores conseguem selecionar grupos específicos de elementos com facilidade e manipulá-los usando código de JavaScript. Esse recurso é especialmente útil em interações dinâmicas e interfaces de usuário que precisam responder ao comportamento dos usuários.
## Qual é a sintaxe de classe em HTML?
A definição de uma class HTML é bastante direta. Basta **adicionar o atributo class ao elemento ao qual você deseja designar uma classe e nomeá-la**. O nome deve descrever a finalidade ou função da respectiva classe. O código ficará assim:
```html
Este texto pertence à classe chamada “Testeclass”.
```
No exemplo acima, um elemento de parágrafo HTML foi designado à classe “Testeclass”.
Dica Os nomes das classes **diferenciam caracteres maiúsculos e minúsculos**. Por exemplo, “testeclass” e “Testeclass” seriam consideradas **duas classes HTML diferentes**.
Um exemplo mais detalhado de como as classes são úteis:
```html
Exemplo de classes HTML
Este é um exemplo de class HTML
Este texto está destacado porque ele pertence à classe “destaque”.
Este texto está destacado e centralizado porque ele pertence às classes “destaque” e “centro”.
hash_3cee026ca97ea6dede541c520e12c9ce0ca42b78
```
O layout e a estilização dos parágrafos e títulos no exemplo acima são controlados pelas classes HTML referenciadas no CSS. Tenha em mente que, para **selecionar uma class HTML em CSS**, você precisa inserir um ponto final (.) antes de seu nome.
Dica Um único elemento HTML pode pertencer a várias classes. Basta listá-las separadas por um espaço dentro do atributo.
## Qual é a diferença entre classe HTML e IDs HTML?
Além do atributo `class`, a linguagem HTML também conta com o atributo HTML ID. Embora ambos tenham funções similares, é importante não confundi-los, pois existes diferenças-chave entre esses atributos:
- **Exclusividade**: Um ID é único dentro de um documento HTML, o que significa que dois elementos não podem compartilhar o mesmo ID. Já as classes HTML podem ser compartilhadas por vários elementos no mesmo documento.
- **Referência em CSS**: Para estilizar classes em CSS, usamos um ponto final (.) antes de seu nome. Para estilizar IDs, usamos uma hashtag (#).
- **Especificidade**: IDs têm um nível de especificidade mais alto do que as classes. Isso significa que, se um mesmo elemento tiver regras conflitantes definidas por uma classe e por um ID, o estilo definido pelo ID será aplicado. Nesse caso, os estilos da classe serão ignorados.
This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/class-html/](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/class-html/) for AI/LLM consumption.