HTML: o que é, para que serve, como aprender HTML, exemplos e guia para iniciantes
26 min26 minutos de leitura
26 min26 minutos de leitura
Autor(a)
Mônica Mazzochi Hillman
Bacharela em Tecnologias Digitais, especialista em User Experience e pós graduanda em Docência e Performance na Educação a Distância com experiência em suporte técnico de T.I e com tecnologias front-end. Atualmente é Tech Community Manager na Magalu Cloud e instrutora na Alura. Nas horas vagas gosta de assistir animes e produções da marvel, ouvir kpop e post-hardcore, jogar Valorant e TFT.
Inscreva-se em nossa Newsletter
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Ao acessar sites de notícias, redes sociais ou sistemas bancários, encontramos diversos elementos interativos na tela. Mas você já parou para pensar como tudo isso é estruturado?
Um dos profissionais responsáveis por construir um site é a pessoa desenvolvedora front-end, que transforma em código um layout feito pela equipe de UX/UI design em uma aplicação como o Figma.
Tecnicamente, a construção de um website é feita através de várias tecnologias, e uma delas é o HTML. Neste artigo, você vai conhecer o que é o HTML, para que serve e como utilizá-lo.
O que é HTML? Para que serve a linguagem HTML na web?
Por ser muito utilizada no desenvolvimento de sites, é comum pensar que HTML seja uma linguagem de programação. No entanto, o HTML é uma linguagem de marcação, e não de programação. Mas por que isso acontece?
Linguagens de programação foram projetadas para criar algoritmos, manipular variáveis, estruturas de dados, entre outras coisas, enquanto o HTML (HyperText Markup Language, que em português significa Linguagem de Marcação de Hipertexto) é utilizado para estruturar e formatar o conteúdo de páginas web.
Para ser possível construir um projeto com essa tecnologia, precisamos de um arquivo com formato `.html`, sendo assim possível abri-lo em um navegador, que interpretará o código-fonte para dispor os elementos na tela.
Anatomia de um documento HTML
A anatomia de um documento HTML pode ser interpretada como uma árvore.
Temos a raiz, que é o elemento `<html>`, e a partir dela podemos declarar novos elementos (que são como ramos) que podem ser interpretados como filhos (quando há ramificações a partir de um ramo, assim aninhando elementos) e, consequentemente, também é possível a criação de elementos pais.
Além disso, elementos que compartilham do mesmo ramo de origem podem ser chamados de irmãos.
Anatomia de um elemento HTML
Já a anatomia de um elemento HTML é construída através da abertura da tag que é cercada de colchetes angulares. Por exemplo, a tag de parágrafo `<p>` é seguida pelo conteúdo que será mostrado e, por fim, é fechada por uma tag que é igual a de abertura, mas com uma barra antes do nome do elemento: `</p>`. O resultado final é este:
<p>O nome do meu gato é Bonifácio.</p>
O que posso criar com HTML?
Com o HTML você pode criar vários elementos para construir uma página web com o tema da sua preferência: blogs, lojas virtuais, páginas de notícia etc. Alguns dos principais elementos que podemos criar são:
Títulos e parágrafos
Links e botões
Imagens
Listas e tabelas
Formulários
Vídeos e áudios
Essa linguagem de marcação oferece uma ampla gama de recursos, tendo sido citados somente alguns deles, que podem ser utilizados de acordo com a necessidade do projeto.
História
Evolução do HTML
O HTML foi desenvolvido por Tim Berners-Lee no CERN (Organização Europeia para a Pesquisa Nuclear), com auxílio do ambiente de desenvolvimento NeXTSTEP, e inicialmente era uma coleção de ferramentas para lidar com as pesquisas e a comunicação entre seu criador e outras pessoas.
Com a evolução da internet, a solução foi ganhando atenção mundial. As primeiras versões eram flexíveis, e isso ajudava iniciantes na área. Com o tempo, a estrutura foi ficando mais rígida, mas até hoje os navegadores conseguem interpretar páginas web feitas da maneira antiga através da retrocompatibilidade.
Formalmente, as especificações foram definidas somente na década de 1990. Em seguida, começou a evolução do HTML, sendo criado um grupo de trabalho para o HTML que, em 1995, publicou a versão HTML 2.0. No final de 1997 foi lançada a versão HTML 3.5 e, com ela, o grupo de trabalho da W3C começou a focar no desenvolvimento do XHTML.
Continuaram com o lançamento das versões HTML 4.01 em 1999, do XHTML em 2000, e finalmente chegamos em 2014, momento em que é lançado o HTML5. Desde 2019, a WHATWG e o W3C colaboram em uma única versão do HTML, conhecida como HTML Living Standard, que é continuamente atualizada em vez de ter versões numeradas.
Após a evolução de diversas versões do HTML até o padrão que utilizamos atualmente, surge a dúvida: qual a diferença entre HTML e HTML5?
Diferença entre o HTML e HTML5
Nas versões mais antigas a estruturação de conteúdo era feita principalmente por elementos genéricos, como `<div>` e `<span>`. No HTML5 temos tags semânticas que se referem ao objetivo do elemento como `<header>` para o cabeçalho, `<footer>` para o rodapé, `<section>` para separar seções, entre outras.
Além disso, hoje, com o HTML5 temos suporte nativo para áudio e vídeo através das tags <audio> e <video>, podendo incorporá-los diretamente na página sem necessidade de plugins externos como Flash.
Formulários também conseguem abranger mais tipos de campos na nova versão: agora temos disponíveis campos de email, número, data e especificações que geram validações nativas nos elementos.
Vamos conferir como seria feito o código de uma página com um formulário em HTML5? Não se preocupe se não entender todas as tags agora, exploraremos melhor ao longo do artigo:
Note que estamos delimitando as principais partes do nosso site em: cabeçalho (`<header>`), conteúdo principal (`<main>`) e rodapé (`<footer>`). Além disso, no conteúdo principal, temos um formulário (`<form>`) com alguns campos que a pessoa usuária pode digitar (`<input>`).
Esses campos possuem atributos, como `type="email"` e `type="date"`, que indicam que esse campos aceitam apenas textos nos formatos de email e de data, respectivamente. Caso esses formatos não sejam respeitados, o formulário mostrará mensagens de alerta e ele não poderá ser submetido.
Esses são apenas alguns dos recursos introduzidos no HTML5. Para deixar mais claro as suas vantagens, o mesmo código acima seria escrito da seguinte forma utilizando uma versão mais antiga do HTML:
Perceba que as tags `<header>`, `<main>` e `<footer>` não estão mais presentes, e estão sendo utilizadas tags `<div>` no lugar. Além disso, as tags `<input>` estão com os atributos `type="text"`, que não verificam o formato do texto inserido.
A tag `<div>` possui valor semântico muito menor que as tags do HTML5, ou seja, ela possui menos significado e não indica bem o seu tipo de conteúdo.
Isso prejudica a acessibilidade do site para quem utiliza tecnologias assistivas, além de comprometer o SEO, uma técnica que deixa o seu site mais visível para mecanismos de busca como o Google. Falaremos melhor sobre HTML semântico, acessibilidade e SEO na próxima sessão!
Além disso, os navegadores modernos já utilizam a versão 5 do HTML. Por conta disso, atualmente, o termo “HTML” é utilizado como sinônimo de “HTML5”, justamente por essa versão já ser consolidada na construção de sites.
Por isso, recomenda-se que, ao iniciar seus estudos e práticas com HTML, as primeiras linhas de código sejam escritas já utilizando as tags atualizadas do HTML5.
Essa abordagem proporciona melhores práticas de desenvolvimento e uso adequado das tags, oferecendo diversos benefícios, como acessibilidade e SEO.
Entretanto, é importante saber que o HTML não é uma especificação estática. O HTML Living Standard é continuamente desenvolvido e aprimorado pela WHATWG, com funcionalidades e recursos sendo adicionados constantemente. A especificação é atualizada regularmente sem números de versão.
HTML semântico
O HTML semântico é uma abordagem no desenvolvimento web que enfatiza o uso correto e significativo dos elementos, escolhendo aqueles que melhor descrevem o conteúdo que está sendo apresentado.
Por exemplo, em vez de usar um `<div>` genérico para todo o conteúdo, é preferível usar elementos mais específicos, como `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<footer>`, entre outros, de acordo com a estrutura e a natureza do conteúdo.
Muitas tags introduzidas no HTML5 foram criadas com o intuito de termos mais tags semânticas à nossa disposição, pois elas fornecem esses benefícios na construção de sites.
Uma das principais características dessa abordagem é a importância dos cabeçalhos, que são representados pelos elementos `<h1>` a `<h6>`, sendo essenciais para indicar a hierarquia do conteúdo. Os sites de pesquisa dão importância aos cabeçalhos e por isso é um ponto de foco.
O texto alternativo em imagens é crucial tanto para a acessibilidade quanto para o SEO. Tendo o cuidado de inserir o atributo `alt` nas tags de imagem, fornecendo um texto descritivo, isso permite que leitores de tela leiam o texto e que sites de pesquisa considerem esse texto ao classificar as páginas.
Ainda sobre textos no contexto de semântica, é importante usar links descritivos em vez de genéricos. Por exemplo, em vez de construir um link com “clique aqui”, escreva um texto que deixe claro o destino desse link.
Para aprimorar a questão de acessibilidade do seu site é possível usar o WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications), uma especificação técnica da W3C que fornece atributos adicionais (roles, states e properties) para descrever a função, o estado e o comportamento dos elementos.
Ao aplicar essas práticas, você cria páginas amigáveis para sites de busca, como o Google, e acessíveis para todos os usuários. Isso resulta em:
• Melhor experiência do usuário;
• Maior alcance do público; e
• Uma web mais inclusiva.
Diferença entre HTML e XML: qual o papel de cada linguagem na web?
Tanto o XML (Extensible Markup Language) quanto o HTML são linguagens de marcação utilizadas na web, mas, apesar disso, possuem propósitos e estrutura diferentes.
O XML é projetado para representar informações de forma hierárquica e legível, tanto para humanos quanto máquinas, não se preocupando com a apresentação visual nem tendo uma estrutura pré-definida, mas com a descrição da estrutura dos dados de forma consistente e portável.
No Brasil, é o formato mais utilizado na emissão de notas fiscais.
Já o HTML é específico para a criação e apresentação de conteúdos em páginas web, sendo mais restrito por ter elementos e estrutura pré-definida, concentrando-se na apresentação visual e como os elementos devem ser exibidos no navegador. É comumente utilizado na construção de sites.
Podemos considerar que as principais diferenças são: enquanto o XML é usado para armazenar e transportar dados, o HTML é utilizado para criar páginas web com conteúdo formatado e que possibilita a interação.
Como funciona o HTML?
Como dito anteriormente, o HTML é utilizado para estruturar e formatar o conteúdo de páginas web através de tags, que serão interpretadas pelo navegador. Para que seja possível essa interpretação, é importante declarar qual a versão do HTML será usada.
E ssa declaração é feita através do `<!DOCTYPE html>`, garantindo que o navegador interprete corretamente o código no modo standards (em vez de quirks mode).
É importante observar que isso não é uma tag HTML, e sim uma declaração de tipo de documento (DTD - Document Type Declaration) que deve ser colocada na primeira linha do documento.
DOM
A representação estruturada do conteúdo HTML de uma página web é feita através do DOM (Document Object Model), que é uma interface de programação que permite o acesso e manipulação dos elementos.
É o DOM que faz a estruturação em forma de árvore dos elementos, em que cada um deles é representado por um nó organizado hierarquicamente de acordo com a estrutura do documento.
Podemos analisar um exemplo de código em HTML para exibição de uma frase na tela:
<!DOCTYPE html><html><head><title>Aprendendo HTML</title></head><body><h1>Olá, mundo!</h1><p>Este é o meu primeiro projeto HTML</p></body></html>
A estrutura do DOM seria a seguinte:
`<html>`: é o elemento raiz da página, portanto, de maneira hierárquica, está acima de todos;
`<head>`: se refere à “cabeça” da página, onde é possível inserir configurações que auxiliam na renderização, assim como o título da página. Ele está dentro do elemento `<html>`, portanto, é um elemento filho dele;
`<title>`: define o título da página, aquele que ficará visível na aba do navegador. É uma ramificação do `<head>`, sendo um elemento filho;
`<body>`: é o “corpo” da página, onde serão inseridos todos os elementos visuais que deverão aparecer, como os textos. Ele também está hierarquicamente inserido dentro do `<html>`, portanto, é filho dele;
`<h1>`: refere-se ao título principal que ficará visível no corpo da página. Como está dentro do `<body>`, consequentemente pode ser considerado como filho;
`<p>`: constrói um parágrafo de texto de acordo com o conteúdo inserido dentro dele. Também está dentro do body, portanto é filho dele e irmão do `<h1>`.
Assim, podemos visualizar que o DOM é uma representação em forma de árvore do conteúdo inserido no HTML e que, ao criar um nó para cada elemento, permite que eles sejam acessados por meio do JavaScript.
IDEs e editores para aprender HTML
As IDEs (Integrated Development Environments, em português, ambiente de desenvolvimento integrado) são programas para computador que possuem ferramentas para auxiliar no desenvolvimento de software.
Existem várias disponíveis para desenvolver em HTML, sendo as principais:
Visual Studio Code: desenvolvida pela Microsoft, possui suporte nativo para HTML e tem uma variedade de plugins disponíveis para melhorar a produtividade;
Sublime Text: é um editor de código que se destaca por ser leve e personalizável, que também possui suporte nativo para HTML.
Qual é a diferença entre as tags HTML <div> e <span>?
Ao citar os elementos `<div>` e `<span>`, podemos notar que sua definição é semelhante: um container. A diferença entre eles é que a `<div>` é um elemento de bloco, então, por padrão, ocupa toda a largura disponível horizontalmente, enquanto o `<span>` é um elemento em linha, ocupando somente o espaço necessário para seu conteúdo.
Uma dica para saber quando usar cada um deles é: a `<div>` é mais utilizada para estruturar e organizar seções da página, enquanto o `<span>` é utilizado para aplicar estilos ou manipular partes menores de um texto ou conteúdo.
Como inserir e formatar imagens no HTML
É possível inserir imagens em uma página através da tag `<img>`, que por se tratar de um elemento vazio não precisa de uma tag de fechamento. Um exemplo de uso é:
<imgsrc="caminho_da_imagem.jpg"alt="Descrição da imagem">
Os atributos básicos que devem ser utilizados nessa tag são:
`src`: para referenciar o caminho ou URL da imagem. Você pode utilizar tanto uma imagem do seu computador quanto uma imagem encontrada na web, através da sua URL;
`alt`: para inserir um texto alternativo, que é exibido caso a imagem não carregue e também para fins de acessibilidade, isto é, caso o usuário esteja usando um leitor de tela, o texto alternativo será lido para ele.
Além desses atributos, podemos definir a largura (`width`) e a altura (`height`) da imagem diretamente na tag:
<img src="caminho_da_imagem.jpg" alt="Descrição da imagem" width="300" height="200"">
Também temos como trabalhar com imagens responsivas através das tags `<picture>`, `<source>` e o atributo `srcset`, que você pode conhecer sobre acessando o artigo Srcset: Trabalhando com imagens responsivas.
Como estruturar títulos, listas e texto em HTML
Seja para escrever títulos, subtítulos, texto simples ou listas, no HTML temos elementos específicos para isso.
Referente aos títulos, temos os cabeçalhos, que são usados para estruturar o conteúdo da página e fornecer uma hierarquia visualmente clara.
O cabeçalho mais importante é o `<h1>`, que geralmente é usado para o título principal da página. O `<h2>` é usado para subtítulos de seções importantes, o `<h3>` para subseções e assim por diante até o `<h6>`. Por exemplo:
Quando queremos organizar informações em formato de itens, podemos utilizar as listas. Existem três tipos principais de listas em HTML:
Listas não ordenadas;
Listas ordenadas; e
Listas de definição.
As listas não ordenadas são criadas com a tag `<ul>` (unordered list), e os itens da lista são definidos com a tag `<li>` (list item). Os itens são marcados com marcadores, por padrão, pontos.
Já as listas ordenadas são criadas com a tag `<ol>` (ordered list). Os itens da lista também são definidos com a tag `<li>` e são numerados automaticamente.
Também temos as listas de definição, que são criadas com a tag `<dl>` (definition list). Elas consistem em termos (definidos com a tag `<dt>`) seguidos de suas definições correspondentes (definidas com a tag `<dd>`).
Para escrever textos simples, temos os parágrafos, que são criados com a tag `<p>`. Dentro dessa tag, você pode inserir o texto do parágrafo. Por exemplo:
<p>Este é um parágrafo de exemplo que contém algum texto.</p>
E você também pode estilizar algumas palavras dos textos de acordo com a necessidade: seja para destacar, para riscar, para enfatizar. Tudo isso através de marcadores de texto.
Marcando e formatando texto com tags HTML
Temos diversas tags que não são utilizadas para construir elementos, mas como marcadores de texto. Algumas delas são:
• `<strong>`: para destacar o texto, exibindo o texto em negrito:
<p>Este é um texto <strong>importante</strong>.</p>
• `<em>`: para enfatizar o texto, exibindo-o em itálico:
<p>Este é um texto <em>enfatizado</em>.</p>
• `<u>`: para sublinhar o texto:
<p>Este é um texto <u>sublinhado</u>.</p>
• `<s>`: para riscar o texto, indicando que foi removido ou é irrelevante:
<p>Este é um texto <s>riscado</s>.</p>
• `<mark>`: para destacar o texto com uma cor de fundo especifica:
<p>Este é um texto <mark>destacado</mark>.</p>
• `<sup>` e `<sub>`: para exibir texto como sobrescrito (acima da linha de base) ou subscrito (abaixo da linha de base), respectivamente:
<p>Este é umtextoemformatodefórmula: x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>
Citamos apenas algumas das tags disponíveis para marcar ou formatar o texto, e é possível combinar várias tags para obter o efeito desejado. É importante lembrar de usar as tags de forma semântica, ou seja, escolher as tags adequadas com base no significado do texto.
Links
No HTML, os links são criados usando a tag `<a>`, que significa "âncora". Os links permitem criar um hiperlink e conectar uma página a outra ou a um recurso externo, como um documento, uma imagem, um vídeo etc. Um exemplo de código utilizando essa tag é:
`href`: especifica o destino do link. Pode ser uma URL completa para um site externo ou um caminho relativo para um arquivo ou página dentro do seu próprio site;
`Texto do link`: é o texto visível do link que fica entre as tags `<a>`.
Você também pode adicionar outros atributos à tag `<a>`, como `target` para abrir o link em uma nova janela ou guia, ou `title` para fornecer uma dica de ferramenta quando o usuário passar o cursor do mouse sobre o link:
<ahref="https://www.exemplo.com"target="_blank"title="Abrir em uma nova janela">Abrir site</a>
O atributo `target="_blank"` faz com que o link seja aberto em uma nova janela ou guia do navegador. Além disso, você pode usar links âncora para criar links internos em uma página. Um link âncora aponta para um local específico em uma página, geralmente identificado por um ID. Por exemplo:
No exemplo acima, o link "Ir para a Seção 1" levará o usuário para a seção com o ID `"secao1"` na mesma página. Lembre-se de que, para isso funcionar, o valor do `id` deve corresponder ao que está em `href`.
Como exibir caracteres especiais e símbolos usando código HTML
Você pode usar entidades de caractere para exibir caracteres especiais e símbolos que não estão disponíveis diretamente no teclado ou que podem causar conflitos com a sintaxe do código HTML. As entidades de caractere começam com `&` e terminam com `;`.
Aqui estão alguns exemplos de entidades de caractere comuns:
Além dessas entidades de caractere, você também pode usar códigos numéricos para caracteres especiais. Os códigos numéricos começam com `&#` e terminam com `;`. Por exemplo:
Às vezes escrevemos um código e queremos documentá-lo, criar lembretes ou até desativar temporariamente partes do código sem removê-las completamente. Para isso, podemos escrever comentários que não serão exibidos no navegador.
Para adicionar um comentário, você pode usar a seguinte sintaxe:
<!-- Este é um comentário em HTML -->
O texto dentro dos `<!--` e `-->` é considerado um comentário e não será renderizado pelo navegador. Você pode inserir qualquer texto ou código dentro dos comentários.
Qual a relação entre HTML, CSS e JavaScript?
Devs front-end utilizam várias tecnologias no desenvolvimento de um site, mas seja usando frameworks e bibliotecas, a base é sempre a mesma: HTML, CSS e JavaScript.
O HTML, como vimos neste artigo, é uma linguagem de marcação utilizada para estruturar e organizar o conteúdo da página. Mas somente com HTML não é possível estilizar os elementos ou construir interações complexas.
É como a estrutura de um prédio, fornecendo paredes, portas e janelas. Mas qual é a diferença entre a linguagem HTML e a linguagem CSS?
Diferença entre HTML e CSS: para que serve cada uma dessas linguagens?
Diferente do HTML, o CSS (Cascading Style Sheets, em português, folha de estilos em cascata) é uma linguagem de estilo que define a aparência e o layout dos elementos HTML em uma página web.
Com ele, conseguimos colocar cores, fontes, margens, tamanhos, posicionamentos e outros atributos nos elementos. É como a pintura, a decoração e o design interior de um prédio, tornando-o esteticamente atraente e agradável.
Por que estudar HTML e CSS?
Porque ambos se complementam! Dessa maneira, você vai conseguir construir a estrutura de um site e também estilizá-lo, conseguindo criar experiências encantadoras para os usuários do seu site.
Por fim, para complementar, temos o JavaScript, que é uma linguagem de programação.
Ele é o responsável por adicionar interatividade e comportamento dinâmico a uma página web, possibilitando a adição de recursos como manipulação de eventos, validação de formulários, alterações de conteúdo em tempo real e interações com servidores.
É como o sistema elétrico, encanamento e mecanismos que tornam o prédio funcional e interativo.
Saiba mais: Guia de carreira Front-end
Essas três tecnologias trabalham juntas para criar uma experiência de usuário envolvente e funcional. Se você quer saber mais sobre as tecnologias usadas no front-end, confira o:
Onde usar HTML na programação: principais aplicações e exemplos
Embora o HTML seja geralmente utilizado na área de desenvolvimento web, também é possível utilizá-lo em outras áreas da programação, como:
HTML no desenvolvimento de e-mail marketing: muitas campanhas de e-mail marketing usam HTML para criar templates de emails personalizados. O HTML é usado para estruturar o conteúdo do e-mail, adicionar imagens, estilizar o texto e criar links;
HTML no desenvolvimento mobile: no desenvolvimento de aplicativos móveis, o HTML é usado em combinação com tecnologias como CSS e JavaScript para criar aplicativos híbridos ou multiplataforma;
HTML no desenvolvimento de jogos: embora o HTML não seja a principal tecnologia usada no desenvolvimento de jogos complexos, ele pode ser usado em jogos mais simples ou em jogos baseados em navegador;
HTML no desenvolvimento de aplicativos desktop: frameworks como o Electron permitem que você crie aplicativos desktop usando HTML, CSS e JavaScript. Esses aplicativos são baseados em navegadores embutidos e podem ser executados em diferentes sistemas operacionais.
É importante observar que o HTML é frequentemente combinado com outras tecnologias, como CSS e JavaScript, para criar essas experiências.
Aprenda mais sobre HTML gratuitamente
Acesse gratuitamente as primeiras aulas da Formação A partir do zero: HTML e CSS para projetos web e continue aprendendo sobre temas como:
Neste artigo você conheceu o HTML, sua história, como funciona, qual editor de código pode ser utilizado para construir um projeto com essa tecnologia e como utilizá-lo através de suas tags e elementos. Além de conhecer onde o HTML pode ser aplicado e a relação entre HTML, CSS e JavaScript.
Dessa maneira você aprendeu que o HTML é uma linguagem de marcação, e não de programação, que é utilizada para criar elementos e estruturar páginas web e que é uma tecnologia utilizada por pessoas desenvolvedoras front-end, geralmente em conjunto com CSS e JavaScript.
Assim, você vai conseguir criar aplicações web completas, desde a construção dos elementos, a estilização e a interação dinâmica, construindo experiências encantadoras.
