HTML Academy · Aula

Parágrafos, em, strong e b, i

Marcar prosa com ênfase semântica e tags de negrito.

Parágrafos, em, strong e b, i é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

O elemento de parágrafo

O elemento  identifica um bloco de texto como um parágrafo:

<p>This is a paragraph of text. Browsers add margin above and below paragraphs automatically.</p>
<p>This is a second paragraph. It starts on a new line.</p>

Ênfase semântica: em

O elemento  identifica um texto com ênfase tônica — a palavra que altera o sentido da frase:

<p>I <em>never</em> said she stole the money.</p>
<p>I never said <em>she</em> stole the money.</p>
<!-- Same words, different meaning depending on which is emphasized -->
<!-- Screen readers change inflection on em content -->

Importância semântica: strong

O elemento  identifica um texto como muito importante:

<p><strong>Warning:</strong> Do not enter this area without protective equipment.</p>
<p>The deadline is <strong>Friday at 5 PM</strong>.</p>
<!-- strong = this content is more important than surrounding text -->
<!-- Screen readers may emphasize strong content differently -->

em versus i

 e  são exibidos em itálico por padrão, mas têm significados diferentes:

 — ênfase tônica semântica (use na maioria das vezes)
 — itálico apresentacional: termos técnicos, títulos e frases estrangeiras

<p>The ship was called <i>HMS Beagle</i>.</p>
<p>The CSS property is <i>display</i>.</p>
<p><em>Please</em> be careful.</p>

strong versus b

 e  são exibidos em negrito por padrão, mas diferem semanticamente:

 — importância semântica (use na maioria das vezes)
 — chama a atenção sem indicar importância: palavras-chave e nomes de produtos

<p>The product is called <b>ProSuite</b>.</p>
<p><b>Note:</b> All fields are required.</p>
<p>This step is <strong>critical</strong> — do not skip it.</p>

Aninhando em e strong

Você pode aninhar elementos de ênfase para obter um efeito combinado:

<p>This is <strong>very <em>important</em></strong>.</p>
<!-- strong (important) wraps em (stressed) -->
<!-- Result: bold italic text with both semantic meanings -->

Parágrafos não podem ser aninhados

Um elemento  não pode conter outro :

<!-- INVALID: nested paragraphs -->
<p>First paragraph <p>nested paragraph</p></p>

<!-- The browser auto-closes the first p before the second opens -->
<!-- Always use separate paragraph tags -->
<p>First paragraph.</p>
<p>Second paragraph.</p>

Elementos em linha e de bloco em parágrafos

 é um elemento de bloco que só pode conter elementos em linha:

<!-- Valid: inline content in p -->
<p>Text with <strong>bold</strong> and <a href="/">a link</a>.</p>

<!-- INVALID: block element inside p -->
<p>
  <div>A div inside p is invalid</div>
</p>

Acessibilidade da ênfase

Por que a marcação semântica é importante para a tecnologia assistiva:

Os leitores de tela anunciam  com uma entonação diferente em algumas implementações
 pode ser lido com ênfase adicional
Negrito ou itálico aplicados somente com CSS (por exemplo, font-style: italic em um span) não têm significado semântico para os leitores de tela

Erros comuns

Evite estes erros comuns de marcação de texto:

<!-- Bad: using br for paragraph spacing -->
First paragraph<br><br>Second paragraph

<!-- Good: use p elements -->
<p>First paragraph</p>
<p>Second paragraph</p>

<!-- Bad: bold for visual style only -->
<b>Heading Text</b>

<!-- Good: use h elements for headings -->
<h2>Heading Text</h2>

Quando usar cada elemento

Guia rápido para tomar decisões:

Um trecho de texto em prosa → 
Dar ênfase a uma palavra que altera o sentido → 
Marcar informações importantes → 
Colocar um título ou termo técnico em itálico → 
Destacar uma palavra-chave sem indicar importância →

Verificação rápida

Qual elemento você deve usar para marcar um texto como de importância crítica?

Recapitulação: semântica do texto

Resumo da marcação de texto:

 — parágrafos em prosa
 — ênfase tônica que altera o sentido da frase
 — importância elevada
 — itálico apresentacional (títulos e termos)
 — chama a atenção sem indicar importância
Nunca use   para criar espaçamento entre parágrafos

Perguntas Frequentes

A aula “Parágrafos, em, strong e b, i” é grátis?

Sim — o texto completo de “Parágrafos, em, strong e b, i” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “Parágrafos, em, strong e b, i”?

Marcar prosa com ênfase semântica e tags de negrito. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Parágrafos, em, strong e b, i”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para HTML Academy