Formatação de texto Html

Visão Geral

Nesta página, você aprenderá as melhores práticas e exemplos de como formatar texto de maneira semântica e acessível. A formatação de texto é essencial para melhorar a legibilidade e a estrutura do conteúdo em suas páginas web. Vamos explorar diversas técnicas, desde negrito e itálico até citações e abreviações, para que você possa aplicar essas práticas em seus próprios projetos.

Formatação de Texto

Negrito:

A tag <strong> em HTML é usada para definir um trecho de texto que deve ser destacado com negrito. O texto dentro da tag <strong> é exibido em negrito, o que ajuda a chamar a atenção para partes importantes do conteúdo.

Sintaxe: <strong>Texto a ser destacado</strong>

Exemplo: Negrito

Itálico:

A tag <em> em HTML é usada para definir um trecho de texto que deve ser destacado com itálico. O texto dentro da tag <em> é exibido em itálico, o que ajuda a enfatizar partes do conteúdo.

Sintaxe: <em>Texto a ser destacado</em>

Exemplo: Itálico

Marca texto:

A tag <mark> em HTML é usada para destacar texto com um efeito de marca texto. O texto dentro da tag <mark> é exibido com um fundo amarelo, como se tivesse sido marcado com um marcador de texto.

Sintaxe: <mark>Texto a ser destacado</mark>

Exemplo: Marca texto

Sublinhado:

A tag <ins> em HTML é usada para sublinhar texto de forma semântica. O texto dentro da tag <ins> é exibido com uma linha sublinhada, indicando que foi inserido ou destacado.

Sintaxe: <ins>Texto a ser destacado</ins>

Exemplo: Sublinhado

Tachado:

A tag <del> em HTML é usada para tachar texto de forma semântica. O texto dentro da tag <del> é exibido com uma linha atravessada, indicando que foi removido ou está obsoleto.

Sintaxe: <del>Texto a ser destacado</del>

Exemplo: Tachado

Texto sobrescrito:

A tag <sup> em HTML é usada para escrever texto sobrescrito. O texto dentro da tag <sup> é exibido acima da linha base do texto normal, como em expoentes matemáticos.

Sintaxe: <sup>Texto a ser sobrescrito</sup>

Exemplo: Texto sobrescrito

Texto subescrito:

A tag <sub> em HTML é usada para escrever texto subescrito. O texto dentro da tag <sub> é exibido abaixo da linha base do texto normal, como em fórmulas químicas.

Sintaxe: <sub>Texto a ser subescrito</sub>

Exemplo: Texto subescrito

Texto pequeno:

A tag <small> em HTML é usada para escrever texto menor que o tamanho de fonte padrão. O texto dentro da tag <small> é exibido em um tamanho de fonte reduzido.

Sintaxe: <small>Texto</small>

Exemplo: Texto normal Texto pequeno

Código fonte:

A tag <code> em HTML é usada para definir um trecho de texto que representa código de computador. O texto dentro da tag <code> é exibido em uma fonte monoespaçada (também conhecida como fonte de largura fixa), que é a mesma usada em editores de código e terminais. Isso ajuda a distinguir visualmente o código do restante do texto.

Sintaxe: <code>Texto monoespaçado</code>

Exemplo: Texto monoespaçado

Texto pré-formatado:

A tag <pre> em HTML é usada para preservar espaços e quebras de linha. O texto dentro da tag <pre> é exibido em uma fonte monoespaçada e mantém a formatação original, incluindo espaços e quebras de linha.

Sintaxe: <pre>Texto</pre>

Exemplo:

            Texto escrito na tag pre
            Essa tag é excelente para exemplificação de códigos
            Tanto é que ela já vem com a mesma fonte da tag code.
                    

Citação simples:

A tag <q> em HTML é usada para destacar uma citação curta. O texto dentro da tag <q> é exibido entre aspas, indicando que é uma citação direta.

Sintaxe: <q>Texto citado</q>

Exemplo: Como dizia fulano: Blá-Blá-Blá...

Citação completa:

A tag <blockquote> em HTML é usada para destacar uma citação longa. O texto dentro da tag <blockquote> é exibido em um bloco separado, indicando que é uma citação extensa.

Sintaxe: <blockquote>Texto citado</blockquote>

Exemplo sem referência:

Blá-Blá-Blá...

Exemplo com referência:

Blá-Blá-Blá...

Nota: A referência é usada para fins de SEO e não é visível para o usuário.

Abreviações:

A tag <abbr> em HTML é usada para mostrar o significado de uma sigla ao passar o mouse. O texto dentro da tag <abbr> é exibido normalmente, mas ao passar o mouse sobre ele, o significado da sigla é exibido.

Sintaxe: <abbr title="significado da sigla">Sigla</abbr>

Exemplo: HTML

Texto invertido:

A tag <bdo> em HTML é usada para inverter a direção do texto. O texto dentro da tag <bdo> é exibido na direção oposta à padrão, útil para citar trechos de idiomas que são lidos da direita para a esquerda, como: Árabe.

Sintaxe: <bdo dir="rtl">Texto invertido</bdo>

Exemplo: Texto invertido

Materiais de apoio

08 - Formatação de Textos.pdf