Entendendo os atributos HTML \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto**
Termina em Tempo restante da oferta: 14 Horas
10 Min
19 Seg
Tempo restante da oferta: 14 10 19
[Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26)
[ ](https://www.treinaweb.com.br) Explorar
[ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login)
[ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Entendendo os atributos HTML [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) [ HTML ](https://www.treinaweb.com.br/blog/categoria/html)
# Entendendo os atributos HTML
No artigo de hoje, veremos algo que está muito presente no mundo da programação, atributos. Por que são tão importantes para o Front-End?
[ Rafael Oliveira ](https://www.treinaweb.com.br/blog/autor/rafael-oliveira) 4 anos atrás
Quando falamos de `html`, é bom estarmos cientes que é algo onde envolvem inúmeras coisas, e uma das, são os atributos. Os atributos são praticamente indispensáveis quando estamos desenvolvendo um documento `html`, mas, o que seriam esses atributos de fato?
Vamos acompanhar a seguir este artigo onde irá explicar o que são os atributos, para que servem e como utilizá-los.
[  ](https://www.treinaweb.com.br/ebook/guia-HTML/)
## O que é?
Atributos são palavras específicas que têm a finalidade de alterar o comportamento de uma `tag`, e ele é inserido dentro da abertura da `tag`. Em breve veremos diversos exemplos.
[  Curso HTML5 + CSS3 - Propriedades e seletores avançados Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-propriedades-e-seletores-avancados)
Além disso, existem os atributos globais, que são aqueles que irão servir para todos os tipos de `tags`, e, os específicos, que serão direcionados apenas para algumas `tags`, cada um possui seu nome e seu valor. Veremos aqui os mais utilizados.
## Atributos Globais
- class
- id
- hidden
### Class
Primeiramente, veremos sobre o atributo `class`, sua função é determinar uma ou mais classes de atalho para uma `tag`, para que assim, seja possível mudar o comportamento dessa `tag` e estilizá-la através da linguagem [CSS](http://www.treinaweb.com.br/blog/seletores-basicos-do-css "CSS"). Essa determinação de `class` é feita através de um nome que iremos escolher e que faça sentido.
Mas, existem alguns critérios para utilizarmos esse atributo corretamente, começando pelo nome que iremos escolher. A separação desse nome é feita através de hífen `-` ou underscore `_`, e, não se pode utilizar caracteres especiais, além de hífen e underscore. Para que seja possível declararmos mais de uma `class` para o mesmo atributo, devemos acrescentar um espaço entre um nome e outro.
Só para exemplificar, no Visual Studio Code, vamos abrir um documento `html` com o seguinte nome, `index.html`. Nele, iremos declarar uma `tag` de título `h1`, e na `tag` de abertura, vamos colocar uma `class` com o nome “titulo-principal”. Feito isso, vamos declarar uma `tag` de título `h2` e na `tag` de abertura, vamos colocar uma `class` com o nome “subtitulo\_da\_pagina”, dessa forma:
```html
Atributos
Título Principal
Subtítulo da Página
```
Quando abrirmos este documento no navegador, veremos que não irá alterar nada, pois como foi dito antes, só é possível realizar alterações apenas com a linguagem `CSS`.
#### Estilização utilizando atributo class
Mas, para termos uma ideia da importância desse atributo e como utilizá-lo, vamos fazer uma estilização simples. Para isso, dentro de `body`, vamos declarar `style`, que será nossa linguagem `CSS`.
```html
Atributos
Título Principal
Subtítulo da Página
```
Feito isso, vamos “chamar” a nossa `class` utilizando um `.` (ponto final) e escrevendo o nome dela, em seguida, basta inserirmos chave de abertura e fechamento `{ }`.
```html
Atributos
.titulo-principal {
}
Título Principal
Subtítulo da Página
```
[  ](https://www.treinaweb.com.br/lp/aula-gratis/)
Agora, dentro das chaves, iremos alterar a cor do nosso h1 para azul, mas, a linguagem `CSS` tem uma característica, só é possível declarar algo em inglês. Tendo isso em vista, vamos digitar color: blue;, assim, vamos obter a cor azul.
```html
Atributos
.titulo-principal {
color: blue;
}
Título Principal
Subtítulo da Página
```
Após isso, para alterarmos a cor do nosso `h2`, basta seguirmos os mesmos passo a passo que foi dado anteriormente.
```html
Atributos
.titulo-principal {
color: blue;
}
.subtitulo_da_pagina {
color: red;
}
Título Principal
Subtítulo da Página
```
No navegador, ficará dessa forma:
### ID
Diferente do atributo `class`, que permite declararmos diversas classes na mesma `tag`, podemos também reutilizar a mesma `class` que foi declarada em uma `tag` diferente, o `id` é um identificador único de um elemento, só é possível declararmos apenas um `id` por elemento, e o mesmo não pode ser repetido.
[  Curso HTML5 + CSS3 - Dominando o Flexbox Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-dominando-o-flexbox)
Podemos utilizar este atributo quando queremos estilizar um único elemento, e temos certeza de que essa estilização não irá se repetir no decorrer do nosso documento. Além disso, é podemos também identificar destino de âncoras com `id`.
Foi visto antes que, para conseguirmos estilizar um elemento utilizando o atributo `class`, dentro de `style`, devemos adicionar um `.` (ponto final) antes de colocarmos o nome da nossa `class`. Já com `id`, adicionamos uma `#` (cerquilha) e, em seguida, o nome que atribuímos para o nosso `id`.
Para ficar mais prático, vamos pegar o mesmo exemplo anterior, mas, agora utilizando `id`. Dessa vez, para `h1`, vamos declarar a cor verde, e para `h2`, roxo.
```html
Atributos
#titulo-principal {
color: green;
}
#subtitulo_da_pagina {
color: purple;
}
Título Principal
Subtítulo da Página
```
No navegador irá ficar dessa forma:
#### Ancoragem com id
Para que seja possível utilizar essa funcionalidade do atributo `id`, o nosso documento `html` deverá possuir conteúdo o suficiente para gerar scroll na página. Vamos criar um exemplo só para aprendermos a utilizar essa função.
Primeiramente, vamos abrir um novo documento `html`, com o seguinte nome, `index.html`. Feito isso, vamos declarar uma `tag` de lista não ordenada, `ul`, dentro de `ul`, declaramos a `tag` de lista `li`, e, dentro de `li`, inserimos a `tag` de âncora, `a`, por fim, inserimos 12 itens dentro da `tag` `a`. No código ficará assim:
```html
Atributos
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
```
Após isso, declaramos um total de 12 `tags` de título `h2`, e para cada `h2`, inserimos um `id`, o primeiro `` terá um `id` com o seguinte nome, id=“item-1”, e o último, id=“item-12”. Abaixo de cada `h2`, vamos declarar um parágrafo com um `lorem` só para termos conteúdo o suficiente a ponto de gerar scroll na página.
Ficando dessa forma:
```html
Atributos
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 1
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
Item 2
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
Item 3
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
Item 4
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
Item 5
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
Item 6
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
Item 7
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
Item 8
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
Item 9
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
Item 10
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
Item 11
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
Item 12
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
```
Agora, para que seja possível usar a função de ancoragem, basta irmos nos `href` que declaramos anteriormente, junto da `tag` `a`, e nele, inserimos o `id` que se refere ao item, dessa maneira:
```html
Atributos
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 1
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
Item 2
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
Item 3
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
Item 4
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
Item 5
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
Item 6
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
Item 7
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
Item 8
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
Item 9
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
Item 10
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
Item 11
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
Item 12
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
```
No navegador, teremos esse resultado: 
Quando clicarmos em “item 12”, o navegador irá descer até o item 12 automaticamente, o mesmo se aplica aos demais.
### Hidden
Por fim, teremos o atributo `hidden`, sendo sua função ocultar elementos do nosso documento `html`, indicando ao navegador que o elemento que possuir este atributo, se tornará irrelevante e não será renderizado.
[  Curso HTML5 + CSS3 - Dominando o Flexbox Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-dominando-o-flexbox)
Sua declaração é feita dentro da `tag` de abertura do elemento, assim como os demais. Vamos observar um exemplo a seguir:
```html
Atributos
TreinaWeb
```
No navegador veremos o título “TreinaWeb” normalmente.
Agora, para ocultar este elemento, basta adicionar `hidden` dentro da `tag` de abertura do `h1`.
```html
Atributos
TreinaWeb
```
Como dito anteriormente, o elemento ainda está lá, porém, não será renderizado devido ele ter se tornado irrelevante para o navegador, sendo essa a função do `hidden`.
## Atributos Específicos
- src
- alt
- disabled
### Src
O atributo `src` vem acompanhado da `tag` `img`, assim como `alt`, mas veremos sobre `alt` em breve. A função de `src` é indicar para `img` qual mídia será utilizada no documento `html`, podendo ser a URL de uma imagem retirada do Google, por exemplo, ou até mesmo uma imagem que já esteja dentro da pasta do nosso projeto.
O código no Visual Studio Code ficará dessa forma:
```html
Atributos
```
Lembrando que veremos em breve sobre o atributo `alt`.
Só para exemplificar, vamos utilizar o mesmo código mostrado acima e inserir uma imagem qualquer, para isso, vamos criar uma pasta no Visual Studio Code com o nome de img.
Feito isso, vamos escolher uma imagem do Google e salvar dentro da pasta img que acabamos de criar.
Para conseguir inserir essa imagem no nosso projeto, dentro do atributo `src` iremos escrever img, sendo o nome da pasta que criamos anteriormente, em seguida, colocamos uma barra `/` e inserimos o nome da nossa imagem.
O código final ficará dessa forma:
```html
Atributos
```
Quando abrirmos o navegador, ele irá renderizar a imagem.
### Alt
Agora, veremos sobre o atributo `alt`, que vem em conjunto da `tag` `img` e do atributo `src`, como vimos anteriormente.
O atributo `alt` serve como um texto alternativo, o objetivo é descrever a imagem que colocamos no nosso projeto, com a finalidade de manter a [acessibilidade](http://www.treinaweb.com.br/blog/acessibilidade-no-html "acessibilidade") e caso a imagem não seja renderizada pelo navegador, ele irá apresentar o texto que foi inserido para que o usuário saiba do que se trata a imagem.
Vamos utilizar o mesmo exemplo acima para entender como usamos esse atributo de extrema importância.
```html
Atributos
```
No navegador, caso a imagem não seja renderizada, ficará dessa forma:
### Disabled
Por fim, temos o atributo `disabled`, sendo ele o responsável por desabilitar a função de determinadas `tags` quando declarado, como `button`, `input`, `select`, entre outras.
Em outras palavras, `disabled` é um atributo booleano, isso significa que ele ficará ativo, desabilitando a função de determinada `tag`, ou inativo, permitindo que o usuário interaja com a `tag`. Mas, só é possível alterar a função do `disabled` através do [JavaScript](http://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-javascript "JavaScript").
[  Curso Kotlin - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/kotlin-fundamentos)
Vamos criar um breve exemplo para melhorar o entendimento sobre esse atributo. Primeiro, criaremos um arquivo `html` com o nome de `index.html`, em seguida, vamos criar um `button` com o nome de “Enviar”.
Feito isso, dentro da `tag` de abertura de `button`, vamos declarar `disabled`, dessa forma:
```html
Atributos
Enviar
```
Ao abrirmos o nosso navegador, teremos o seguinte resultado:
É possível observar que quando utilizamos o atributo `disabled`, ele muda o visual da `tag`, deixando com uma tonalidade acinzentada, dando a ideia de desabilitado, não permitindo interação entre o usuário e a página.
## Conclusão
Com esse artigo conseguimos adquirir o conhecimento dos atributos mais utilizados pelos desenvolvedores Front-End, vimos também a importância de cada um. Agora será possível aplicar durante o desenvolvimento dos nossos projetos, para que no fim, tenhamos um documento mais completo.
É de suma importância entendermos a função de cada atributo apresentado no decorrer deste artigo, para utilizar cada um deles com mais autoridade.
- [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end)
- [ #HTML5 ](https://www.treinaweb.com.br/blog/tag/html5)
- [ #Atributos HTML ](https://www.treinaweb.com.br/blog/tag/atributos-html)
Autor
## Rafael Oliveira
Estudante de programação, atualmente me especializando no Front End. Faço curso de Desenvolvimento de Sistemas na Escola Tecnica Estadual Doutora Ruth Cardoso e o meu principal objetivo é me tornar um Full Stack. Nas horas vagas costumo cozinhar, pois sou apaixonado pela área da culinária.
[Todos os artigos](https://www.treinaweb.com.br/blog/autor/rafael-oliveira)
## Continue estudando
Transforme leitura em prática com os cursos e formações da TreinaWeb.
[Ver cursos](https://www.treinaweb.com.br/cursos)
Continue lendo
## Artigos relacionados
-  [ HTML ](https://www.treinaweb.com.br/blog/categoria/html)
8 anos atrás
## [ Criando formulários automaticamente com Django ](https://www.treinaweb.com.br/blog/criando-formularios-automaticamente-com-django)
Veja neste artigo como utilizar o Django para renderizar um formulário de cadastro de forma automática sem que precisemos escrever HTML.
Ler artigo
-  [ CSS ](https://www.treinaweb.com.br/blog/categoria/css)
3 anos atrás
## [ Entendendo o shorthand no CSS ](https://www.treinaweb.com.br/blog/entendendo-o-shorthand-no-css)
Vamos aprender o que é shorthand no CSS, entender o conceito e aprender a deixar nossos estilos mais limpo e de fácil manutenção
Ler artigo
-  [ Java ](https://www.treinaweb.com.br/blog/categoria/java)
6 anos atrás
## [ Thymeleaf - Herança de Templates ](https://www.treinaweb.com.br/blog/thymeleaf-heranca-de-templates)
Neste artigo veremos como implementar a herança de templates com os fragments parametrizados da template engine Thymeleaf.
Ler artigo
-  [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux)
6 anos atrás
## [ Técnicas de acessibilidade para deixar o seu site mais inclusivo ](https://www.treinaweb.com.br/blog/tecnicas-de-acessibilidade-para-deixar-o-seu-site-mais-inclusivo)
Conheça as principais ferramentas e técnicas de acessibilidade para web. Veja também tipos de dificuldades e deficiências atendidas por elas.
Ler artigo
-  [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript)
5 anos atrás
## [ Usando Sequelize ORM com Node e Express ](https://www.treinaweb.com.br/blog/usando-sequelize-orm-com-node-e-express)
Vamos aprender a configurar uma aplicação com banco de dados MySQL usando Sequelize ORM com Node.js e Express.
Ler artigo
-  [ Orientação a Objetos ](https://www.treinaweb.com.br/blog/categoria/orientacao-a-objetos)
10 anos atrás
## [ Devo usar herança ou composição? ](https://www.treinaweb.com.br/blog/devo-usar-heranca-ou-composicao)
A composição permite um reuso e extensão de código mais flexível que a herança clássica. Mas isso é motivo para sempre a escolhermos em detrimento à herança clássica?
Ler artigo
-  [ PHP ](https://www.treinaweb.com.br/blog/categoria/php)
7 anos atrás
## [ API de Reflexão do PHP ](https://www.treinaweb.com.br/blog/api-de-reflexao-do-php)
Veja como usar a API de reflexão do PHP para extrair e até mesmo alterar características internas de classes, interfaces, métodos etc, em tempo de execução.
Ler artigo
-  [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia)
7 anos atrás
## [ Acessibilidade web: por que deixar seu site acessível? ](https://www.treinaweb.com.br/blog/acessibilidade-web-por-que-deixar-seu-site-acessivel)
Confira neste artigo a importância da acessibilidade em seu site.
Ler artigo
-  [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript)
6 anos atrás
## [ Criando um servidor HTTP com Express ](https://www.treinaweb.com.br/blog/criando-um-servidor-http-com-express)
O Express é um framework utilizado em conjunto com o Node.js. Ele possui características que facilitam o desenvolvimento de nossas aplicações web e APIs, como um sistema de rotas completo, tratamento de exceções, gerenciamento de requisições HTTP e muito mais.
Ler artigo
-  [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento)
7 anos atrás
## [ Concorrência, Paralelismo, Processos, Threads, programação síncrona e assíncrona ](https://www.treinaweb.com.br/blog/concorrencia-paralelismo-processos-threads-programacao-sincrona-e-assincrona)
Concorrência, paralelismo, processos, threads, programação síncrona e assíncrona, são assuntos que permeiam o dia a dia dos desenvolvedores. A ideia desse artigo é descomplicar um pouco o que esses conceitos significam e como eles se relacionam.
Ler artigo
-  [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end)
4 anos atrás
## [ Entendendo ponteiros na Golang ](https://www.treinaweb.com.br/blog/entendendo-ponteiros-na-golang)
Neste artigo veremos sobre os ponteiros na Golang. Vamos entender o que são ponteiros, quais suas vantagens e desvantagens e como utilizá-los.
Ler artigo
-  [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end)
7 anos atrás
## [ Entendendo o MTV do Django ](https://www.treinaweb.com.br/blog/entendendo-o-mtv-do-django)
Veja neste artigo como funciona o padrão de projeto utilizando em projetos Django, o MTV.
Ler artigo
## Um ano de acesso total para você viver de programação.
Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho.
- **1 ano** de acesso a **todos os cursos**
- Cursos novos **toda semana**
- Suporte **direto com professores**
- Plano de carreira **personalizado**
- **Certificados digitais** inclusos
- **Aplicativos** para Android e iOS, com **acesso offline**
**Garantia incondicional de satisfação**
Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro.
### Acesso completo a todos os cursos e dezenas de Formações.
12 meses
Economize R$ 840,00 54% OFF
de 12x R$ 129,00 por apenas
12x R$ 59,00
sem juros no cartão de crédito ou R$ 599,00 à vista
Oferta termina em **14h 10min 19s**
- Acesso imediato e ilimitado durante 1 ano.
- Plano de carreira personalizado.
- Suporte direto com professores.
- E muito mais!
[Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26)
[ ](https://www.treinaweb.com.br)
Escola online de programação, tecnologia e IA.
- [ ](https://www.facebook.com/TreinaWeb/)
- [ ](https://www.instagram.com/treinaweb/)
- [ ](https://www.youtube.com/user/TreinaWeb)
- [ ](https://twitter.com/treinaweb)
- [ ](https://www.linkedin.com/company/treinaweb)
- [ ](https://github.com/treinaweb)
## Inscreva-se em nossa newsletter
Receba lançamentos, promoções e novidades.
Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se
## Cursos
- [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs)
- [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end)
- [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end)
- [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile)
- [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados)
- [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing)
- [ IA ](https://www.treinaweb.com.br/categoria/ia)
- [ E mais ](https://www.treinaweb.com.br/categoria/e-mais)
- [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos)
## Conteúdo
- [ Formações ](https://www.treinaweb.com.br/formacoes)
- [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos)
- [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto)
- [ Planos ](https://www.treinaweb.com.br#assinatura)
- [ Depoimentos ](https://www.treinaweb.com.br#depoimentos)
- [ Comunidade ](https://www.treinaweb.com.br#comunidade)
- [ Corpo docente ](https://www.treinaweb.com.br#docente)
## A empresa
- [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre)
- [ Perguntas frequentes ](https://www.treinaweb.com.br#faq)
- [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb)
- [ Cursos para empresas ](https://www.treinaweb.com.br/empresas)
- [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso)
- [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco)
- [ Artigos ](https://www.treinaweb.com.br/blog)
- [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers)
- [ Contato ](https://www.treinaweb.com.br/contato)
- [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade)
- [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso)
## Baixe nosso aplicativo
[ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile)
Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58