Fala, dev! Agora que você já passou pela seção básica de HTML, você já tem a base para entender o esqueleto da grande maioria dos websites da Internet. Nós já dissecamos a anatomia perfeita de um documento estudando as principais tags base (<html>, <head> e <body>).
Agora, vamos seguir em frente e colocar a mão na massa com o conteúdo real da página. Afinal, um site sem texto é só uma tela em branco. Neste tutorial do nosso curso de HTML, vamos aprender a escrever e formatar textos do jeito certo.
Sim, aprender a escrever! Inserir textos direto no código é bem diferente de usar o bloco de notas. Ou você achou que era só sair digitando e dando "Enter" igual no Microsoft Word?
Um Site Não é um Editor de Texto (O Colapso do Espaço em Branco)
Como pular linha ou criar parágrafos no HTML? Resposta Direta: O HTML ignora quebras de linha manuais (tecla Enter). Para forçar o texto a ir para a linha de baixo, usamos a tag de quebra <br> (Break Row). Já para organizar blocos de texto inteiros com espaçamento semântico, usamos a tag de parágrafo <p> e seu fechamento </p>.
Se você acompanhou nossos tutoriais de HTML até aqui, já sacou que o "L" da sigla significa Language (Linguagem). É a forma como você "conversa" com o navegador (o Google Chrome, o Firefox, etc.). Se você não avisar ao navegador exatamente o que você quer fazer através de tags, ele vai fazer as coisas do jeito dele.
Existe um conceito técnico no Front-End chamado Whitespace Collapse (Colapso de Espaços em Branco). Isso significa que, não importa se você der 1 ou 50 "Enters" no seu código-fonte, o navegador vai esmagar tudo isso e transformar em um único espacinho vazio na tela. Confuso? Vamos provar isso na prática.
O Teste Prático: Cavalo de Fogo
Vamos pegar a letra da música de abertura daquele antigo desenho clássico, o "Cavalo de Fogo". Em um editor de textos (Word ou Bloco de Notas), você escreveria perfeitamente assim:
No meu sonho eu já vivi
Um lindo conto infantil
Tudo era magia,
Era um mundo fora do meu
E ao chegar desse sono acordei
Foi quando correndo eu vi
Um cavalo de fogo aliMas e se a gente simplesmente jogar isso dentro da tag <body> do nosso HTML, dando os Enters no teclado bonitinho? O código ficaria assim:
<!DOCTYPE html>
<html>
<head>
<title>Letra - Cavalo de Fogo</title>
</head>
<body>
No meu sonho eu ja vivi
Um lindo conto infantil
Tudo era magia,
Era um mundo fora do meu
E ao chegar desse sono acordei
</body>
</html>Agora salve esse código em um arquivo .html e abra no navegador. Você verá que o resultado ficou da seguinte maneira:
"Nossa, que bagunça!" — Você deve estar pensando.
Por que está tudo na mesma linha? O que ocorreu? O computador ficou doido? Não, é apenas a regra do HTML agindo. Para avisar à página que ela deve quebrar a linha ou formar um bloco de texto isolado, usamos as tags <br> e <p>.
Quebras de linha em HTML - A tag `<br>`
A tag <br> vem da palavra inglesa break (quebra). Ela é o equivalente a você apertar a tecla "Enter" no Word. Quando o navegador (o renderizador da DOM) lê essa tag, ele empurra o resto do texto imediatamente para a linha de baixo.
🛠️ Curiosidade Técnica: <br> ou <br />?
Diferente das outras tags, o break é uma tag vazia (self-closing tag). Ela não tem conteúdo dentro dela, então ela não precisa ser fechada (não existe </br>). Na época do XHTML (uma versão mais antiga e rigorosa), éramos obrigados a escrever <br /> com essa barra no final. Hoje, com o HTML5 moderno, você pode escrever apenas <br> que está 100% correto e aprovado pela MDN Web Docs!
Vamos corrigir as estrofes da nossa música adicionando a tag de quebra de linha:
Foi quando correndo eu vi<br>
Um cavalo de fogo ali<br>
Que tocou meu coracao<br>
Quando me disse, entao<br>
Que um dia rainha eu seriaUm cavalo de fogo ali
Que tocou meu coracao
Quando me disse, entao
Que um dia rainha eu seria
Bem melhor, não? A música tomou forma.
Estruturar texto é só o primeiro passo. E o Design do site?
Aprender tags isoladas não constrói a carreira de um Front-End. O que separa um amador de um Webmaster é dominar como o HTML se conecta com o poder visual do CSS3 (Grid, Flexbox e Responsividade). Criamos um material definitivo para você estudar offline e dominar a criação de sites profissionais do absoluto zero.
"Sempre que eu tentava colocar um texto do lado de uma imagem, meu site quebrava inteiro. A didática dessa apostila me fez entender a lógica da Box Model e do CSS de um jeito muito fácil. Valeu cada centavo!"
— Ricardo, Analista Front-End.
A Gambiarra Proibida e a Tag de Parágrafo `
`
Se você notar bem o texto original da música, existem separações claras (estrofes). São "parágrafos" que possuem um espaçamento maior entre eles do que uma simples linha normal.
Como resolveríamos isso? Um programador preguiçoso poderia simplesmente dar dois "BRs" seguidos, assim: <br><br>. Visualmente, isso iria jogar o texto duas linhas pra baixo, dando a ilusão de um parágrafo. Mas isso é o que chamamos no mercado de Gambiarra (ou Código Sujo).
⚠️ Atenção com as Boas Práticas do Mercado
Nunca use dezenas de tags <br> para empurrar um texto para baixo ou tentar centralizar as coisas na base da força bruta. A tag BR foi feita apenas para quebras poéticas (como letras de música ou endereços postais). Se você precisa de distanciamentos e parágrafos reais, o HTML tem uma tag específica para isso.
Como usar a Tag de Parágrafo (`<p>` e `</p>`)
Sempre que quisermos que um trecho de texto seja lido como um bloco lógico e isolado, devemos envolver esse texto usando as tags <p> (abre parágrafo) e </p> (fecha parágrafo). O navegador, ao ver isso, automaticamente coloca margens em cima e embaixo (comportamento de um Block-Level Element).
Veja como ficaria o nosso código HTML definitivo, totalmente limpo, semântico e formatado para ser lido no site:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Letra - Cavalo de Fogo</title>
</head>
<body>
<!-- O título vira um parágrafo isolado -->
<p><strong>Cavalo de Fogo (Abertura)</strong></p>
<!-- O p agrupa o bloco. O br quebra apenas a linha interna -->
<p>
No meu sonho eu já vivi<br>
Um lindo conto infantil
</p>
<p>
Tudo era magia,<br>
Era um mundo fora do meu<br>
E ao chegar desse sono acordei
</p>
</body>
</html>Cavalo de Fogo (Abertura)
No meu sonho eu já vivi
Um lindo conto infantil
Tudo era magia,
Era um mundo fora do meu
E ao chegar desse sono acordei
Olha a elegância desse resultado! Usar o <p> diz ao Google exatamente onde começa e onde termina uma ideia, o que é absurdamente importante para o SEO do seu futuro site.
💡 O Desafio Prático da Aula
Missão: Abra o seu bloco de notas ou VS Code e crie um site com a letra da sua música favorita.
Use parágrafos <p> para isolar os blocos de refrão, e quebras de linha <br> para as frases cantadas. Deixe seu código semântico. Terminada esta lição de HTML, dê uma pausa, prepare um café e comemore seu progresso!
🎯 O Que Estudar a Seguir?
Dominar parágrafos e quebras de linha é o ABC da estruturação web. Para elevar o nível do seu documento, continue sua jornada lendo estes tutoriais essenciais:
- Formatação de Textos — Aprenda a usar as tags de negrito (
<strong>) e itálico (<em>) para destacar palavras chave. - Hierarquia de Títulos (H1 ao H6) — Entenda como estruturar cabeçalhos profissionais para o Google rankear seu site nas buscas.
- Listas Ordenadas e Desordenadas — Pare de usar texto corrido e aprenda a criar marcações visuais elegantes (bullet points).
❓ Perguntas Frequentes (FAQ)
Posso usar vários <br> para criar um espaço em branco grande no site?
<br> serve estritamente para quebrar linhas que fazem parte de um mesmo bloco lógico de texto. Se você precisa criar distanciamento entre blocos, imagens ou seções, você deve utilizar as propriedades margin ou padding do CSS.
Qual a diferença entre usar a tag <p> e a tag <span>?
<p> é um elemento block-level (bloco), o que significa que ele ocupa toda a largura da tela e sempre joga o próximo elemento para a linha de baixo. Já o <span> é um elemento inline (em linha), usado geralmente para mudar a cor ou estilo de apenas uma palavra específica no meio de uma frase, sem causar quebra de linha.
O HTML5 ainda aceita o <br /> com a barra no final?
<br> quanto <br /> sem problemas visuais. No entanto, o padrão oficial do HTML5 indica que a barra final para tags vazias é opcional. Muitos desenvolvedores recomendam usar apenas <br> por gerar um código mais limpo e rápido de digitar.
Nenhum comentário:
Postar um comentário