Skip to main content


Introdução ao HTML e CSS​

O HTML e CSS são as bases de qualquer interface web. Antes de qualquer framework, é com eles que o navegador entende o que mostrar na tela e como isso deve aparecer para o usuário.


O HTML é responsável pela estrutura da página. Ele descreve o conteúdo e o significado de cada parte. Textos, títulos, parágrafos, imagens, links, formulários e tabelas existem porque o HTML define esses elementos. O navegador lê o HTML como um documento estruturado, não como algo visual. Ele entende o que é um título, o que é um parágrafo, o que é uma lista, independentemente de como isso será exibido.


Já o CSS cuida da aparência. Ele define cores, tamanhos, espaçamentos, fontes, alinhamentos e posicionamento dos elementos. Essa separação é um conceito central da web. O mesmo HTML pode ter visuais completamente diferentes apenas trocando o CSS. Da mesma forma, um layout pode ser reutilizado para várias páginas que possuem conteúdos distintos. Isso torna o desenvolvimento mais organizado e a manutenção muito mais simples.


Quando você usa frameworks como Django ou Flask, isso não muda. O backend gera ou entrega HTML, mas o navegador continua interpretando HTML e CSS da mesma forma. Frameworks ajudam a organizar, automatizar e integrar dados, mas não substituem esses fundamentos.



Estrutura do HTML​

Abaixo podemos conferir a estrutura padrão de um documento HTML5:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Título da Página</title>
  </head>

  <body>
  
      <h1>Olá, mundo!</h1>
      <p>Este é um documento HTML5 básico.</p>
  
  </body>
</html>

A meta viewport é uma configuração usada para controlar como a página é exibida em dispositivos móveis, como celulares e tablets. Ela diz ao navegador qual deve ser a largura da página e como o conteúdo deve ser escalado.


Sem a meta viewport, navegadores móveis assumem que a página foi feita para desktop. O resultado é que o site fica "afastado", pequeno, exigindo zoom manual para ler.



Atributos e Classes​

Os atributos são informações adicionais que colocamos em uma tag para descrever ou modificar o comportamento daquele elemento. Eles funcionam como propriedades. Enquanto a tag define o que o elemento é, o atributo define como ele se comporta ou qual característica ele possui.


Um atributo sempre aparece dentro da tag de abertura e normalmente segue o padrão nome e valor. Com eles, você consegue definir desde um link de destino até regras de acessibilidade, comportamento em formulários ou identificação de elementos.



ID e Class​

Entre os atributos mais importantes estão id e class, porque eles criam uma ponte direta entre o HTML, o CSS e o JavaScript.


O atributo id serve para identificar um elemento de forma única dentro da página. Ele representa um identificador exclusivo. Isso significa que não pode existir dois elementos com o mesmo id no mesmo documento HTML.


O id é usado quando você precisa apontar para um elemento específico, seja para aplicar um estilo único, manipular via JavaScript ou criar links internos na página.


Já o atributo class serve para agrupar elementos que compartilham o mesmo comportamento ou visual. Diferente do id, uma classe pode ser reutilizada quantas vezes for necessário. Vários elementos podem ter a mesma classe, e um mesmo elemento pode ter várias classes ao mesmo tempo. Isso torna o class a principal ferramenta para estilização e organização visual com CSS.


Identificando um único elemento:

<h1 id="titulo">Meu site</h1>

Agrupando vários elementos:

<p class="texto">Primeiro texto</p>
<p class="texto">Segundo texto</p>

O id é único por elemento, já a class pode ser repetida.

<div id="menu" class="container">
  <a class="link">Início</a>
  <a class="link">Contato</a>
</div>


Style​

O style é um atributo usado para aplicar CSS direto no elemento, na própria tag. Ele serve para definir aparência sem usar arquivo CSS externo.


Use style apenas para testes rápidos ou casos muito específicos. No dia a dia, o correto é usar um CSS externo.

<p style="color: red;">Texto vermelho</p>

Aqui, o style está aplicando a regra CSS color: red somente nesse parágrafo. Segue outro exemplo:

<div style="background-color: lightgray; padding: 10px;">
  Caixa com fundo cinza
</div>

Podemos aplicar CSS de duas formas, a primeira é usando a tag <style>, normalmente dentro do <head>, onde escrevemos regras CSS que valem para vários elementos.


A segunda é usando o atributo style diretamente na tag HTML, informando a tag e o CSS ali mesmo. Exemplo usando o atributo style:

<p style="color: blue; font-size: 16px;">
  Texto azul
</p>

Nesse caso, o CSS é aplicado diretamente naquele elemento, sem precisar criar uma regra dentro da tag <style> ou em um arquivo .css. Isso significa que, ao invés de escrever algo como:

<style>
  p {
    color: blue;
    font-size: 16px;
  }
</style>

Podemos escrever o CSS na própria tag. É importante entender que o atributo style aceita as mesmas propriedades do CSS, apenas escritas como texto dentro da tag HTML.


Apesar de funcionar, essa forma é indicada apenas para casos simples ou testes rápidos, porque dificulta a organização e o reaproveitamento do código.



Headings​

Os Headings são os títulos de conteúdo, eles servem para organizar o texto, indicar hierarquia e dar significado à estrutura da página. Eles dizem ao navegador, aos mecanismos de busca e às tecnologias de acessibilidade "o que é mais importante" dentro do conteúdo.


O HTML possui seis níveis de headings, que vão do mais importante ao menos importante.

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

O <h1> representa o título principal da página. Ele define o assunto central do documento. Em uma página bem estruturada, normalmente existe apenas um <h1>.


Os headings seguintes, <h2> até <h6>, representam subtítulos, cada um aprofundando o nível anterior. Um <h2> é um tópico dentro do assunto principal. Um <h3> é um subtópico do <h2>, e assim por diante.


Essa hierarquia funciona como um índice de livro.

O <h1> seria o título do livro. O <h2> seriam os capítulos. O <h3> seriam as seções dentro dos capítulos. Os níveis seguintes refinam ainda mais o conteúdo.


Os headings também são essenciais para acessibilidade. Leitores de tela usam os headings para permitir que o usuário navegue pelo conteúdo como se estivesse pulando capítulos de um livro.


Em termos de organização, pensar em headings como capítulos e seções ajuda a escrever HTML mais claro, mais fácil de manter e mais correto semanticamente.