Texto: títulos, parágrafos e ênfase · HTML do zero

Títulos: h1 a h6

Seis níveis, do mais importante ao menos:

<h1>Marina Sales</h1>

<h2>Sobre</h2>
<p>Nasci em Benjamin Constant e construo páginas que funcionam no celular.</p>

<h2>Como trabalho</h2>

<h3>Estrutura</h3>
<p>HTML semântico, para a página fazer sentido antes de ficar bonita.</p>

<h3>Aparência</h3>
<p>CSS escrito à mão, sem framework, com atenção a contraste.</p>

O <h1> é o assunto da página inteira. <h2> são as seções. <h3> são as subseções de um <h2>, e assim por diante.

Por que a hierarquia importa de verdade

Quem enxerga a página vê os títulos maiores e menores e entende a organização em um segundo. Quem usa um leitor de tela não vê nada: ouve.

E leitores de tela têm um atalho que lista só os títulos da página, para a pessoa saltar direto ao trecho que quer. Essa lista é a sua hierarquia. Se ela estiver certa, a pessoa navega. Se estiver quebrada: um <h1> seguido de um <h4> -, soa como se duas seções tivessem sumido.

Parágrafos

<p>Desenvolvedora web em formação, em Benjamin Constant.</p>
<p>Construo páginas leves, que abrem rápido numa conexão ruim.</p>

Dois parágrafos, dois pares de <p>.

Uma coisa que surpreende quem vem do Word: o navegador ignora as quebras de linha e os espaços extras do arquivo. Isto tudo:

<p>Construo     páginas
   leves.</p>

sai na tela como Construo páginas leves.: um espaço só entre cada palavra.

Isso é bom: você pode quebrar linhas no arquivo para o código ficar legível, sem mudar o resultado.

Quebra de linha

Quando a quebra faz parte do texto, use <br>:

<p>
  Marina Sales<br />
  Benjamin Constant - AM<br />
  Tríplice fronteira: Brasil, Peru e Colômbia
</p>

Endereço, verso de poema, letra de música. Não use <br><br> para dar espaço entre blocos: isso é aparência, e aparência é CSS.

Ênfase

<p>Estou <strong>disponível para projetos</strong> a partir de março.</p>
<p>O primeiro site que publiquei se chama <em>Feira do produtor</em>.</p>

Tag	Significa	Como sai por padrão
`<strong>`	Importante, urgente	negrito
`<em>`	Ênfase, destaque	itálico
`<b>`	Negrito sem sentido	negrito
`<i>`	Itálico sem sentido	itálico

As duas primeiras carregam significado: um leitor de tela muda a entonação ao encontrá-las. As duas últimas são só aparência.

A abertura do portfólio

O topo da página inicial - o pedaço que a pessoa vê antes de rolar - responde a três perguntas, e cada uma tem uma tag:

A pergunta	O que vai	A tag
De quem é esta página?	Seu nome	`<h1>`
O que essa pessoa faz?	Sua função	`<p>`
Por que eu deveria ligar?	Uma frase sua	`<p>`
Dá para te chamar agora?	Sua situação	`<p>` curto

Em HTML:

<body>
  <p>Disponível para projetos</p>

  <h1>Marina Sales</h1>

  <p>Desenvolvedora web em formação</p>
  <p>
    Construo páginas leves, que abrem rápido em conexão ruim e continuam legíveis
    no celular de quem mora longe de tudo.
  </p>

  <h2>Sobre</h2>
  <p>
    Nasci em Benjamin Constant, no Alto Solimões, e comecei a programar em 2026,
    numa turma de sábado. <strong>Levo esse lugar para cada decisão técnica</strong>:
    a primeira pergunta de todo projeto meu é se ele abre num celular simples.
  </p>

  <h2>Como trabalho</h2>

  <h3>Estrutura antes de aparência</h3>
  <p>HTML que faz sentido lido em voz alta, antes de qualquer cor.</p>

  <h3>Leve por decisão</h3>
  <p>Sem framework, sem biblioteca: o que a página carrega, ela usa.</p>

  <h2>Contato</h2>
  <p>
    Marina Sales<br />
    Benjamin Constant - AM
  </p>
</body>

Sem uma linha de CSS, isso já é uma página legível, navegável por teclado e compreensível por um leitor de tela. E já é um portfólio: incompleto, mas verdadeiro.

No portfólio

Acrescente ao seu index.html:

o <h1> com seu nome - um só, na página inteira;
um <p> com a sua função, curto, sem adjetivo de propaganda;
um <p> com duas ou três linhas sobre o que você faz e para quem;
um <p> com a sua situação: disponível, estudando, procurando estágio;
os <h2> de Sobre, Como trabalho e Contato, cada um com pelo menos um parágrafo;
dentro de "Como trabalho", dois ou três <h3> com o que você leva a sério.

Escreva o texto de verdade, não Lorem ipsum. Texto falso esconde o problema mais comum de portfólio: não ter o que dizer. Melhor descobrir isso na aula 3 do que no dia de publicar.

Exercícios

Escreva a abertura do seu index.html com um <h1>, três <h2> e pelo menos dois <h3> dentro de um deles.
Liste, no papel, só os títulos da sua página na ordem. Essa lista faz sentido sozinha, sem o resto do texto? Se não, a hierarquia está errada.
Escreva sua localização no rodapé usando <br> nos lugares certos.
Na frase sobre a sua situação, marque com <strong> só o pedaço que alguém precisaria ler se lesse uma coisa da página.
Peça a alguém para ler a sua abertura em voz alta e depois dizer, sem olhar, o que você faz. Se a pessoa hesitar, o problema é o texto, não ela.
Escreva um parágrafo com espaços e quebras de linha extras no arquivo. Abra no navegador e confirme que nada mudou.

Referências

Fundamentos de texto em HTML - MDN - títulos, parágrafos e ênfase, com o porquê de cada um
<strong> vs <b> - MDN - quando cada um se aplica
HTML Headings - W3Schools - os seis níveis, com exemplos