Como Colocar Texto em Negrito, Itálico e Sublinhado no HTML

<< Aula anterior | Sumário do Curso | Próxima aula >>

Fala, dev! Agora que já aprendemos como colocar trechos de texto dentro de um mesmo parágrafo e como quebrar linhas através do artigo passado sobre as tags <p> e <br>, chegou a hora de dar vida às palavras.

Um texto puramente reto e sem destaques é cansativo de ler (e o Google também não gosta muito). Neste tutorial do nosso curso de HTML, vamos mergulhar na formatação de textos.

Você vai aprender, na prática, como deixar uma palavra em negrito, como colocar uma citação em itálico e como chamar a atenção com o texto sublinhado. E mais do que apenas código, vamos te ensinar como o Google interpreta cada uma dessas marcações para o SEO do seu site.

Texto em Negrito no HTML: As Tags `<b>` e `<strong>`

Como deixar um texto em negrito no HTML? Resposta Direta: A forma mais básica de aplicar negrito é usando a tag <b> (de Bold). No entanto, para o HTML5 e para o SEO moderno, a forma correta e semântica de destacar uma palavra importante em negrito é utilizando a tag <strong>.

Para fazer com que um trecho de um texto fique com aquela fonte mais "grossa" e escura, devemos envolver a palavra ou frase que queremos destacar. Antigamente, a única forma de fazer isso era usando a tag <b>.

A letra "b" vem do inglês bold, que significa negrito. Veja o exemplo:

Copiar HTML

<p>O HTML não é uma linguagem de programação, é uma linguagem de <b>marcação</b>.</p>

O HTML não é uma linguagem de programação, é uma linguagem de marcação.

O Segredo do SEO: A Guerra entre `<b>` vs `<strong>`

Como nosso portal também ensina você a rankear bem seus sites no Google, você precisa entender um conceito avançado: a diferença entre estilo visual e semântica.

A tag <b> deixa o texto visualmente em negrito na tela do usuário, mas para os robôs do Google (os crawlers), ela não significa absolutamente nada. É apenas "tinta digital".

Se você quer avisar ao algoritmo de busca que aquela palavra é a palavra-chave principal do seu artigo e que ela carrega uma "forte importância" (Strong Importance), você deve usar a tag <strong>.

🛠️ Dica de Ouro de um Webmaster

Use o negrito (seja b ou strong) com parcimônia. Se você colocar o texto inteiro em negrito, o Google vai achar que você está fazendo keyword stuffing (tática de spam) e pode punir o rankeamento da sua página. Destaque apenas o que realmente importa para a leitura dinâmica do seu usuário.

Entender tags de texto é fácil. E o Layout Completo?

Decorar tags como <strong> é apenas o começo. O verdadeiro Front-End sabe pegar esses textos e alinhá-los perfeitamente usando Flexbox, CSS Grid e media queries para celular. Criamos um material premium para você estudar offline, sem distrações e dominar a criação visual de sites do zero absoluto.

"Sempre que eu tentava estilizar meus textos, a página inteira quebrava. A didática dessa apostila me fez entender a lógica do CSS de forma absurda!"
— Marcos, Desenvolvedor Júnior.

📚 Baixar a Apostila Digital (PDF) 📖 Quero o Livro Físico (Entregue em Casa)

Texto em Itálico no HTML: As Tags `<i>` e `<em>`

O itálico é aquele efeito que faz a fonte ficar levemente "inclinada" para a direita, imitando uma caligrafia humana cursiva. No mundo editorial, ele tem funções muito específicas.

A tag tradicional para isso é a <i> (que vem da palavra italic). O itálico costuma ser usado para:

• Citar nomes de obras (livros e filmes):
  "O Senhor dos Anéis é a melhor trilogia do cinema."
• Destacar uma fala ou citação:
  "O HTML é a base da internet", disse o professor Tim Berners-Lee.
• Escrever jargões ou termos estrangeiros:
  "Sempre faça o commit do seu código."

Exemplo de Código

<p>A sigla HTML significa <i>HyperText Markup Language</i>.</p>

A sigla HTML significa HyperText Markup Language.

⚠️ A Atualização Semântica do Itálico (`<em>`)

A mesma regra do negrito se aplica aqui. A tag <i> apenas entorta a letra. Se você quiser que os leitores de tela (acessibilidade para deficientes visuais) e o Google entendam que aquela palavra tem uma ênfase especial no tom de voz da frase, você deve utilizar a tag moderna <em> (de Emphasis).

🚀 Você quer dominar não apenas HTML, mas toda a Programação?

Estudar lendo no navegador é bom, mas ter a biblioteca completa dos maiores clássicos da programação no seu computador é outro nível. Se você é sério sobre sua carreira dev, conheça o nosso pacote definitivo.

⚡ Acessar o Mega Pack Completo de Apostilas

Texto Sublinhado (Underline): A Tag `<u>` e o Alerta Vermelho

Para criar aquele clássico risco embaixo da palavra, a tag original do HTML era a <u> (que vem do inglês underlined).

Código Simples

<p>Este texto está <u>sublinhado</u>.</p>

Este texto está sublinhado.

🚨 O GRANDE ALERTA DO UX DESIGN: Na internet, 99% dos usuários foram condicionados a acreditar que se um texto está sublinhado, ele é um link clicável (como os famosos links azuis). Se você sublinhar um texto que não é um link usando a tag <u>, seu usuário vai tentar clicar, vai se frustrar e vai achar que o seu site está quebrado.

Por isso, a tag <u> caiu muito em desuso. Se você precisa marcar um texto como "texto inserido" ou editado (como em revisões de artigos), o HTML5 recomenda o uso da tag semântica <ins> (Inserted Text), que visualmente também gera um sublinhado, mas carrega significado estrutural.

💡 O Desafio Prático da Aula (Aninhamento de Tags)

Como já estudamos o conceito de tags aninhadas no começo do nosso curso, você já sabe que podemos colocar uma tag dentro da outra (desde que você feche de trás para frente corretamente).

Missão: Abra seu editor de código e tente reproduzir exatamente os 7 comportamentos visuais abaixo usando a combinação das tags fortes (<strong>, <em> e <ins>):

Eu sei criar site

Adoro criar sites

Estou aprendendo a criar um website

Estou gostando muito de HTML

Como ser um webmaster?

Como criar um bom site?

Resposta: Programação Progressiva

---

🎯 O Que Estudar a Seguir?

Dominar os destaques de texto é crucial para guiar a leitura do seu usuário. Agora que as letras estão prontas, é hora de estruturar o fluxo de navegação do site! Siga para estes artigos:

• Como Criar Links no HTML (Tag <a>) — A aula mais importante da internet. Aprenda a conectar páginas.
• Inserindo Imagens no Site — Saiba como carregar fotos e otimizá-las com o atributo Alt (SEO).
• Listas Não Ordenadas (ul, li) — Pare de usar br e aprenda a criar menus e marcadores da forma certa.

---

❓ Perguntas Frequentes (FAQ)

Posso usar CSS em vez das tags <b> ou <i> para formatar o texto?

Sim e, na maioria das vezes, deve! Se o objetivo for puramente visual (Design System da página), a recomendação moderna é usar as propriedades CSS font-weight: bold; e font-style: italic; dentro de uma tag neutra como o <span>. As tags do HTML (especialmente <strong> e <em>) devem ser reservadas apenas quando o termo realmente possui importância semântica para o leitor e para o SEO.

O Google penaliza se eu usar muitas tags <strong> na página?

Sim. Isso é uma tática antiga conhecida como Keyword Stuffing. Se o algoritmo detectar que dezenas de parágrafos inteiros estão marcados com <strong> apenas para tentar manipular o motor de busca, a autoridade da sua página pode cair. Use a tag strong como você usaria um marcador de texto fluorescente num livro: apenas nas palavras e expressões mais essenciais da frase.

As antigas tags <b>, <i> e <u> foram removidas no HTML5?

Não foram removidas (depreciadas), os navegadores modernos ainda as leem perfeitamente por questões de compatibilidade com sites antigos. No entanto, o HTML5 redefiniu o propósito delas. Elas deixaram de ser "tags de estilo visual" para se tornarem "tags de conveniência", mas o mercado (W3C) recomenda fortemente a migração para as versões semânticas (<strong>, <em> e <ins>).

<< Aula anterior | Sumário do Curso | Próxima aula >>

Como Pular Linha e Criar Parágrafos no HTML: Tags < br > e < p >

<< Aula anterior | Sumário do Curso | Próxima aula >>

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:

Texto Puro

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 ali

Mas 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:

HTML Ruim ❌

<!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:

Uso do BR ✅

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 seria

Foi quando correndo eu vi
Um 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.

📚 Baixar a Apostila Digital (PDF Completo) 📖 Quero o Livro Físico (Versão Impressa)

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:

HTML Profissional 🚀

<!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?

Não! Isso é considerado uma má prática no Front-End moderno. A tag <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>?

A principal diferença está no comportamento visual (Display). O <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?

Sim, aceita. Os navegadores modernos são flexíveis e lerão tanto <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.

<< Aula anterior | Sumário do Curso | Próxima aula >>

Como Mudar a Cor de Fundo no HTML: Do Antigo bgcolor ao CSS Moderno

<< Aula anterior | Sumário do Curso | Próxima aula >>

No tutorial passado de HTML, explicamos o que é, para que serve e como usar a majestosa tag <body>, usada para abraçar todos os elementos visuais que serão exibidos para o usuário na tela do navegador.

Como fizemos, e vamos continuar fazendo durante todo o nosso curso online grátis de HTML, a regra aqui é prática total! Só ler a teoria, decorar tags como um robô e não ver as coisas acontecendo na tela é chato demais.

Para aprender programação de verdade, temos que pôr a mão na massa. E neste artigo, vamos dar vida ao seu site! Chega daquela tela branca de hospital: vamos ensinar como mudar a cor de fundo de uma página e desvendar a ciência dos códigos hexadecimais no Front-End.

As Cores em HTML e a Matemática Hexadecimal

Como definir cores no HTML? Resposta Direta: Na web, as cores são formadas pelo sistema RGB (Red, Green, Blue) e são escritas em códigos hexadecimais. Um código hexadecimal começa com o símbolo # seguido de 6 caracteres (números de 0 a 9 e letras de A a F), onde #000000 é preto (ausência de luz) e #FFFFFF é branco puro.

Obviamente, você já usou algum processador de texto, como o Word, ou brincou no Paint e Photoshop. Lá, você clica numa paletinha e a mágica acontece. Mas por trás dos panos (e no código HTML), o computador precisa de um endereço matemático exato para gerar essa cor no monitor.

Existem mais de 16 milhões de cores diferentes disponíveis para o seu site.

Para selecionar uma dessas cores, usamos um código de 6 dígitos que usa o sistema de contagem "Hexadecimal" (Hexa = 16). Diferente do nosso sistema decimal do dia a dia (que vai de 0 a 9), esse sistema tem 16 "números" disponíveis:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

Veja os exemplos das cores puras mais clássicas da web:

• Preto Absoluto: #000000
• Branco Neve: #FFFFFF
• Vermelho Puro: #FF0000
• Verde Puro: #00FF00
• Azul Puro: #0000FF

🛠️ Curiosidade: Eu preciso decorar isso?

"E agora? Pensei que HTML era fácil! Vou ter que decorar 16 milhões de códigos?" Claro que não! Nem os desenvolvedores sêniores decoram isso. Nós usamos ferramentas de "Color Picker" (Seletores de Cores). Você pode consultar paletas completas na Tabela de Cores da Wikipédia ou simplesmente digitar "Color Picker" no Google.

O Atributo bgcolor: Como fazíamos antigamente (Atenção!)

Vamos fazer uma viagem no tempo. Nos primórdios da internet, lá nos anos 90 e início dos anos 2000, nós usávamos atributos de estilo direto nas tags HTML.

A sintaxe clássica e antiga para alterar o plano de fundo (background) era usar o atributo bgcolor dentro da tag <body>. Ficava exatamente assim:

HTML Antigo ❌

<!-- Exemplo de código obsoleto (Não faça isso em projetos novos!) -->
<body bgcolor="#FF0000"> 
    Este site tem o plano de fundo vermelho!
</body>

Isso funcionava? Sim! Inclusive, se você testar hoje, a maioria dos navegadores ainda vai ler por questão de retrocompatibilidade. Mas existe um grande problema: o atributo bgcolor está obsoleto (deprecated) no HTML5.

O HTML foi criado para ser semântico (dizer o que as coisas são). Ele não foi feito para ser maquiador. Misturar o design (cores) junto com a estrutura (tags) cria o que chamamos de Spaghetti Code, deixando a manutenção do site um pesadelo e prejudicando severamente o seu SEO no Google.

Pare de escrever código que o Google odeia!

Aprender tags obsoletas é perda de tempo. O mercado exige HTML5 Semântico e CSS3 puro. Compilamos as melhores práticas profissionais, macetes de Front-End e projetos práticos em um único material para você estudar offline e evoluir de iniciante a Webmaster.

"Eu usava tags velhas achando que tava abafando. Essa apostila limpou meu código e me ajudou a entender de vez como separar o HTML do CSS. Valeu cada centavo!"
— Mariana, Desenvolvedora Front-End.

📚 Baixar a Apostila Digital (PDF Completo) 📖 Quero o Livro Físico (Versão Impressa)

O Jeito Certo: Como mudar o Fundo usando CSS moderno (background-color)

Para não ser engolido pela evolução da Web, nós delegamos a tarefa das cores para o CSS (Cascading Style Sheets). O CSS é a linguagem de estilo que maquia o seu HTML.

Nós podemos aplicar CSS de várias formas, mas a maneira mais simples para iniciantes (o CSS Inline) é usar o atributo global style e chamar a propriedade background-color. Veja o código de um site moderno e profissional:

HTML5 + CSS ✅

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Aprendendo Cores - Programação Progressiva</title>
</head>

<!-- Chamamos o CSS dentro do atributo style da tag body -->
<body style="background-color: #2563eb;"> 

    <h1 style="color: #ffffff;">Bem-vindo ao meu site Azul!</h1>
    <p style="color: #e2e8f0;">Agora sim, estamos programando do jeito certo.</p>

</body>
</html>

Ao salvar e abrir esse código no seu navegador, a renderização oficial que aparecerá na sua tela será exatamente esta:

Bem-vindo ao meu site Azul!

Agora sim, estamos criando sites do jeito certo.

Nomes por Extenso (Named Colors)

Se você quiser criar um protótipo rápido e estiver com preguiça de procurar os códigos hexadecimais, saiba que o HTML/CSS entende o nome das cores em inglês. São cerca de 140 cores nomeadas oficialmente que você pode usar.

Ao invés de digitar: style="background-color: #FF0000;"

Você pode digitar simplesmente: style="background-color: red;"

Exemplos de outras cores prontas para uso imediato: Green, Blue, Pink, Yellow, Black, Maroon, Tomato, Cyan.

💡 Exercício e Desafio: A Cores do Texto

Missão 1: Crie um "Site Restart". Deixe o fundo de uma cor absurdamente gritante (como yellow ou magenta) usando a técnica de CSS background-color.

Desafio Mestre: Antigamente, na mesma época do bgcolor, existia um atributo chamado text que alterava a cor das letras do site todo. Mas ele também "morreu". Apenas sabendo que a propriedade CSS que muda a cor das letras se chama apenas color (como mostramos no código verde acima), você seria capaz de criar um site que tenha o fundo inteiramente preto (#000000) e os textos totalmente brancos (#FFFFFF)? Teste no seu bloco de notas!

---

🎯 O Que Estudar a Seguir?

Dominar o plano de fundo é só o começo da jornada criativa. Para deixar suas páginas como sistemas de alto nível, siga para os próximos guias:

• COMO USAR IMAGENS DE FUNDO — Aprenda a colocar uma foto como plano de fundo da página.
• INTRODUÇÃO À FORMATAÇÃO DE TEXTO — Tags de negrito, itálico e marcação para deixar seu texto impecável.
• CURSO DE JAVASCRIPT PROGRESSIVO — Quer fazer o fundo do site piscar ou mudar de cor ao clicar em um botão? O JavaScript é quem dá essa inteligência!

---

❓ Perguntas Frequentes (FAQ)

Posso usar RGB ou RGBA ao invés de Hexadecimal?

Sim! O CSS moderno aceita valores RGB, como rgb(255, 0, 0) para vermelho. A grande vantagem é que você pode usar o RGBA, onde a letra "A" (Alpha) adiciona opacidade (transparência) na cor. Por exemplo: rgba(255, 0, 0, 0.5) geraria um fundo vermelho 50% transparente.

Se o atributo bgcolor parou de ser usado, por que os sites velhos ainda funcionam?

Isso se deve à "Retrocompatibilidade" dos navegadores (Google Chrome, Firefox). O consórcio W3C decreta que tags ou atributos estão obsoletos para não serem usados em novos projetos, mas os navegadores os mantêm vivos internamente para que sites construídos em 1999 não "quebrem" ao serem acessados hoje.

Como colocar um efeito degradê (Gradiente) no fundo do site?

O código hexadecimal comum e o velho bgcolor só suportam cores chapadas (sólidas). Para criar um degradê moderno, você precisa usar a função linear-gradient() no CSS. Exemplo: background: linear-gradient(to right, red, blue); fará a cor do seu fundo transitar suavemente do vermelho na esquerda para o azul na direita.

<< Aula anterior | Sumário do Curso | Próxima aula >>

A Tag < Body > no HTML: O Que É e Como Criar o Corpo do Seu Site

<< Aula anterior | Sumário do Curso | Próxima aula >>

Quem já codou "na unha" entenderá a emoção da primeira tag body renderizada.

Para finalizar os estudos básicos de arquitetura do nosso curso de HTML, vamos apresentar a majestosa tag <body>. Ela, junto com a tag <html> e a tag <head>, formam a Santíssima Trindade das tags: a estrutura básica e essencial de absolutamente qualquer página que existe na Internet.

Ao final deste tutorial de Front-End, você fará um site completo (embora simples), pois já irá dominar como o navegador lê o DOM (Document Object Model) e como as informações são renderizadas na tela do usuário.

Como você irá entender como um site é feito, como funciona a semântica e já terá criado um projeto prático, já poderá bater no peito e se considerar um verdadeiro Webmaster! 🚀

A tag <body> - O corpo visual de um site

O que é a tag body? Resposta Direta: A tag body no HTML é o elemento estrutural onde fica todo o conteúdo visível de um site. Enquanto a tag head guarda as configurações ocultas, tudo o que o usuário interage, lê e clica (como textos, imagens, links e vídeos) deve ser inserido obrigatoriamente dentro da tag <body>.

Vamos fazer uma analogia pedagógica clássica: imagine que um site é como um livro que você pega em uma biblioteca.

• A tag <html> seria a capa (frente e verso). Ela define onde o livro começa e onde termina.
• A tag <head> seria a ficha catalográfica e o índice. São informações para a bibliotecária (no nosso caso, o robô do Google e os navegadores) saber qual o título, qual o idioma e qual a categoria do livro usando meta tags cruciais de SEO. Quem pega o livro na mão não lê a ficha catalográfica para se divertir.

Pronto, temos a capa e as informações técnicas. O que está faltando?

O principal: A História! O conteúdo!

É aí que entra a tag <body>. Como o próprio nome em inglês sugere, ela define o "corpo". Tudo o que você está lendo nesse exato momento — este texto, os links, a imagem lá em cima, as cores — está flutuando majestosamente dentro da tag <body> do código-fonte do Programação Progressiva.

Domine a Estrutura da Web sem depender da internet!

Chega de ficar travado caçando pedaços de código na web. A tag body é só a ponta do iceberg. Criamos um material premium para você estudar Front-End offline, construir seus próprios sites do zero e dominar as tecnologias que pagam os melhores salários do mercado.

"Estava travado tentando entender a semântica do HTML5 e como encaixar o CSS no body. Essa apostila simplesmente salvou os meus freelas!"
— Carlos, Desenvolvedor Front-End.

📚 Baixar a Apostila Digital Completa (PDF) 📖 Prefere ler no papel? Comprar o Livro Físico

Como usar e onde colocar a tag <body>?

A tag body está aninhada (dentro) da tag <html>, posicionada logo após o fechamento da tag <head>. Assim como a grande maioria das tags na linguagem de marcação, ela possui abertura e fechamento estritos:

<body> e </body>

Se antes, nos primórdios da web, as pessoas escreviam texto solto no arquivo (gerando o que chamamos de Spaghetti Code), hoje você precisa encapsular tudo com semântica. Então, é com muito prazer e orgulho que apresento para você o código Boilerplate (molde padrão) HTML5 de um site completo, correto e bem estruturado!

HTML5

<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <title>Programação Progressiva - Aprendendo a tag body</title>
    <meta name="description" content="Meu primeiro site completo usando as tags html, head e body.">
</head>

<body>
    <h1>Olá, Mundo da Programação!</h1>
    <p>Este é meu primeiro código completo de um site. O primeiro de muitos!</p>
    <p>Tudo que eu digitar aqui dentro, o usuário poderá ver na tela do navegador.</p>
</body>

</html>

Se você salvar esse código em um arquivo .html e abrir no seu navegador (Chrome, Edge, Firefox), ele não mostrará o código em si. O navegador irá "renderizar" o resultado visual, que ficará exatamente assim na sua tela (Viewport):

Olá, Mundo da Programação!

Este é meu primeiro código completo de um site. O primeiro de muitos!

Tudo que eu digitar aqui dentro, o usuário poderá ver na tela do navegador.

🛠️ Curiosidade de Desenvolvedor Sênior

Você sabia que o navegador perdoa erros? Se você esquecer de digitar a tag <body> e simplesmente jogar um texto no HTML, navegadores modernos como o Chrome criarão a tag body artificialmente por trás dos panos (no inspetor de elementos) para tentar consertar o seu erro e exibir o site mesmo assim! Mas claro, depender disso é uma péssima prática.

Quais as funções modernas da tag body? (Antes vs. Depois)

Quando pensamos em "conteúdo", logo nos vem à mente blocos de texto. Sim, os textos (geridos pelas tags <p> e <h1> a <h6>) são a base do SEO On-Page e da informação na internet. Porém, conteúdo não se limita a letras.

Imagens, vídeos (<video>), formulários, animações... tudo isso vive dentro do body. E é aqui que mora a grande revolução que separa os amadores dos Webmasters profissionais.

A Treta da Estilização (Não suje o seu HTML)

Antigamente (no obsoleto HTML 4), era muito comum usarmos atributos de aparência direto dentro da tag body, assim:

❌ <body bgcolor="black" text="white"> (Prática banida e ultrapassada)

Hoje, isso é um crime inafiançável na programação Front-End. O HTML serve apenas para marcação estrutural. Quem cuida de deixar a página bonita, alterar a cor de fundo, mudar a fonte e fazer o site se adaptar a celulares (Responsividade) é o nosso amigo CSS (Cascading Style Sheets).

Ao longo do nosso curso, você verá que o body se tornou um "container" gigante. Hoje, dentro dele, nós inserimos outras tags semânticas do HTML5 para dividir o site em partes lógicas:

• <header> - Para colocar o logotipo e o menu de navegação.
• <main> - Onde fica o conteúdo principal e único da página.
• <footer> - O rodapé do site, com os direitos autorais.

💡 Hora de Praticar: Exercício de HTML

Sujar a mão de código é o único jeito de aprender! Crie um site completo usando seu editor de código (como o VS Code ou Bloco de Notas). Siga as regras:

• Estruture as tags fundamentais (!DOCTYPE, html, head, body).
• No Head: Crie as meta tags description e a tag title sobre o seu seriado favorito (Ex: Breaking Bad, The Office).
• No Body: Use uma tag <h1> com o nome da série, faça um parágrafo (<p>) dizendo o porquê de você gostar dela, e insira um link real apontando para o site oficial ou a página da série na Wikipédia!

Idente (organize os espaços) seu código bonitinho. Boa sorte!

---

🎯 O Que Estudar a Seguir?

Você acabou de construir o alicerce do seu conhecimento Front-End. O próximo passo lógico para evoluir seu projeto é garantir uma navegação interna rica e dominar os links lógicos:

• A TAG P PARA PARÁGRAFOS — Aprenda a formatar seus textos corretamente dentro do body.
• INTRODUÇÃO AO CSS — Chegou a hora de dar vida e cores à sua tela branca!
• CURSO DE PHP PROGRESSIVO — O HTML constrói a casca, o PHP cria o cérebro. Aprenda a fazer sites dinâmicos conectados a banco de dados!

---

❓ Perguntas Frequentes sobre a Tag Body (FAQ)

Posso usar mais de uma tag body no mesmo documento HTML?

Não. É terminantemente proibido pelas regras de sintaxe da W3C. Um documento web padrão deve conter apenas uma tag <html>, uma <head> e apenas uma tag <body>. Colocar dois corpos na mesma página quebrará completamente a leitura do seu site pelos navegadores.

Qual a diferença entre as tags Head e Body?

A diferença é a visibilidade. A tag Head guarda os metadados técnicos, links de folhas de estilo e scripts que rodam invisíveis para preparar a página. Já a tag Body encapsula todo o conteúdo gráfico que será renderizado na tela (viewport) e que o usuário final consegue ler, clicar e interagir.

Por que o uso de atributos como bgcolor dentro do body caiu em desuso?

Porque a web evoluiu para o conceito de "Separação de Interesses" (Separation of Concerns). O HTML atual deve ser estritamente semântico (focado em dizer o que as coisas são). Todo o trabalho de design, cores e posicionamento foi delegado ao CSS, deixando os códigos mais limpos, fáceis de manter e incrivelmente mais rápidos para carregar (SEO On-Page).

<< Aula anterior | Sumário do Curso | Próxima aula >>

Como Criar Títulos Otimizados para SEO: A Ciência por Trás do Clique

<< Aula anterior | Sumário do Curso | Próxima aula >>

A escolha de um bom título para o seu site é um dos elementos mais básicos e essenciais para a otimização em termos de SEO. Se o conteúdo do seu site é o coração do projeto, o título é o aperto de mão que você oferece ao Google e aos seus futuros visitantes.

Em nosso curso de HTML estrutural, já ensinamos o que é a tag <title>, sua teoria e onde inseri-la exatamente no código HTML da sua página.

Agora, vestindo o chapéu de Especialista em Marketing, vamos mergulhar neste artigo do nosso curso de SEO na engenharia de atração: como criar títulos magnéticos, otimizá-los e ter uma vantagem esmagadora sobre os concorrentes nos resultados de busca.

Lembrando que caso deseje transformar seus estudos em uma profissão e ganhar dinheiro criando sites otimizados, sugerimos que faça o seguinte curso e obtenha seu certificado de Webmaster:

• Curso de Webmaster (criação de sites HTML) online com certificado

Por que os títulos são tão importantes para um site?

O Título da Página (ou Meta Title) é o texto em azul que aparece primeiramente para os usuários quando eles fazem uma busca no Google. É o fator número um de decisão de clique e um dos principais sinais de relevância para o algoritmo de ranqueamento.

Pense no Google como uma prateleira gigante. O título, junto com a descrição, é a sua única chance de convencer o leitor de que o seu link possui a resposta exata que ele procura. Se você errar a mão criando títulos vagos, quilométricos ou tentando burlar o sistema (spam), o Google não apenas ignorará a sua página, como certamente penalizará seu site.

Embora o ditado diga "não julgue um livro pela capa", na internet isso não se aplica. O usuário julga, sim, pelo título. Para garantir seu tráfego, mapeamos as 10 dicas vitais para a criação de títulos de alta conversão.

1. Resuma e segmente: Especifique o que o usuário vai encontrar

Se a sua página vai falar sobre "sapatos de couro para homens", não coloque somente "Sapatos" ou "Sapatos de couro". Você precisa declarar o assunto (sapatos), a especificidade (de couro), e se possível definir seus leitores (para homens).

Se você colocar apenas "sapatos de couro" e uma mulher que busca modelos femininos clicar, ela vai abrir e sair rapidamente (o que chamamos de Bounce Rate ou Taxa de Rejeição), deixando uma péssima impressão para o Google sobre a qualidade do seu site.

💡 O Paradoxo do Tráfego: Qualidade vs Quantidade

Não tente abraçar o mundo. De que vale ganhar milhões de visitas se 99% delas saírem em dois segundos porque seu título era enganoso? Atrair o público específico e correto é o principal fator de ranqueamento a longo prazo.

2. Escreva títulos completos, mas concisos (Regra dos 60 caracteres)

Você fez um site fantástico. Em uma só página você vai falar de HTML, SEO, JavaScript e CSS. Obviamente, quer descrever tudo isso no seu título.

O problema é: você não vai conseguir. O Google exibe um limite médio de 60 caracteres (depois disso, ele corta e coloca "..." no final). Portanto, não escreva:

❌ "Site com tutoriais incríveis sobre HTML, JavaScript, PHP e CSS, venha aprender tudo sobre criação de sites, clique aqui por favor!"

Isso é amador e não será exibido. Seja cirúrgico e profissional:

✅ "Dicas e Tutoriais: Aprenda tudo sobre HTML, CSS e PHP"

3. Crie títulos únicos (Fuja do Efeito Manada)

Se você escrever títulos genéricos, terá que competir com os maiores portais da internet. O Google prioriza originalidade. Portanto, se você está criando um curso, nunca utilize nomes em formato de silo raso:

• "Aula 01"
• "Aula 02"

Aula de quê? De matemática? De Culinária? O Google não sabe adivinhar. Seja específico e único em cada postagem para não gerar concorrência desnecessária consigo mesmo:

• "Aula de HTML 01 - O que são tags e a estrutura base"
• "Aula de SEO 03 - Como fazer bons títulos para seu site"

Pare de perder tempo garimpando tutoriais. Tenha tudo offline!

O mercado atual exige mais do que apenas HTML. Para criar sites de ponta, você precisa do Back-End e do Front-End andando juntos. Foi pensando nisso que liberamos o Mega Pack Progressivo com todas as nossas linguagens de programação.

"Depois de devorar a apostila de HTML, peguei o Mega Pack. Ter o material de PHP e JS integrado me ajudou a fechar meus primeiros clientes freelancers rápidos!" — Mariana Silva, Dev Full-Stack.

🚀 Baixar o Mega Pack (Todas as Apostilas)

4. Entre na mente do leitor e ofereça o que ele busca

Essa dica passa despercebida até pelos profissionais. O segredo é: as pessoas comuns não pesquisam usando vocabulário técnico complexo.

Ninguém irá procurar no Google: "Como obter conhecimentos técnicos em marcação de hipertexto". Os usuários pesquisam por: "Como criar sites do zero" ou "Apostila de HTML fácil". Guarde o vocabulário "culto" para o seu ego, nos títulos você precisa focar na dor popular e nas intenções de busca diárias.

5. Domine as palavras-chave (Long-Tail e Sinônimos)

Se você usar as palavras mais óbvias, a concorrência será brutal. Faça testes no Google buscando por "tutorial de HTML", "apostila de HTML" e "curso de HTML". Para saber exatamente qual a tendência de tráfego atual, utilize a ferramenta oficial:

🛠️ Dica de Ferramenta: Google Trends

Acesse o Google Trends. É um serviço que mostra gráficos de busca. Lá você notará, por exemplo, se vale mais a pena focar na palavra "Apostila", "Tutorial" ou "Curso" para o seu nicho atual. Não adivinhe, use dados!

6. Rotatividade de Palavras (Evite Canibalização)

Não se prenda a um único sinônimo para o site todo. Se você otimizar 10 artigos apenas para "Tutorial de PHP", vai perder buscas preciosas feitas por quem procurou "Aulas de PHP" ou "Guia de PHP". Varie a sua estratégia de conteúdo, utilizando a linguagem regional dos usuários. Exemplo: um usuário comum não procura por "Instalação do GRUB", mas pesquisa vorazmente por "Como fazer Dual Boot com Windows e Linux".

7. Use as palavras mais fortes primeiro (Front-Loading)

Algoritmos de busca e o olho humano dão extrema prioridade para o lado esquerdo de uma frase. Coloque as suas palavras-chave foco bem no início do seu título.

Ao invés de usar:
❌ "Confira as nossas incríveis e completas **vídeo-aulas de PHP**" (Palavra-chave esquecida no final).

Faça dessa forma:
✅ "**Vídeo-Aulas de PHP**: Curso Completo para Iniciantes"

8. Faça seu marketing (Venda seu peixe)

O resultado do Google é uma verdadeira selva. É cada um lutando pelo seu clique. Desperte curiosidade e utilize gatilhos mentais. Não coloque apenas "JavaScript" no seu título, acrescente o seu diferencial:

• "Curso Gratuito de JavaScript (Do Zero ao Pro)"
• "JavaScript para Iniciantes: Acesse Já"

A Linha Vermelha: O que você NÃO deve fazer

Para fechar nossa aula de SEO técnico, preste muita atenção nas práticas proibidas que garantem a punição do seu site e a exclusão dos motores de busca.

9. Não Minta no Título (Clickbait)

Se você colocar "Tudo sobre CSS3" no título e o usuário entrar e ver apenas um parágrafo sobre cores, ele vai apertar o botão de voltar em menos de dois segundos. O Google detecta esse comportamento (chamado de Pogo-Sticking) e derruba o seu ranqueamento. A promessa do título tem que estar no conteúdo do texto!

10. Não tente Super-Otimizar (Keyword Stuffing)

Um dos erros crônicos de iniciantes é encher o título com repetições visando "forçar" o algoritmo. Por exemplo:

"Curso de HTML, aprenda HTML, aulas de HTML gratuitas, seja mestre do HTML."

Hoje, as Inteligências Artificiais de leitura do Google penalizam fortemente o spam de palavras. Escreva de forma fluida, para seres humanos reais.

---

🎯 O Que Estudar a Seguir?

Após dominar os títulos magnéticos, o próximo passo lógico na sua arquitetura de site é otimizar o restante da página. Siga sua trilha com os seguintes artigos do curso:

• [INSERIR LINK: COMO USAR A META TAG DESCRIPTION] — O parceiro inseparável da tag Title. Aprenda como escrever resumos persuasivos.
• [INSERIR LINK: ARQUITETURA DE LINKS E TEXTOS ÂNCORA] — Veja como distribuir a força do seu SEO pelas páginas internas.

---

❓ Perguntas Frequentes (FAQ)

Por que o Google reescreveu o título da minha página nos resultados de busca?

O Google reescreve títulos dinamicamente quando a sua tag <title> é muito longa (cortada), muito genérica ou tem excesso de palavras-chave. Ele tenta extrair elementos do seu H1 para mostrar algo mais relevante ao usuário. Para evitar isso, crie títulos dentro do limite de 60 caracteres alinhados perfeitamente com a intenção de pesquisa.

Devo colocar o nome da minha marca/site em todos os títulos?

Sim, é excelente para o Branding. A melhor prática do mercado é colocar o nome do seu site no final do título (lado direito), separado por um traço (-) ou pipe (|), garantindo que as palavras-chave principais continuem chamando a atenção no início. Exemplo: Curso de HTML Completo | Programação Progressiva.

<< Aula anterior | Sumário do Curso | Próxima aula >>