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:
<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.
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."
<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.
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).
<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?
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?
<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?
<strong>, <em> e <ins>).
Nenhum comentário:
Postar um comentário