O que é HTML? \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto**
Termina em Tempo restante da oferta: 01 Horas
23 Min
59 Seg
Tempo restante da oferta: 01 23 59
[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) O que é HTML? [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) [ HTML ](https://www.treinaweb.com.br/blog/categoria/html)
# O que é HTML?
No artigo de hoje, será abordado o tema HTML, nele irá conter desde sua história, quem o criou e como deve ser montada sua estrutura.
[ Rafael Oliveira ](https://www.treinaweb.com.br/blog/autor/rafael-oliveira) 4 anos atrás
Neste artigo, veremos um pouco da história do HTML e qual sua função no mundo da programação.
Certamente vocês já ouviram falar nesta ferramenta, mas, ficaram se perguntando o que é HTML, para que é utilizado, como criar seu primeiro exemplo e outros detalhes. Bom, neste artigo, iremos conhecer um pouco sobre cada um desses tópicos.
[  ](https://www.treinaweb.com.br/ebook/guia-HTML/)
## O que é?
O HTML (HyperText Markup Language), em português, Linguagem de Marcação de Hipertexto, nada mais é do que um componente básico e principal para o desenvolvimento de uma página.
Em outras palavras, uma linguagem de marcação é um conjunto de códigos que nós aplicamos em um documento, para que no mesmo seja possível definir o formato, maneiras de exibições e alguns padrões. Essas marcações, são conhecidas também como tags. Para ficar mais compreensível, irei mostrar um breve exemplo de uma marcação muito utilizada em um documento HTML.
```html
Aprendendo HTML na TreinaWeb
```
Para que a gente consiga adicionar um título em um documento, e esse mesmo título seja reconhecido como tal para os navegadores, basta utilizarmos a tag `h1`. Sendo assim, iremos obter o nosso h1, o título principal do texto ou documento.
Uma de suas características mais importantes, é permitir criar links, denominados como **HyperLink**, onde podemos ter acesso ao clicar. Mas como nós fazemos para realizar esse código? Bom, é bem simples, basta utilizarmos a tag de âncora, como é chamada, sendo ela, a tag `a` seguida de um “href”, que seria a referência/link do site que queremos adicionar. Observe o exemplo a seguir:
```html
Clique aqui para acessar o site da TreinaWeb
```
Quando clicarmos na frase “Clique aqui para acessar o site da TreinaWeb”, seremos direcionados automaticamente para o site da TreinaWeb.
Contudo, podemos dizer que, é através do HTML onde iremos criar o “esqueleto” da nossa página, por ele nos permitir adicionar links, imagens, textos, vídeos, entre outros elementos onde os mesmos estarão trabalhando em conjunto, e futuramente, estilizá-los utilizando outras ferramentas que trabalham em conjunto com o HTML.
## Como surgiu?
O HTML foi criado na década de 90 por Timothy John Berners-Lee, um britânico com formação em física e ciência da computação. Inicialmente, sua principal ideia era facilitar o compartilhamento de documentos e pesquisas para instituições próximas.
Mas, com o decorrer dos anos, e o avanço da tecnologia, os desenvolvedores passaram a observar uma necessidade de criar atualizações para o mesmo, a fim de melhorar a sua função, chegando no que possuímos hoje, HTML5, sendo “5” a sua atual versão.
## Visual Studio Code
Antes de irmos para a próxima etapa, que é entender e, desenvolver a estrutura do HTML, temos que saber que, para isso, utilizamos o [Visual Studio Code](https://code.visualstudio.com/ "Visual Studio Code"). Para entender mais sobre essa ferramente, acesse o artigo [Visual Studio Code, o que é e por que devo usar?](https://www.treinaweb.com.br/blog/vs-code-o-que-e-e-por-que-voce-deve-usar "Visual Studio Code, o que é e por que devo usar?").
## Estrutura do HTML
Assim como as linguagens de programação, o HTML também possui uma estrutura que deve ser seguida para podermos desenvolver o nosso site. Essa estrutura é composta por tags, e cada uma delas contém o seu sentido e são indispensáveis.
Agora vamos entender o passo a passo de como deve ser montada essa estrutura.
Primeiramente, vamos abrir nosso Visual Studio Code e na aba “File”, iremos clicar em “Open Folder…”:
Ao clicarmos em Open Folder, irá abrir o Explorador de Arquivos, lá nós iremos criar uma pasta e definir um nome para ela:
Agora que já conseguimos definir o nome da nossa pasta como “Estrutura HTML”, vamos clicar em “Selecionar Pasta”. Após isso, nosso Visual Studio Code irá abrir com a pasta selecionada:
Por fim, vamos criar nosso arquivo html:
Quando clicamos nessa “folha” com um sinal de +, abrimos um espaço para definir o tipo de arquivo que queremos:
Nesse espaço podemos colocar o nome que acharmos melhor, mas, por padrão, definimos como index. Observe que após a gente digitar index, devemos colocar .html, dessa forma o Visual Studio Code irá entender que o nosso arquivo é HTML.
Bom, agora que já entendemos e definimos nosso arquivo html, de fato, vamos partir para o desenvolvimento da estrutura.
[  ](https://www.treinaweb.com.br/lp/aula-gratis/)
### Desenvolvendo a estrutura HTML
Inicialmente, devemos dizer qual tipo de documento queremos utilizar, nesse caso, HTML, para isso, basta digitarmos:
```html
```
Em seguida, definimos em qual idioma o navegador irá ler nossa página:
```html
```
Observe que a tag `html` foi aberta e não foi fechada, pois só faremos isso no final do nosso documento.
Logo após definir o idioma, adicionamos a tag `head`, que nada mais é do que a cabeça do documento. Ela é composta por uma tag `meta` e um `title`. Veja a seguir:
```html
```
A função da `meta charset="UTF-8"`, falando de uma maneira bem sucinta, é fazer com que os navegadores saibam como renderizar e apresentar os textos com caracteres especiais incluídos no nosso documento.
Em seguida, adicionamos o elemento `title` e fechamos a tag `head`.
```html
Estrutura HTML
```
`title` nada mais é do que o título que a nossa página terá.
Após fechar a tag `head`, chegamos na última tag do HTML, sendo ela, o `body`:
```html
Estrutura HTML
```
A tag `body` é o corpo do HTML, nele nós colocamos todo o conteúdo desejado. Exemplo:
```html
Estrutura HTML
Podemos adicionar um parágrafo através da tag p, o mesmo
será apresentado no navegador.
```
Por fim, basta fecharmos a tag `html`.
```html
Estrutura HTML
Olá Mundo!
Esse é o meu primeiro documento HTML que desenvolvi através da Escola online
para desenvolvedores, TreinaWeb!
.
```
### Visualizando o arquivo no navegador
Para que a gente consiga visualizar o documento no navegador, devemos seguir os seguintes passos.
Primeiro, iremos abrir nosso Explorador de Arquivos, para isso, vamos clicar no nosso Iniciar do Windows, que fica localizado no canto inferior esquerdo da nossa tela:
Em seguida, digitamos Explorador de Arquivos:
Ao abrir, vamos pesquisar o nome da nossa **pasta** que definimos anteriormente:
Quando clicamos, seremos direcionados para dentro da nossa pasta:
O meu navegador é o Opera, mas isso não faz diferença nenhuma, basta a gente clicar nesse arquivo, que irá abrir o nosso navegador com o nosso documento, dessa forma:
É muito importante observar que só irá mostrar o que eu escrevi dentro da tag `a`, no caso, TreinaWeb, o link que irá direcionar o usuário não aparece.
## Como os navegadores leem o HTML?
Para conseguirmos entender essa questão de uma maneira mais breve e objetiva, basta sabermos que cada navegador possui um motor de análise e renderização de HTML. Sua função é analisar todo o documento, tag por tag, imagem por imagem, entre outros elementos contidos em nosso documento e, renderizar, ou seja, exibir os conteúdos solicitados na tela do navegador.
Mas, não podemos inserir os códigos, textos, e tudo que for necessário em nosso documento, e disponibilizar para os usuários acessarem. Existe algo chamado [Acessibilidade no HTML](http://www.treinaweb.com.br/blog/acessibilidade-no-html "Acessibilidade no HTML").
[  Curso HTML5 + CSS3 - Formulários Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-formularios)
## Quando chegou a versão atual do HTML?
O HTML vem evoluindo desde seu lançamento, a versão 5 chegou em 2015, tendo suas variantes, HTML 5.1 e, atualmente, HTML 5.2, lançado em 2017.
Sua principal vantagem é permitir que os desenvolvedores tenham maior flexibilidade na hora de projetar sites.
## Conclusão
Portanto, para podermos desenvolver um site com mais autoridade, é de suma importância entender o HTML.
Além disso, sem o mesmo, não seria possível obter sites onde os navegadores consigam ler, interpretar e renderizar todos os códigos para que assim, possamos visualizar o que foi feito, de fato.
- [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end)
- [ #HTML ](https://www.treinaweb.com.br/blog/tag/html)
- [ #O que é HTML ](https://www.treinaweb.com.br/blog/tag/o-que-e-html)
- [ #Estrutura HTML ](https://www.treinaweb.com.br/blog/tag/estrutura-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
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
4 anos atrás
## [ O que é Tailwind CSS e como instalar via CDN? ](https://www.treinaweb.com.br/blog/o-que-e-tailwind-css-e-como-instalar-via-cdn)
Neste artigo aprenderemos a criar um navbar usando Tailwind CSS, e entender melhor como funciona seus componentes de estilização.
Ler artigo
-  [ CSS ](https://www.treinaweb.com.br/blog/categoria/css)
9 anos atrás
## [ O que é e como começar com HTML e CSS? ](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-html-e-css)
Quer iniciar seus estudos em HTML e CSS e não sabe por onde começar? Veja o que preparamos pra você.
Ler artigo
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
4 anos atrás
## [ 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)
Neste artigo, veremos a importância do uso da Semântica HTML e como utilizamos as tags em nossos projetos, mantendo assim o código semântico.
Ler artigo
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
4 anos atrás
## [ Instalando Tailwind CSS via NPM e alterando suas propriedades CSS com theme ](https://www.treinaweb.com.br/blog/instalando-tailwind-css-via-npm-e-alterando-suas-propriedades-css-com-theme)
Neste artigo, veremos como instalar e utilizar a tecnologia Tailwind CSS via NPM. Também iremos alterar suas propriedades CSS com theme.
Ler artigo
-  [ CSS ](https://www.treinaweb.com.br/blog/categoria/css)
4 anos atrás
## [ Position, estilizando elementos com CSS. ](https://www.treinaweb.com.br/blog/position-estilizando-elementos-com-css)
Neste artigo nos iremos aprender sobre position em elementos no CSS, e sua importância para estilizações das nossas páginas web.
Ler artigo
-  [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript)
3 anos atrás
## [ Criando componente snackbar com JavaScript e CSS ](https://www.treinaweb.com.br/blog/criando-componente-snackbar-com-javascript-e-css)
Nesse artigo, você irá ter o passo a passo de como criar um componente de snackbar do zero. Sendo capaz de adapta-lo como preferir.
Ler artigo
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
5 anos atrás
## [ Criando a estrutura de um Layout com CSS Grid e Flexbox ](https://www.treinaweb.com.br/blog/criando-a-estrutura-de-um-layout-com-css-grid-e-flexbox)
Nesse artigo vamos aprender sobre as funcionalidades CSS Grid e FlexBox do CSS na pratica durante o desenvolvimento de layout.
Ler artigo
-  [ Java ](https://www.treinaweb.com.br/blog/categoria/java)
6 anos atrás
## [ O que é o Thymeleaf? ](https://www.treinaweb.com.br/blog/o-que-e-o-thymeleaf)
Neste artigo veremos o que é e os principais recursos de uma das template engines mais utilizadas no ecossistema Java, o Thymeleaf.
Ler artigo
-  [ Python ](https://www.treinaweb.com.br/blog/categoria/python)
6 anos atrás
## [ O que é o Jinja2? ](https://www.treinaweb.com.br/blog/o-que-e-o-jinja2)
Veja neste artigo o que é e como funciona o Jinja2.
Ler artigo
-  [ Django ](https://www.treinaweb.com.br/blog/categoria/django)
6 anos atrás
## [ O que é Django Template Language? ](https://www.treinaweb.com.br/blog/o-que-e-django-template-language)
Veja neste artigo o que é o Django Template Language.
Ler artigo
-  [ PHP ](https://www.treinaweb.com.br/blog/categoria/php)
6 anos atrás
## [ O que é Twig? ](https://www.treinaweb.com.br/blog/o-que-e-twig)
Veja neste artigo o que é Twig.
Ler artigo
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
7 anos atrás
## [ O que é JSX? ](https://www.treinaweb.com.br/blog/o-que-e-jsx)
Veja neste artigo o que é o JSX.
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 **01h 23min 59s**
- 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