Texto em linha

Além de parágrafos e ênfase, o HTML marca trechos em linha: código, abreviações, marcações, tempo, idioma. No Belavista isso aparece em glossários, fichas técnicas e legendas de cartaz.

O exemplo deste capítulo é 18-texto-em-linha, no pacote que acompanha o volume. Leia → mude uma coisa → preveja → recarregue → confira.

O que você vai aprender

• Usar code, pre, kbd, samp, var.
• Marcar abbr, mark, time, small, sub/sup.
• Usar span só quando nenhum elemento específico cabe.
• Não confundir tipografia visual com semântica.
• Completar o vocabulário de texto do volume.

Código e teclado

<p>Use a tag <code>&lt;figure&gt;</code> para a legenda do cartaz.</p>
<pre><code>p { line-height: 1.5; }</code></pre>
<p>Pressione <kbd>Ctrl</kbd> + <kbd>S</kbd> para salvar.</p>

code — fragmento de código. pre — preserva espaços e quebras. kbd — entrada de teclado. samp — saída de programa. var — variável ou valor simbólico.

Abreviação, marca e tempo

<p><abbr title="Pontos tipográficos">pt</abbr> medem o corpo do tipo.</p>
<p>A palavra <mark>serigrafia</mark> foi destacada na prova.</p>
<p>Oficina em <time datetime="2026-09-20">20 de setembro de 2026</time>.</p>

title em abbr oferece a forma expandida. datetime em time dá forma legível por máquina. mark destaca trecho no contexto da revisão — não é o mesmo que strong.

Outros úteis

• small — ressalva ou letra miúda com significado de “nota”.
• sub / sup — índices e expoentes.
• s — conteúdo que não vale mais (preço antigo, por exemplo).
• u — anotação não textual; use com cuidado (sublinhado parece link).
• data — valor associado (value) quando precisar de dado estruturado no texto.

span

span é o contêiner neutro em linha: sem significado. Use para gancho de CSS ou JS quando a semântica não existe.

Erro comum: marcar todo destaque com span class="vermelho". Se for importância, strong; se for ênfase, em; se for código, code; se for sigla, abbr.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Texto em linha — Belavista</title>
  </head>
  <body>
    <main>
      <h1>Ficha tipográfica</h1>
      <p>
        Corpo em <abbr title="Pontos">pt</abbr>:
        <var>x</var> = 72&nbsp;<code>pt</code>.
      </p>
      <p>
        Atalho do editor: <kbd>Ctrl</kbd> + <kbd>B</kbd>.
        Trecho marcado na revisão: <mark>aumentar entrelinha</mark>.
      </p>
      <p>
        Preço de prova: <s>R$ 90</s> · atual
        <data value="70">R$ 70</data> (valores fictícios).
      </p>
      <p>Publicação prevista em <time datetime="2026-10-01">1º de outubro de 2026</time>.</p>
      <pre><code>&lt;p class="creditos"&gt;Laboratório Belavista&lt;/p&gt;</code></pre>
      <p><small>Exemplo de curso · conteúdo fictício.</small></p>
    </main>
  </body>
</html>

Troque mark por span e discuta: o destaque visual pode voltar no CSS, mas o significado de “trecho marcado” some.

Relação com capítulos anteriores

Links (a), ênfase (strong/em) e citações já apareceram. Este capítulo completa o kit de texto em linha para documentação e fichas do ateliê.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Quando aninhar code dentro de pre?
2. Por que time com datetime ajuda além do texto visível?
3. Cite um caso em que span é aceitável e um em que não é.

Respostas comentadas

1. Quando há várias linhas ou espaços significativos a preservar; pre mantém a formatação, code marca que é código.
2. Porque ferramentas e scripts leem uma data normalizada, independente do formato exibido.
3. Aceitável: gancho neutro para estilo. Inaceitável: substituir strong, code ou a só por conveniência visual.