O que é HTML e qual sua funcionalidade?

As páginas web (sejam sites, blogs ou landing pages) são ferramentas de divulgação de informação com as mais variadas finalidades: desde difundir conhecimento até gerar oportunidades de negócio. Seja qual for o intuito, todas elas têm em comum a linguagem com a qual são construídas: o HTML.

Como veremos, não se trata de uma linguagem de programação e é bastante simples de entender. Continue a leitura e veja como construir uma página web é mais fácil do que parece!

Confira os assuntos que vamos tratar neste post:

• O que é e para que serve o HTML?
• Quais são os principais elementos do HTML?
• Como é a estrutura básica de um documento do tipo?
• Como criar o seu primeiro código em HTML?
• Qual é a relação entre HTML, CSS e JavaScript?

O que é e para que serve o HTML?

HTML é a sigla em inglês para Hypertext Markup Language, que traduzimos para o português como linguagem de marcação de hipertexto.

Apesar dos nomes complicados, o HTML nada mais é que uma linguagem usada para criar páginas web por meio de marcadores (tags) e atributos, que definem o significado e a estrutura do conteúdo. A aparência é responsabilidade do CSS, e o comportamento, do JavaScript.

Mas você deve estar se perguntando: o que é um hipertexto? Esse conceito faz referência a um texto com blocos interconectados contendo palavras, imagens, sons, tabelas e outros elementos. Além disso, eles podem ter caminhos que apontam para outros hipertextos, caminhos esses conhecidos como hiperligações, hyperlinks ou apenas links.

A criação do HTML é atribuída a Tim Berners-Lee, que inventou a World Wide Web no CERN, o laboratório europeu de física de partículas: a proposta é de 1989, o primeiro cliente e o primeiro servidor são de 1990 e a abertura ao público veio em 1991.

A ideia era criar um ambiente em que cientistas pudessem divulgar suas pesquisas para que seus colegas pudessem consultá-las com facilidade. Berners-Lee acabou criando o HTML como linguagem padrão para elaborar esses documentos.

Desde a sua implementação, no início dos anos 1990, o HTML passou por diversas melhorias e hoje é o alicerce de blogs, e-commerces, redes sociais e todo o tipo de página acessível de um navegador web. Vale um aviso: o HTML não tem mais número de versão. Depois do acordo entre W3C e WHATWG, de 28 de maio de 2019, a especificação oficial passou a ser o HTML Living Standard, mantido pelo WHATWG em html.spec.whatwg.org, e o W3C aposentou as versões HTML 5.2 e 5.3 em 28 de janeiro de 2021.

Quais são os principais elementos do HTML?

Agora que você já sabe o que é o HTML, vamos ver os principais marcadores que definem a função dos elementos que fazem parte da página.

Mas antes precisamos lembrar que essas tags são identificadas com um sinal de menor que (<), seguido pelo nome da tag e um sinal de maior que (>). A maior parte das tags precisa ser fechada, o que representamos com uma barra (/) entre o sinal “<“ e o nome da tag.

Tudo ficará mais claro com os exemplos a seguir.

Parágrafo (<p>)

A tag <p> deve ser aberta e fechada para definir um parágrafo.

<p>Este é um parágrafo em HTML.</p>

Cabeçalho (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>)

As heading tags, ou tags de cabeçalho, ajudam a criar uma hierarquia entre as partes do texto, separando-o em seções. O <h1> é o cabeçalho de maior relevância, seguido pelo <h2>, <h3> e assim sucessivamente até o <h6>, de menor importância.

<h1>Título principal</h1>
<p>Parágrafo de introdução.</p>
<h2>1. Primeiro intertítulo</h2>
<p>Parágrafo da primeira seção.</p>
<p>Mais um parágrafo da primeira seção.</p>
<h2>2. Segundo intertítulo</h2>
<p>Parágrafo da segunda seção.</p>
<p>Mais um parágrafo da segunda seção.</p>
<h2>3. Terceiro intertítulo</h2>
<p>Parágrafo da terceira seção.</p>
<h3>3.1. Intertítulo dentro da terceira seção</h3>
<p>Parágrafo da seção 3.1.</p>
<h3>3.2. Mais um intertítulo dentro da terceira seção</h3>
<p>Parágrafo da seção 3.2.</p>

Imagem (<img>)

A tag de imagem é um elemento vazio (void element): ela só tem tag de abertura e não pode receber tag de fechamento. Além do “src”, use sempre o atributo “src”.

<img src="https://analoghq.ai/blog/br/resources/wp-content/uploads/2019/09/twitter-cards.png" alt="Exemplo de card do Twitter">

Âncora (<a>)

A tag de âncora define um link para outra página. O atributo “href” determina o destino desse link.

<a href="https://exemplo.com/arquitetura-da-informacao">Arquitetura da Informação</a>

Lista ordenada (<ol>)

Uma ordered list, ou lista ordenada, é exibida com elementos numerados. Cada elemento deve ser marcado com a tag <li> (list item).

<ol>
	<li>SEO</li>
	<li>Links patrocinados</li>
	<li>Redes sociais</li>
</ol>

Lista não ordenada (<ul>)

A tag unordered list, ou lista não ordenada, mostra os elementos como bulletpoints.

<ul>
	<li>Automação de marketing</li>
	<li>Geração de leads</li>
	<li>E-mail marketing</li>
</ul>

Tabela (<table>)

A tag de tabela exibe informações no formato de linhas e colunas. Dentro da tag <table>, usamos <tr> para as linhas, <th> para os cabeçalhos e <td> para cada célula. Para a tabela ficar acessível, agrupe a linha de cabeçalho em <thead>, o restante em <tbody> e marque os cabeçalhos com <th scope=”col”>.

<table>
	<tr>
    	<th>Nome</th>
    	<th>Sobrenome</th>
  	</tr>
	<tr>
  		<td>Jonah</td>
    	<td>Berger</td>
  	</tr>
  	<tr>
  		<td>Ann</td>
    	<td>Handley</td>
  	</tr>
  	<tr>
    	<td>Neil</td>
    	<td>Patel</td>
  	</tr>
</table>

Comentário (<!– –>)

Comentário não é uma tag nem um elemento HTML, apesar de começar com < e terminar com >. Usamos comentários para escrever notas que ajudem no entendimento do código. Tudo que estiver escrito entre os marcadores <!– e –> não será mostrado ao usuário.

<p>O HTML é fundamental para quem deseja criar um site na web.</p> <!-- Este é um parágrafo em HTML -->

Como é a estrutura básica de um documento do tipo?

Vimos diversos elementos, mas agora vamos saber como colocá-los dentro de um código HTML. Como qualquer padrão da web, é necessário seguir algumas regras para a construção desses códigos.

Começamos com a declaração <!DOCTYPE html>. Ao contrário do que se costuma dizer, ela não serve para informar ao navegador que o documento em questão é um HMTL.

Em seguida, abrimos a tag <html>, que precisaremos fechar no fim. Vale declarar nela o idioma da página, com <html lang=”pt-BR”>: sem isso, os leitores de tela costumam assumir o idioma do sistema operacional e pronunciam o texto errado. Dentro dela, adicionamos <head>, que deverá conter os metadados (dados sobre dados) da página, como o título que vai aparecer na aba do navegador (<title>), chamadas para arquivos externos e outras meta tags cruciais para um trabalho de SEO.

É importante incluir a tag <meta charset=”utf-8″> para que o navegador exiba corretamente certos caracteres que utilizamos em português, como acentos e cedilha. Pela especificação, o UTF-8 é a única codificação válida e essa declaração precisa aparecer inteira dentro dos primeiros 1024 bytes do documento.

Por fim, abrimos a tag <body>, em que adicionamos a parte do documento HTML que contém os elementos visíveis para o usuário. Ainda no <head>, inclua <meta name=”viewport” content=”width=device-width, initial-scale=1″>, a configuração recomendada para que a página se ajuste à tela dos celulares.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Minha primeira página</title>
	</head>
	<body>
		<h1>Minha primeira página</h1>
		<p>Meu primeiro parágrafo!</p>
	</body>
</html>

Como criar o seu primeiro código em HTML?

Para criar um código HTML, você só precisa de um editor de texto simples (o Bloco de Notas, por exemplo) e de um navegador web (Chrome, Firefox, Safari, Edge, etc.) para visualizar como vai ficar a sua página. Desenvolvedores profissionais usam editores de código mais especializados, mas podemos seguir inicialmente com um editor simples.

O primeiro passo é criar um novo arquivo e salvá-lo com a extensão .html. Para este tutorial, podemos dar o nome de index.html.

Depois, cole o código que mostramos na seção anterior com a estrutura básica de um HTML e salve o arquivo.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Minha primeira página</title>
	</head>
	<body>
		<h1>Minha primeira página</h1>
		<p>Meu primeiro parágrafo!</p>
	</body>
</html>

Agora é só abrir o arquivo no seu browser preferido e pronto, você acabou de criar o seu primeiro código HTML!

Qual é a relação entre HTML, CSS e JavaScript?

Entendemos que o HTML é a estrutura de uma página web, mas como formatar o estilo de seus elementos? Para configurarmos fontes, cores, alinhamento, enfim, a forma como os componentes HTML serão apresentados, utilizamos o CSS, sigla para Cascading Style Sheets, ou folhas de estilo em cascata.

Apesar de ser possível descrever os estilos dentro do próprio código HTML, é recomendável que o HTML faça uma chamada a um ou mais arquivos CSS individuais. Assim, o código fica mais organizado, já que isola a estrutura do estilo.

O CSS se baseia em seletores e declarações com propriedades e valores. Ou seja, escolhemos os elementos HTML aos quais queremos aplicar os estilos e declaramos quais serão as propriedades desses componentes.

Veja neste exemplo o seletor de parágrafo (p), com uma declaração que define a cor, a família da fonte e o tamanho da fonte.

p {
	color: white;
	font-family: Verdana, sans-serif;
	font-size: 15px;
}

Existe ainda uma terceira camada para o desenvolvimento de páginas web, dedicada a criar comportamentos dinâmicos: o JavaScript. Essa, que de fato é uma linguagem de programação (não confundir com Java), permite dar mais interatividade à página e melhorar a experiência do usuário.

Com ele, conseguimos escolher o que acontece quando o visitante clica em determinada parte da página, aperta determinada tecla, rola a página e muito mais. As aplicações são inúmeras e dependem basicamente da criatividade de quem está desenvolvendo.

Inclusive, o JavaScript é excelente para quem deseja aprender a programar, já que a sintaxe da linguagem é bastante fácil. Além disso, é possível fazer testes imediatos, visualizando o resultado do seu código diretamente no navegador web.

Percebeu como o HTML é mais simples do que aparenta? Então continue os seus estudos, porque apesar da simplicidade, esse é um assunto riquíssimo, com muitas outras tags e atributos que não caberiam em um só post. Um bom próximo passo são os elementos semânticos de estrutura: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> e o mais recente <search>. Lembrando que só pode existir um <main> visível por documento.

Um bom jeito de fixar o que você viu aqui é praticar em um projeto pequeno, como montar a sua própria assinatura de e-mail em HTML.