O que é HTML e como funciona: Um guia para iniciantes

O HTML é uma linguagem de marcação. Isso significa que ele marca (ou seja, define) a estrutura e formatação de documentos – mais ou menos como nós criamos e editamos documentos no MS Word ou o Google Docs, por exemplo. A sigla HTML quer dizer Linguagem de Marcação de Hipertexto (do inglês Hypertext Markup Language). A letra H do HTML é o que diferencia-o de outras linguagens de marcação, pois o hipertexto é um tipo de texto específico da internet, cuja principal função é criar conexões (ou referências) entre diferentes documentos (páginas web) disponíveis na rede.

Quando escrevemos algo em HTML, nós estamos nos comunicando com o computador, descrevendo como queremos que ele apresente certo conteúdo e quais caminhos aquele conteúdo pode percorrer. Escrever em HTML é como escrever em uma língua estrangeira, mas, ainda assim, muito parecida com a nossa. 

Usar o HTML corretamente também é importante para a indexação das páginas na internet. É através do uso das tags HTML relacionadas aos mais diversos elementos que o SEO (Search Engine Optimization) opera. Você pode aprender mais sobre as boas práticas de SEO neste artigo.

A história do HTML

De acordo com os primeiros artigos acadêmicos descrevendo o hipertexto na década de 1960, a inspiração para sua criação vem de dois contos do argentino Jorge Luís Borges, “O jardim de veredas que se bifurcam” e “A biblioteca de Babel”. Neles, o autor descreve o conceito de ligação infinita entre infinitos objetos dentro de espaços limitados, como biblioteca e jardim. Borges usa palavras como “hipervolume” para descrever essa infinidade de conexões.

A partir do conceito de uma biblioteca interconectada, pesquisadores do CERN e outras instituições foram trabalhando em diversos protótipos para como colocar essa ideia em prática. Eles já tinham computadores em uso há décadas, que já estavam se comunicando entre continentes, mas ainda não tinham uma forma unificada de compartilhar informações de forma aberta. Foi só em 1990 que uma versão funcional do HTML surgiu para resolver essa questão. 

A primeira versão do HTML como conhecemos hoje foi idealizada e desenvolvida pelo físico e engenheiro da computação Tim Berners-Lee. O projeto de Tim propunha um jeito simples de criar, editar e compartilhar documentos pela rede de computadores. Junto com o HTML, ele também desenvolveu o protocolo HTTP e a URL. Esses três juntos são usados até hoje por todos os navegadores de internet do mundo. Parece uma coisa simples hoje em dia, mas o que Tim fez na época foi estabelecer uma padronização única de comunicação digital para o mundo todo. 

Hoje em dia, a padronização do HTML é determinada e mantida pela W3C, um consórcio formado por várias organizações privadas e governamentais do mundo todo. É na W3C que se define como o HTML é interpretado pelos navegadores e como ele deve se comportar segundo suas especificações.

Usos mais comuns para o HTML

O HTML é considerado a parte estática do desenvolvimento web. Mas hoje em dia, com a alta capacidade de processamento dos computadores e celulares, ele permite muitas interações locais entre usuário e navegador. Seu uso não se restringe apenas a páginas de conteúdo estático. O HTML também está em:

• Websites interativos. Além de definir a estrutura de qualquer site na internet, o HTML permite interações básicas como cliques, contadores, botões, formulários e outros tipos de interatividade com os usuários que antes era processada em servidores, mas hoje já acontece localmente, no próprio navegador. Isso otimiza o tempo de resposta das páginas e permite uma navegação mais ráṕida.
• Conteúdos multimídia. Desde a atualização para o HTML5, em 2008, o HTML possibilita o uso de controles de vídeo e áudio (botões de “play”, “stop”, “volume” etc), ferramentas gráficas (que permitem desenhos feitos direto no código), controles de animação e uma infinidade de recursos nativos que proporcionam uma melhor experiência com conteúdos multimídia.
• Games. Sim! Dá para fazer jogos apenas com HTML. Assim como os controles multimídia citados no item anterior, com o HTML5 também veio a possibilidade de usar as tags de mídia em jogos. Com um pouquinho de JavaScript, é relativamente fácil criar um jogo de mecânica simples.
• E-mails. Desde os primórdios da troca de e-mails, o HTML esteve presente em sua estruturação. Embora o corpo dos e-mails tenha muitas limitações técnicas e ainda use coisas consideradas ultrapassadas, como tabelas HTML para formar um layout, ele ainda desfruta dos recursos do HTML para entregar as melhores experiências de e-mail marketing ainda hoje.
• Aplicativos. Com a ajuda de bibliotecas e frameworks JavaScript (vamos falar sobre ele mais para frente), muitas plataformas de desenvolvimento de aplicativos permitem a criação de “bibliotecas de UI” usando HTML. Essas bibliotecas são conjuntos de elementos como botões, campos de preenchimento de formulário, galerias de imagem, etc, que são usados em aplicativos do mesmo modo que em páginas web.

Como funciona o HTML

O HTML é um arquivo de texto puro, salvo com a extensão .html (assim como existem documentos de texto em formato doc, pdf, etc.). Ele fica armazenado em um computador que chamamos de servidor. Quando alguém digita o endereço de um site (URL) no campo de endereços do navegador (Chrome, Firefox, Internet Explorer, Edge, etc.), o navegador faz um pedido para o servidor. O servidor então entrega uma cópia do documento HTML da página que corresponde a URL digitada – então o site é entregue: ele aparece na tela. 

Porém, o HTML não é sempre um documento estático, ele também pode ser gerado de forma dinâmica, conforme definições do servidor que está entregando a página. Um bom exemplo disso é quando você faz login em algum site que mostra sua página pessoal, conforme os serviços e conteúdos que você usa. Essa página provavelmente só existe para você e é gerada conforme seu uso e preferências.

Na próxima seção, vamos ver como é um arquivo HTML por dentro.

Estrutura básica de um documento HTML

Um documento HTML geralmente contém dois elementos mínimos, as tags <html>, <head> e <body>. Dentro deles, podemos usar a estrutura básica recomendada para a maioria dos projetos web. De acordo com as recomendações do MDN Docs (Mozilla Developer Network, o maior repositório de documentação de desenvolvimento web), essa estrutura básica contém cinco elementos. São eles:

Cabeçalho <header>

Contém informações básicas sobre a página ou o elemento, como título, descrição e/ou logotipo.

Barra de navegação <nav>

Os links de navegação, os famosos menus, são organizados em barras de navegação. Uma página pode ter mais do que um menu, o que implica em uma hierarquia entre eles, que deve ser apresentada na estruturação do HTML.

Conteúdo principal <main>, <article>, <section> e <div>

Aqui é onde fica a maior parte do “corpo” da página, seu conteúdo principal, e pode ser formado por diferentes elementos dentro do elemento <main> (na próxima seção, vamos falar mais sobre isso). Esse pedaço geralmente é o que mais muda conforme o usuário navega por um site.

Barra lateral <aside>

Geralmente essa barra lateral corresponde a um contexto. Nela podemos encontrar elementos de todo tipo, conforme a necessidade de quem desenvolveu a página, como informações adicionais, menus de contexto, links relacionados ao conteúdo principal etc.

Rodapé <footer>

Geralmente é uma faixa de informações institucionais ou funcionais sobre a página e com frequência seu conteúdo é estático.

HTML e HTML5: qual a diferença?

Quando falamos de HTML, geralmente estamos falando da linguagem de marcação toda, e não apenas de uma versão isolada dela. Isso quer dizer que o HTML5 faz parte do HTML. Por uma questão histórica, citamos muito do HTML5 porque é uma versão muito aguardada do HTML; ela foi esperada por muito tempo pela comunidade de desenvolvedores web. O motivo é simples: antes dele, até o HTML4, as páginas eram altamente dependentes de tecnologias muito instáveis, pesadas e inseguras para rodar conteúdos dinâmicos ou de multimídia. Por exemplo, para rodar um jogo ou uma animação, as pessoas recorriam muito ao uso do Flash, uma tecnologia pertencente à empresa Adobe, que não rodava em todos os computadores (apenas aqueles que tinham o Flash instalado). A navegação e conteúdo de muitos sites costumavam quebrar em alguns navegadores e era difícil implementar um site que rodasse da mesma maneira em todos os lugares. Pessoas com acesso a uma conexão de internet limitada, por exemplo, tinham problemas seríssimos para acessar alguns sites por conta disso. Sem contar que muitas vezes o uso desses recursos colocava os usuários em risco, visto que as páginas não tinham protocolos de segurança eficientes para abarcar essas tecnologias externas.

A partir de 2008, os navegadores de internet foram se atualizando para rodar recursos de interatividade do HTML5 que traziam a maioria dos recursos necessários para uma internet dinâmica, sem depender de software de terceiros. Isso tornou o acesso à web mais rápido, estável e seguro. O HTML5 foi um marco na história da web e permitiu que a internet se tornasse um espaço mais democratizado.

O que são tags HTML, elementos e atributos?

Documentos HTMLs são divididos em blocos de elementos. Esses elementos são declarados através de tags, que definem o início e o final desses elementos. Há uma lista de todas as tags HTML que existem atualmente e muitas delas (não todas) contém atributos, que podem conter valores relacionados ao elemento.

Veremos isso na prática.

Tags

As tags indicam onde um elemento começa e onde ele termina na página. Elas funcionam em cascata, ou seja: frequentemente vemos uma tag dentro da outra. As tags usam os sinais “<” e “>” como marcação. Ao abrir um novo elemento, devemos seguir a estrutura <nome-do-elemento>, e ao fechar o elemento usamos o sinal “/” no final da tag, usando </nome-do-elemento>.

Exemplo

Dentro do elemento <html> podemos ter também os elementos <head> e <body>. Suas tags são estruturadas assim, como neste código básico:

<html>

<head></head>

<body></body>

</html>

Há uma convenção entre desenvolvedores indicando que devemos seguir essa estrutura básica para o HTML. Perceba que usamos um espaço para a direita, indicando que as tags <head> e <body> tem o mesmo nível hierárquico e estão contidas dentro do elemento <html>. Quando escrevemos assim, dizemos que o código está semanticamente correto.

Nível de bloco

Quando falamos em elementos em nível de bloco, isso quer dizer que os elementos são distribuídos verticalmente um após o outro, como blocos de conteúdo. Um novo bloco sempre começa em uma nova linha. Essa estrutura é o padrão para os elementos de layout do HTML.

Exemplo

O elemento <p>, usado para indicar um parágrafo, é um elemento de comportamento de bloco. Isso quer dizer que cada vez que adicionamos um <p> no HTML, ele abre uma linha nova no documento, logo abaixo do elemento anterior.

Em linha

Tags em linha são partes de conteúdo que seguem a mesma linha, não alterando a estrutura dos elementos.

Exemplo

O elemento <a>, usado para hiperlinks, tem comportamento em linha. Isso quer dizer que quando colocamos um link no meio de um texto, o conteúdo segue horizontalmente, sem quebrar para uma nova linha abaixo.

Os dois casos estão ilustrados visualmente aqui:

Elementos

No HTML, elementos são partes da página (como componentes). Eles atuam como uma espécie de molde para o conteúdo que apresentam, ou mesmo como um alicerce ou base estrutural. Existem vários tipos de elementos; layout, formatação de texto, mídia etc. 

Exemplo: 

Veja a anatomia do elemento parágrafo <p>.

Atributos

Os atributos dos elementos são informações específicas que podem ser descritas dentro de uma tag.

Exemplo

A tag de formulário <input> pode conter atributos para indicar que tipo de informação o elemento aceitará (atributo type), o número mínimo  (atributo maxlength) e máximo  (atributo maxlength) de caracteres e se o campo é obrigatório (atributo required).

Relação entre HTML, CSS e JavaScript

O HTML raramente é usado sozinho hoje em dia. É de praxe que se utilizem outros dois recursos com ele, o CSS e o JavaScript. 

O CSS (Cascade Style Sheet) é a tabela de estilo do html, isso é, uma linguagem de estilo usada para definir como as tags html são exibidas. Ele determina como os elementos das páginas de um site se apresentam e se comportam, seguindo um estilo visual coerente.

Já o JavaScript é uma linguagem de programação originalmente feita para navegadores de internet. Ela é frequentemente usada em páginas HTML e permite que uma página seja infinitamente mais dinâmica. Diferente do CSS e do HTML, que são linguagens de marcação estáticas, o JS é, a rigor, uma linguagem de programação.

Exemplo

Aqui você pode ver o exemplo de um script JS trabalhando em conjunto com CSS e HTML.

Considerações finais

Ter um conhecimento mínimo sobre HTML ajuda muito qualquer profissional do meio digital. Ele é a porta de entrada para entender as camadas mais baixas do funcionamento da internet e está presente em tudo que vemos online. 

Profissionais de marketing beneficiam-se especialmente desse conhecimento, pois toda a base do bom funcionamento de SEO e e-mail marketing está no HTML. No início pode parecer desafiador aprender uma linguagem de marcação, mas é impossível aprender qualquer coisa relacionada à web sem passar pelo HTML.

Espero que esse artigo ajude você a esclarecer dúvidas, mas também espero que você não pare por aqui! Ainda há uma infinidade de coisas sobre HTML para aprender. 🙂