Guia da linguagem HTML \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto**
Termina em Tempo restante da oferta: 18 Horas
53 Min
21 Seg
Tempo restante da oferta: 18 53 21
[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) Guia da linguagem HTML [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) [ HTML ](https://www.treinaweb.com.br/blog/categoria/html) [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) [ Guias ](https://www.treinaweb.com.br/blog/categoria/guias)
# Guia da linguagem HTML
Esse guia é perfeito pra você que está começando ou quer entender melhor como podemos trabalhar com a linguagem HTML .
[ Amauri Blanco Corrêa ](https://www.treinaweb.com.br/blog/autor/amauri) 4 anos atrás
Todos nós já nos perguntamos como os sites são criados? Neste guia, vamos abordar os principais temas da linguagem HTML. Certamente, ao final, teremos um entendimento solido dessa linguagem, e seremos capazes de responder a nossa pergunta, e, até mesmo de criar nossos próprios sites.
[  Formação Desenvolvedor Especialista Front-end Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-especialista-front-end)
## O que é o HTML?
Primeiramente devemos entender o que é, e como ele surgiu. HTML, ou HyperText Markup Language, a tradução literal é: Linguagem de Marcação de Hipertexto. É uma linguagem utilizada para criar a estrutura e o conteúdo das páginas da web. Ele utiliza tags para marcar os diferentes elementos de uma página, como, por exemplo: cabeçalhos, parágrafos, imagens e links. Essas tags fornecem instruções aos navegadores sobre como exibir e organizar o conteúdo.
Essa linguagem foi desenvolvida por Tim Berners-Lee, no início dos anos 90 como parte do projeto World Wide Web (WWW). A fim de permitir que pesquisadores compartilhassem documentos de forma fácil entre computadores. Desde então, o HTML passou por várias atualizações para se tornar a linguagem que é hoje.
Mas, se quiser saber mais sobre a história do HTML, confira no artigo [O que é o HTML?](https://www.treinaweb.com.br/blog/o-que-e-html "O que é o HTML?")
## Editores de código para desenvolver em HTML
Editores de código desempenham um papel essencial na criação de código HTML. Eles são ferramentas que permitem escrever e editar o código HTML de forma mais eficiente. Com recursos como realce de sintaxe, sugestões automáticas e verificação de erros. Editores de código tornam o processo de escrever código HTML mais fácil, mesmo que você seja um iniciante.
Existem vários editores de código populares amplamente utilizados para escrever HTML, alguns exemplos são, o Sublime Text, o Visual Studio Code, o Atom, o Notepad++ e o Brackets são alguns exemplos. A escolha do editor de código depende das preferências pessoais de cada desenvolvedor.
Você consegue saber sobre os editores de código de uma forma mais aprofundada no artigo [Principais editores de código para desenvolvimento](https://www.treinaweb.com.br/blog/principais-editores-de-codigo-para-desenvolvimento "Principais editores de código para desenvolvimento"). Além disso, ele explica como funciona os principais editores de código, compatibilidade e pontos positivos de cada um. [  Curso HTML5 + CSS3 - Primeiros passos Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-primeiros-passos)
## Criando um documento HTML
Agora que sabemos o que é HTML, e onde começar a escrever. Vamos ver sobre as tags e como podemos estruturar o HTML e adicionar conteúdo na página.
[  ](https://www.treinaweb.com.br/lp/aula-gratis/)
### Como as tag funcionam?
As tags são elementos fundamentais na linguagem HTML, elas são escritas entre os símbolos ``. Essas tags são usadas para marcar e identificar diferentes elementos em um documento HTML. Como, por exemplo, títulos, parágrafos, imagens e links. Todo elemento escrito no HTML precisa estar dentro de uma tag. Aqui estão alguns exemplos:
```html
Isso é uma tag de títutlo nível 1
Isso é uma tag de parágrafo
Isso é uma tag de âncora
```
### Estrutura HTML
Para entender melhor o HTML, vamos criar um exemplo de estrutura básica de um documento HTML.
```html
Document
```
Este código representa a estrutura básica de um documento HTML. Começamos com a declaração `DOCTYPE`. Ela informa ao navegador que estamos usando a versão mais recente do HTML, chamada HTML5.
Dentro da tag `html`, temos duas seções principais: `head` e `body`. A seção `head` é usada para fornecer informações de configuração do documento. Como, por exemplo, o título da página, a codificação de caracteres, e outras configurações.
Em seguida, temos a seção `body`. Nela, adicionamos todo o conteúdo visível da página. É dentro dessa seção que você adiciona elementos como textos, imagens, links e outros.
Essa estrutura básica é o ponto de partida para criar uma página HTML. Contudo, à medida que você aprende mais sobre HTML, poderá adicionar mais elementos e atributos para personalizar sua página e criar interações mais avançadas.
No [nosso canal do YouTube](https://www.youtube.com/@treinaweb "nosso canal do YouTube"), temos um vídeo explicando com exemplo prático essa estrutura.
### Tag de âncora
A tag de âncora, representada por `a`, desempenha um papel crucial no HTML. Ela permite a criação de links e a navegação entre páginas da web. Essa tag é essencial para estabelecer a conectividade e a interação entre diferentes partes de um site.
Ao usar a tag de âncora, podemos definir um destino para onde o link deve direcionar o usuário quando clicado. Isso pode ser outra página da web ou, até mesmo, uma seção específica dentro da mesma página. Além disso, ela pode ser usada para abrir um link em uma nova janela ou guia, facilitando a navegação sem interromper a experiência atual. Por exemplo, se você quiser adicionar no seu site um link para o site do para o YouTube, basta fazer dessa forma:
```html
YouTube
```
Como podemos ver no exemplo, a palavra dentro da tag é a palavra que ficará visível para o usuário. Para escolhermos onde queremos direcionar o usuário, neese caso, o site do YouTube, usamos o atributo `href` e, dentro das aspas passamos a [URL](https://developer.mozilla.org/pt-BR/docs/Glossary/URL "URL") que queremos.
Mas, caso querira saber mais sobre a tag de âncora recomendo a leitura do artigo [Trabalhando com a tag âncora no HTML](https://www.treinaweb.com.br/blog/trabalhando-com-a-tag-ancora-no-html "Trabalhando com a tag âncora no HTML").
[  Curso HTML5 + CSS3 - Formulários Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-formularios)
### Formulários HTML
Os formulários desempenham um papel essencial na interação entre os usuários e os sites. Permitindo a entrada e o envio de informações. Com a utilização de elementos como `form`, `input`, `textarea` e `button`, é possível criar uma variedade de campos para receber dados, como por exemplo, nome, e-mail e mensagens. Para alterar o tipo de dado que esperamos receber usamos o atributo `type`. Podemos muda-lo conforme nossa necessidade. Por exemplo, se quiser adicionar um campo para receber um número de telefone, usa-se no `tel`. Já para receber um campo de texto como o nome do usuário é o `text`.
O envio desses dados de um formulário é realizada através de um botão de submissão.
```html
Enviar
```
Quando clicado, o botão acionará uma ação definida no servidor para processar as informações fornecidas. O formulário é uma ferramenta valiosa na obtenção de dados dos usuários de maneira eficiente. Aqui está um exemplo de um formulário HTML:
```html
Nome:
E-mail:
Idade:
Enviar
```
Nesse exmplo, é usado a tag `label`. Essa tag serve para rotularmos o `input`. A conexão entre o `input` e o `label` é feita através do atributo `for` no label, e usamos o atributo `id` no `input`.
Aqui na TreinaWeb, temos um artigo dedicado a esse assunto tão importante no front-end, o [Trabalhando com formulários no HTML](https://www.treinaweb.com.br/blog/trabalhando-com-formularios-no-html "Trabalhando com formulários no HTML").
No entanto, se preferir, no nosso canal do Youtube, também temos um vídeo explicando como essa tag funciona.
## O que é Semântica HTML?
Semântica HTML refere-se ao uso apropriado das tags HTML para atribuir significado e estrutura ao conteúdo de uma página. Uma vez que ao utilizar os elementos corretos de forma semântica, é possível fornecer informações claras sobre a função e o propósito de cada tag. Tornando assim, mais compreensível para os usuários e mecanismos de busca, como o `Google`.
Exemplos de tags semânticas:
- `header`: usada para definir o cabeçalho da página ou de uma seção;
- `nav`: usada para representar uma área de navegação;
- `article`: essa tag serve para encapsular um conteúdo independente e autossuficiente;
- `section`: usada para agrupar conteúdo relacionado dentro de uma página;
- `footer`: utilizada para definir o rodapé da página ou de uma seção.
Alguns exemplos de tags **não** semânticas são:
- `div`: geralmente usado para criar divisões genéricas ou agrupar elementos sem significado específico;
- `span`: usado para estilizar ou manipular partes de texto em um contexto específico, sem atribuir significado semântico;
- `b`: usamos para destacar texto em negrito, mas sem fornecer informações semânticas adicionais;
- `i`: usado para deixar o texto itálico, mas sem acrescentar significado semântico.
No artigo, [Semântica HTML: O que é e por que é importante](https://www.treinaweb.com.br/blog/semantica-html-o-que-e-e-por-que-e-importante "Semântica HTML: O que é e por que é importante"), esse tema é abordado de forma completa.
## Acessibilidade no HTML
A acessibilidade é à prática de tornar os conteúdos da web acessíveis a todas as pessoas. Independentemente das ferramentas das que estão sendo utilizadas para navegar pela web. É fundamental garantir que os sites sejam desenvolvidos levando em consideração padrões de acessibilidade. E decerto, precisamos pensar em práticas que facilite esse processo, como por exemplo, o uso adequado de estruturas semânticas, o fornecimento de alternativas textuais para conteúdos visuais, a utilização de cores com contraste e a garantia de que o site seja compatível com tecnologias assistivas, como leitores de tela.
Assim, ao adotar boas práticas de acessibilidade no HTML, os desenvolvedores podem garantir que as informações apresentadas em seus sites sejam compreensíveis por todos. Isso inclui a utilização correta de tags semânticas, como por exemplo, cabeçalho, parágrafos, listas e links, fornecendo uma estrutura clara para o conteúdo. Temos um artigo dedicado a esse tema fundamental para nós, desenvolvedores, o [Acessibilidade no HTML](https://www.treinaweb.com.br/blog/acessibilidade-no-html "Acessibilidade no HTML").
[  Curso HTML5 + CSS3 - Apresentação de Dados Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-e-css3-apresentacao-de-dados)
## Conclusão
Em resumo, podemos concluir, que não são apenas tags que precisamos entender para escrever um bom site. Precisamos, entender também, sobre semântica, acessibilidade, conhecer os atributos que podemos usar em cada tag, entre outros pontos. Mas, tenho uma notícia muito boa a todos! A [TreinaWeb](https://www.treinaweb.com.br "TreinaWeb"), possui a formação completa de front-end, onde você consegue saber tudo que precisa sobre o HTML e CSS. Dentro da nossa formação abordamos temas essenciais para tornar você um desenvolvedor completo.
Esses são alguns dos cursos que fazem parte da nossa formação:
- [HTML5 + CSS3 - Fundamentos](https://www.treinaweb.com.br/curso/html5-css3-fundamentos "HTML5 + CSS3 - Fundamentos")
- [HTML5 + CSS3 - Dominando o Flexbox](https://www.treinaweb.com.br/curso/html5-css3-dominando-o-flexbox "HTML5 + CSS3 - Dominando o Flexbox")
- [HTML5 + CSS3 - Dominando o CSS Grid Layout](https://www.treinaweb.com.br/curso/html5-css3-dominando-o-css-grid-layout "HTML5 + CSS3 - Dominando o CSS Grid Layout")
- [HTML5 + CSS3 - Apresentação de Dados](https://www.treinaweb.com.br/curso/html5-e-css3-apresentacao-de-dados "HTML5 + CSS3 - Apresentação de Dados")
- [HTML5 + CSS3 - Formulários](https://www.treinaweb.com.br/curso/html5-css3-formularios "HTML5 + CSS3 - Formulários")
- [HTML5 + CSS3 - Box model e Posicionamento de Elementos](https://www.treinaweb.com.br/curso/html5-css3-box-model-e-posicionamento-de-elementos "HTML5 + CSS3 - Box model e Posicionamento de Elementos")
Na nossa plataforma você encontra tudo que precisa saber sobre o HTML e muito mais.
- [ #Tecnologia ](https://www.treinaweb.com.br/blog/tag/tecnologia)
- [ #HTML ](https://www.treinaweb.com.br/blog/tag/html)
- [ #Desenvolvimento Front-End ](https://www.treinaweb.com.br/blog/tag/desenvolvimento-front-end)
- [ #guia HTML ](https://www.treinaweb.com.br/blog/tag/guia-html)
Autor
## Amauri Blanco Corrêa
Sou formado em Análise e Desenvolvimento de Sistemas pela Universidade Cruzeiro do Sul, uma pessoa extremamente curiosa e dedicada, amo tecnologia e sempre busco aprender e aperfeiçoar meus conhecimentos. Atuo há mais de 3 anos como desenvolvedor e instrutor Front-end sou um eterno estudante do mundo da tecnologia.
[Todos os artigos](https://www.treinaweb.com.br/blog/autor/amauri)
## 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
-  [ CSS ](https://www.treinaweb.com.br/blog/categoria/css)
3 anos atrás
## [ Guia da linguagem CSS ](https://www.treinaweb.com.br/blog/guia-da-linguagem-css)
Nesse guia completo veremos como funciona e quais as formas de criar estilizações com CSS, necessário para qualquer desenvolvedor front-end
Ler artigo
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
6 anos atrás
## [ Guia da Linguagem JavaScript ](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript)
Neste Guia da Linguagem Javascript vamos abordar aspectos fundamentais, como: tipos de dados, variáveis, objetos, arrays e muito mais.
Ler artigo
-  [ Python ](https://www.treinaweb.com.br/blog/categoria/python)
6 anos atrás
## [ Guia da linguagem Python ](https://www.treinaweb.com.br/blog/guia-da-linguagem-python)
Entenda os principais conceitos para iniciar seus estudos neste guia da linguagem Python.
Ler artigo
-  [ Python ](https://www.treinaweb.com.br/blog/categoria/python)
4 anos atrás
## [ Empacotando e publicando pacotes Python no PyPi ](https://www.treinaweb.com.br/blog/empacotando-e-publicando-pacotes-python-no-pypi)
Neste artigo iremos aprender como funciona o processo de empacotar e distribuir nossos próprios pacotes Python no PyPi.
Ler artigo
-  [ Java ](https://www.treinaweb.com.br/blog/categoria/java)
6 anos atrás
## [ Introdução ao Maven, aprenda como criar e gerenciar projetos Java ](https://www.treinaweb.com.br/blog/introducao-ao-maven-aprenda-como-criar-e-gerenciar-projetos-java)
Neste artigo veremos como instalar o Maven e como podemos utilizá-lo para nos auxiliar na criação e no gerenciamento de dependência de um projeto Java.
Ler artigo
-  [ Python ](https://www.treinaweb.com.br/blog/categoria/python)
7 anos atrás
## [ Principais IDEs para desenvolvimento Python ](https://www.treinaweb.com.br/blog/principais-ides-para-desenvolvimento-python)
Veja neste artigo as principais IDEs para desenvolvimento Python.
Ler artigo
-  [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile)
9 anos atrás
## [ Carreira de desenvolvedor de aplicativos: como começar ](https://www.treinaweb.com.br/blog/carreira-de-desenvolvedor-de-aplicativos-como-comecar)
Saiba como se tornar um desenvolvedor de aplicativos reconhecido pelo mercado.
Ler artigo
-  [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas)
6 anos atrás
## [ VS Code - O que é e por que você deve usar? ](https://www.treinaweb.com.br/blog/vs-code-o-que-e-e-por-que-voce-deve-usar)
O VS Code é um dos editores de código mais utilizados no mundo. Conheça melhor essa ferramenta e entenda o motivo de sua popularidade.
Ler artigo
-  [ Guias ](https://www.treinaweb.com.br/blog/categoria/guias)
3 anos atrás
## [ Guia da linguagem Go ](https://www.treinaweb.com.br/blog/guia-da-linguagem-go)
Nesse guia de Go você aprenderá o necessário para criar os seus primeiros softwares com a linguagem de programação Go. Acesse agora mesmo!
Ler artigo
-  [ Dart ](https://www.treinaweb.com.br/blog/categoria/dart)
4 anos atrás
## [ Guia da linguagem dart ](https://www.treinaweb.com.br/blog/guia-da-linguagem-dart)
Nesse guia da linguagem Dart você aprenderá o necessário para criar os seus primeiros softwares com a linguagem de programação Dart.
Ler artigo
-  [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp)
4 anos atrás
## [ Guia da linguagem C# ](https://www.treinaweb.com.br/blog/guia-da-linguagem-csharp)
Nesse guia de C# você aprenderá o necessário para criar os seus primeiros softwares com a linguagem de programação C#. Acesse agora mesmo!
Ler artigo
-  [ PHP ](https://www.treinaweb.com.br/blog/categoria/php)
5 anos atrás
## [ Guia da linguagem PHP ](https://www.treinaweb.com.br/blog/guia-da-linguagem-php)
Nesse guia de PHP você aprenderá o necessário para criar os seus primeiros softwares com a linguagem de programação PHP. Acesse agora mesmo!
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 **18h 53min 21s**
- 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