{"id":50858,"date":"2022-07-01T07:33:26","date_gmt":"2022-07-01T10:33:26","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=50858&post_type=knowledgebase&preview_id=50858"},"modified":"2025-10-01T17:04:10","modified_gmt":"2025-10-01T20:04:10","slug":"o-que-e-html","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/o-que-e-html\/","title":{"rendered":"O que \u00e9 HTML? Um Guia para Iniciantes"},"content":{"rendered":"

Voc\u00ea quer criar o seu site dos sonhos, mas n\u00e3o quer que ele pare\u00e7a um modelo pronto. Qualquer pessoa experiente em <\/span>design de sites<\/a> lhe dir\u00e1 que voc\u00ea precisa saber HTML primeiro. Mas o que \u00e9 HTML e como voc\u00ea pode aprender?<\/span><\/p>\n

Voc\u00ea quer que o site que voc\u00ea publica<\/a> se destaque e seja original. Voc\u00ea quer elementos e designs que ningu\u00e9m mais em sua ind\u00fastria est\u00e1 usando. Afinal, o seu site \u00e9 a primeira impress\u00e3o que muitos clientes em potencial t\u00eam sobre o seu neg\u00f3cio.<\/p>\n

Mas antes de fazer isso, voc\u00ea precisa aprender uma linguagem de computa\u00e7\u00e3o chamada HTML<\/a>. Essencialmente, \u00e9 a linguagem que estabelece o que um navegador de internet deve mostrar ao visitante quando ele chega em seu site.<\/p>\n

Neste artigo, explicaremos o que \u00e9 HTML, como surgiu, como \u00e9 usado, como funciona, e oferecer um treinamento b\u00e1sico em HTML<\/a> com conselhos sobre como voc\u00ea pode aprender mais.<\/p>\n

Voc\u00ea est\u00e1 pronto para aprender como codificar seu site sem criar uma p\u00e1gina com erros? Vamos come\u00e7ar.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

O que \u00e9 HTML?<\/h2>\n

HTML significa \u201clinguagem de marca\u00e7\u00e3o de hipertexto\u201d e \u00e9 uma linguagem relativamente simples usada para criar p\u00e1ginas de internet. Por n\u00e3o permitir vari\u00e1veis ou fun\u00e7\u00f5es, n\u00e3o \u00e9 considerado uma \u201clinguagem de programa\u00e7\u00e3o\u201d, mas sim uma \u201clinguagem de markup\u201d, uma linguagem que usa tags para definir elementos dentro de um documento.<\/p>\n

Se voc\u00ea perguntar a qualquer um, no mundo do web design<\/a> o que \u00e9 HTML, \u00e9 prov\u00e1vel que voc\u00ea obtenha uma explica\u00e7\u00e3o de longa dura\u00e7\u00e3o que deixar\u00e1 sua cabe\u00e7a girando, especialmente se voc\u00ea \u00e9 como a maioria do mundo e n\u00e3o tem ideia sobre codificar e criar um site do zero<\/a>.<\/p>\n

\"Four
Quatro pontos definindo html (Fonte:<\/b> Studypool<\/a>)<\/figcaption><\/figure>\n

Ent\u00e3o o que significa \u201clinguagem de marca\u00e7\u00e3o de hipertexto\u201d?<\/p>\n

Hipertexto \u00e9 um texto colocado em ordem que conecta itens relacionados, geralmente atrav\u00e9s de links (tamb\u00e9m chamados de hyperlinks). A linguagem Markup descreve o estilo e a estrutura de uma p\u00e1gina para navegadores de internet.<\/p>\n

Ent\u00e3o, HTML \u00e9 o que faz com que textos e imagens apare\u00e7am no lugar certo, e que os usu\u00e1rios possam navegar no seu site<\/a> sem problemas. Os navegadores carregam estas informa\u00e7\u00f5es do seu servidor de internet para gerar os sites que voc\u00ea v\u00ea todos os dias.<\/p>\n

\n
\n
\n
\n
\n
\n

Se voc\u00ea olhar para o HTML em sua forma bruta, voc\u00ea ver\u00e1 muitos s\u00edmbolos e colchetes que aparentemente n\u00e3o fazem sentido. No entanto, tudo contribui para o produto final que \u00e9 visto pelo cliente.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

A pr\u00f3pria estrutura dos sites \u00e9 criada atrav\u00e9s de HTML. Esta linguagem funciona junto com o CSS (Cascading Style Sheets) e JavaScript<\/a> para criar sites visualmente atraentes e interativos para os usu\u00e1rios.<\/p>\n

O ponto principal aqui \u00e9 que o HTML \u00e9 a base de uma boa p\u00e1gina de internet. Sem ele, voc\u00ea n\u00e3o seria capaz de compartilhar textos com os visitantes do site, muito menos adicionar seu talento pessoal ao site dos seus sonhos.<\/p>\n\n

A hist\u00f3ria do HTML<\/h3>\n

Sir Tim Berners-Lee criou o HTML no final de 1991, mas a linguagem de codifica\u00e7\u00e3o<\/a> n\u00e3o foi disponibilizada para o p\u00fablico em 1993.<\/p>\n

\n
\n
\n
\n
\n
\n

Isso aconteceu quando o HTML1 foi lan\u00e7ado pela primeira vez. Desde o in\u00edcio, foi criado para ser uma forma de compartilhar dados por meio de navegadores da internet.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

O crescimento do HTML estagnou logo ap\u00f3s seu lan\u00e7amento porque n\u00e3o havia muitos desenvolvedores criando sites na \u00e9poca.<\/p>\n

HTML2 foi lan\u00e7ado em 1995 com recursos adicionais, tornando o padr\u00e3o de linguagem de marca\u00e7\u00e3o para web design at\u00e9 1997.<\/p>\n

\n
\n
\n
\n
\n
\n

Foi nessa \u00e9poca que o HTML3 foi desenvolvido por Dave Raggett. Ele trouxe recursos mais avan\u00e7ados para os webmasters usarem ao projetar p\u00e1ginas. Infelizmente, ele estava \u00e0 frente do seu tempo. Os recursos do HTML3 realmente deixaram os navegadores mais lentos, pois ainda n\u00e3o estavam equipados para lidar com eles.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n

HTML4.01 foi desenvolvido em 1999 e veio com suporte para op\u00e7\u00f5es multim\u00eddia. Essa atualiza\u00e7\u00e3o tamb\u00e9m incluiu folhas de estilo, facilidades de impress\u00e3o e linguagens de script adicionais.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\"Difference
As diferen\u00e7as entre a estrutura HTML4 e a estrutura HTML5 (Fonte:<\/b> JavatPoint<\/a>)<\/figcaption><\/figure>\n

A vers\u00e3o do HTML5<\/a> foi lan\u00e7ada em 2015. A implementa\u00e7\u00e3o do HTML5 adicionou suporte para armazenamento de m\u00eddia mais avan\u00e7ado e elementos de conte\u00fado espec\u00edficos. Al\u00e9m disso, o uso do doctype inline e a incorpora\u00e7\u00e3o de \u00e1udio e v\u00eddeo foram simplificados.<\/p>\n

O mundo est\u00e1 trabalhando com HTML5.2 em 2022, melhorando a pol\u00edtica de seguran\u00e7a de conte\u00fado no momento em que mais precisamos dele.<\/p>\n

\n
\n
\n
\n
\n
\n

O HTML5.2 tamb\u00e9m possui um forte foco no eCommerce, com a adi\u00e7\u00e3o da API de solicita\u00e7\u00e3o de pagamento. Essa atualiza\u00e7\u00e3o tamb\u00e9m incluiu aplicativos de internet acess\u00edveis para pessoas com defici\u00eancia.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

Para que o HTML \u00e9 usado?<\/h2>\n

Em termos simples, o HTML \u00e9 usado para criar sites para uso pessoal e empresarial em todo o mundo.<\/p>\n

A resposta real \u00e9 muito mais detalhada do que isso.<\/p>\n

HTML tem sido a linguagem padr\u00e3o utilizada para documentos e sites baseados na web desde os anos 90. Ele trabalha com navegadores<\/a> para ajud\u00e1-los a entender a estrutura de um site e o estilo associado a eles.<\/p>\n

\n
\n
\n
\n
\n
\n

O HTML \u00e9 basicamente um schema que instrui o navegador de internet sobre como montar o seu site para o visitante. Quando um usu\u00e1rio digita \u00e0 sua URL, o navegador usa as informa\u00e7\u00f5es do c\u00f3digo HTML para montar a p\u00e1gina, seguindo as instru\u00e7\u00f5es e blocos de constru\u00e7\u00e3o estabelecidos no c\u00f3digo.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\"HTML5
Gr\u00e1fico que mostra tudo que o HTML5 pode fazer (Fonte:<\/b> SCF<\/a>)<\/figcaption><\/figure>\n

Isso, por sua vez, ajuda a p\u00e1gina a parecer como o pretendido quando vista por um usu\u00e1rio, quando combinada com uma folha de estilo CSS<\/a> que estiliza os elementos dispostos em seu documento HTML.<\/p>\n

A vers\u00e3o atual do HTML tamb\u00e9m permite que v\u00eddeo, \u00e1udio, planilhas e outros aplicativos sejam executados diretamente em sites. Se voc\u00ea j\u00e1 se impressionou com esses elementos em um site antes, deve agradecer ao HTML5 por isso.<\/p>\n

Esta linguagem de marca\u00e7\u00e3o tamb\u00e9m assegura uma navega\u00e7\u00e3o interna suave de um site, gra\u00e7as aos hiperlinks.<\/p>\n

Os designers de sites tamb\u00e9m podem usar HTML para criar formul\u00e1rios de gera\u00e7\u00e3o de leads<\/a> para coletar e-mails e nomes (desde que a a\u00e7\u00e3o seja executada por um arquivo codificado em outra linguagem).<\/p>\n

Se voc\u00ea usar plugins externos, voc\u00ea tamb\u00e9m pode usar HTML para criar sistemas de reservas ou formul\u00e1rios de pesquisa em um site, permitindo uma reserva e navega\u00e7\u00e3o mais f\u00e1ceis.<\/p>\n

HTML \u00e9 como voc\u00ea inclui conte\u00fado n\u00e3o din\u00e2mico em um site \u2014 conte\u00fado que voc\u00ea deseja que cada visitante veja da mesma forma. Se voc\u00ea quer conte\u00fado din\u00e2mico, voc\u00ea precisa usar JavaScript<\/a>, PHP<\/a>, ou outras linguagens de programa\u00e7\u00e3o tamb\u00e9m.<\/p>\n

Como o HTML funciona?<\/h2>\n

Desde maio de 2022, existem mais de 3,56 bilh\u00f5es de<\/a> p\u00e1ginas na internet. Muitas dessas p\u00e1ginas s\u00e3o simples arquivos HTML. (Note que n\u00e3o estamos falando de sites, mas sim de p\u00e1ginas de internet)<\/p>\n

Tradicionalmente, se o seu site tivesse 150 p\u00e1ginas, voc\u00ea provavelmente teria 150 arquivos HTML separados. Mas hoje em dia, as coisas mudaram. Se voc\u00ea usa um Sistema de Gerenciamento de Conte\u00fado (CMS)<\/a>, como a maioria das pessoas, isso n\u00e3o ser\u00e1 o caso, pois ele geralmente gera dinamicamente p\u00e1ginas com base em dados armazenados em um banco de dados.<\/p>\n

\"Internet
Um gr\u00e1fico mostrando quantas p\u00e1ginas est\u00e3o na internet.<\/figcaption><\/figure>\n

Esses arquivos tamb\u00e9m s\u00e3o chamados de documentos HTML, e eles s\u00e3o os blocos de constru\u00e7\u00e3o do seu site. Cada p\u00e1gina tem v\u00e1rios elementos on-page e off-page que todos t\u00eam um lugar em documentos HTML. Isso inclui elementos backend<\/a> como meta tags, tags de t\u00edtulo e alt tags, mas tamb\u00e9m inclui elementos f\u00edsicos como v\u00eddeos, imagens, blocos de texto e outros recursos voltados para o usu\u00e1rio.<\/p>\n

O que constitui um documento HTML?<\/h3>\n

Todos os documentos HTML terminam com a extens\u00e3o .html ou .htm. Estes documentos cont\u00eam todos os textos e tags que fornecem informa\u00e7\u00f5es est\u00e1ticas para um navegador de internet.<\/p>\n

\n
\n
\n
\n
\n
\n

O documento HTML \u00e9 o manual de instru\u00e7\u00f5es usado pelo navegador do usu\u00e1rio para construir o site. Todos os arquivos aos quais ele se refere, como CSS stylesheets e arquivos JavaScript que alimentam elementos din\u00e2micos, s\u00e3o lidos pelo navegador e, em seguida, a p\u00e1gina \u00e9 renderizada de acordo com essas instru\u00e7\u00f5es, permitindo que os espectadores vejam o site como foi projetado. A renderiza\u00e7\u00e3o \u00e9 a constru\u00e7\u00e3o real da p\u00e1gina e ocorre toda vez que algu\u00e9m navega para uma p\u00e1gina espec\u00edfica em seu site.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

Se houver problemas com seu documento HTML ou qualquer um dos arquivos que ele inclui, o site n\u00e3o ir\u00e1 renderizar corretamente. Seria como tentar montar uma mesa da IKEA sem uma pe\u00e7a ou ferramenta necess\u00e1ria.<\/p>\n

Os sites modernos cont\u00eam v\u00e1rios elementos HTML compostos de tags e atributos. Estes elementos criam a estrutura de uma p\u00e1gina. As tags associadas a cada elemento mostram onde eles come\u00e7am e terminam. Sem uma tag que fecha um elemento, o navegador colocar\u00e1 todo o conte\u00fado seguinte dentro daquela coluna ou linha, mesmo que n\u00e3o seja o que voc\u00ea pretendia.<\/p>\n

Os atributos associados a cada elemento em uma p\u00e1gina ilustram as v\u00e1rias funcionalidades que os comp\u00f5em.<\/p>\n

Todos os documentos HTML come\u00e7am com uma declara\u00e7\u00e3o <!DOCTYPE>. Esta defini\u00e7\u00e3o de tipo de documento, tamb\u00e9m conhecida como DTD, determina a estrutura e os elementos de um documento XML<\/a>.<\/p>\n

Enquanto <div> costumava ser a principal escolha para criar blocos de conte\u00fado em HTML5<\/a>, voc\u00ea tamb\u00e9m tem blocos espec\u00edficos como <main> que indicam o tipo de conte\u00fado que estar\u00e1 em um bloco para rastreadores \u2014 neste caso, o conte\u00fado principal do blog\/artigo.<\/p>\n

No\u00e7\u00f5es b\u00e1sicas de HTML<\/h2>\n

Se voc\u00ea quer se tornar um web designer ou pelo menos ter um papel na cria\u00e7\u00e3o do site da sua empresa, voc\u00ea precisa aprender HTML<\/a>. Como quase tudo que h\u00e1 para aprender neste mundo, voc\u00ea tem que come\u00e7ar com o b\u00e1sico para ter uma forte compreens\u00e3o dos elementos mais avan\u00e7ados que est\u00e3o por vir.<\/p>\n

Voc\u00ea poderia, \u00e9 claro, usar um editor de HTML gratuito<\/a> ou Texto Sublime<\/a>, mas ter um forte entendimento de como o HTML funciona o ajudar\u00e1 na personaliza\u00e7\u00e3o aprimorada dos sites que voc\u00ea construir.<\/p>\n

\n
\n
\n
\n
\n
\n

Neste texto, iremos apresentar os conceitos fundamentais de HTML para auxili\u00e1-lo a come\u00e7ar se familiarizar com a linguagem e a se tornar fluente em HTML.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

Elementos HTML<\/h3>\n

Todos os elementos HTML, independentemente do que eles est\u00e3o criando, t\u00eam os mesmos tr\u00eas componentes. Voc\u00ea tem uma tag de abertura, o conte\u00fado em si e uma tag de fechamento.<\/p>\n

\"HTML
Os tr\u00eas componentes de um elemento HTML<\/figcaption><\/figure>\n

As tags de abertura mostram ao navegador da web onde os elementos da sua p\u00e1gina come\u00e7am. Elas s\u00e3o marcadas usando colchetes angulares de abertura e fechamento. Por exemplo, a tag de abertura <em> \u00e9 usada para colocar \u00eanfase no conte\u00fado, como em it\u00e1lico. Voc\u00ea deve colocar essa tag antes do texto que deseja enfatizar.<\/p>\n

O conte\u00fado em si \u00e9 a informa\u00e7\u00e3o real que o usu\u00e1rio v\u00ea. Isso pode ser uma c\u00f3pia escrita, como um artigo de blog. Tamb\u00e9m pode ser uma imagem ou um c\u00f3digo integrado para um v\u00eddeo. Quando colocado ap\u00f3s a tag de abertura, o conte\u00fado come\u00e7ar\u00e1 onde designado.<\/p>\n

A tag de fechamento \u00e9 a mesma que a tag de abertura, mas adiciona uma barra de avan\u00e7o antes do nome do elemento. Para voltar ao nosso exemplo de tag de \u00eanfase de antes, voc\u00ea colocaria a tag <\/em> no final do texto que voc\u00ea est\u00e1 tentando enfatizar.<\/p>\n

Ent\u00e3o, por exemplo, se voc\u00ea deseja colocar a palavra “exatamente” em it\u00e1lico, voc\u00ea codificaria assim:<\/p>\n

<em>Exactly<\/em><\/p>\n

O resultado seria:<\/p>\n

Exactly.<\/em><\/p>\n

\n
\n
\n
\n
\n
\n

Os elementos HTML incluem atributos com nome e valor que fornecem informa\u00e7\u00f5es adicionais sobre o elemento.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

Para etiquetas de imagem, voc\u00ea obviamente precisa especificar qual imagem voc\u00ea quer mostrar, o c\u00f3digo ent\u00e3o fica assim:<\/p>\n

<img src=”img_girl.jpg”><\/strong><\/p>\n

Caso voc\u00ea queira fazer um par\u00e1grafo na sua p\u00e1gina em vermelho enquanto usa a fonte Arial, voc\u00ea deve aplicar esse formato:<\/p>\n

<p style=”color:red;font-family:arial”>
\n<\/strong>
\nNeste exemplo, estamos usando a tag de abertura <p> para um novo par\u00e1grafo. Com estes atributos anexados, tudo naquele par\u00e1grafo ficaria vermelho na fonte Arial, at\u00e9 a tag de fechamento <\/p>.<\/p>\n

Mas no desenvolvimento moderno, \u00e9 pr\u00e1tica padr\u00e3o n\u00e3o usar o atributo de estilo HTML para ajustar o design de elementos individuais, mas sim para estilizar a p\u00e1gina inteira com uma folha de estilo CSS separada.<\/p>\n

Classe HTML e ID s\u00e3o dois atributos de um elemento HTML que \u201cos nomeia\u201d e o ajuda a direcionar esses elementos com CSS ou JavaScript mais tarde. Isso ajuda no desenvolvimento<\/a> e o torna mais eficaz. Ao usar o ID ou classe de um elemento, voc\u00ea pode inserir informa\u00e7\u00f5es de estilo em elementos como cor de fundo, bordas, cor da fonte<\/a> e muito mais.<\/p>\n

Por exemplo, ao inv\u00e9s de estilizar o texto para vermelho dentro do documento HTML, voc\u00ea poderia fazer isso:<\/p>\n

<p class=\u201dredtext\u201d>\n\nAnd in the CSS stylesheet, target the class like this:\n\n.redtext {\n\ncolor:red;\n\nfont-family:arial;\n\n}>\/code><\/code><\/pre>\n
Tags HTML e elementos HTML mais usados<\/h3>\n
Existem 142 tags de HTML diferentes que permitem que voc\u00ea crie elementos. Elas s\u00e3o compostas de elementos de n\u00edvel de bloco e em linha.<\/p>\n
Os elementos de n\u00edvel de bloco abrangem toda a largura de uma p\u00e1gina, iniciando uma nova linha dentro de um documento.<\/p>\n
Aqui est\u00e3o algumas tags comuns de n\u00edvel de bloco que voc\u00ea pode usar em seu site:<\/p>\n