Formatação HTML para Texto

O objetivo deste artigo é explorar como o texto pode ser formatado em HTML e as tags que podem ser usadas para obter uma variedade de efeitos. A capacidade de formatar texto HTML é essencial para criar páginas da Web visualmente impressionantes e fáceis de usar, independentemente do seu nível de experiência.

É tudo uma questão de formatação HTML . Existem vários elementos em HTML que podem ser usados ​​para especificar o texto com um significado especial para ele.

Exemplo:

Este é um texto BOLD.

Este é um texto em itálico.

E isso é subscrito e sobrescrito

Índice-

Elementos de Formatação HTML

Os seguintes elementos de formatação foram criados especificamente para apresentar tipos especiais de texto quando falamos de formatação HTML :

  • <i>– Texto em itálico.
  • <b>- Texto em negrito.
  • <strong>– Texto importante.
  • <em>– Texto enfatizado.
  • <mark>– Texto marcado.
  • <small>– Texto menor.
  • <del>– Texto excluído.
  • <ins>– Texto inserido.
  • <sub>– Texto subscrito.
  • <sup>– Texto sobrescrito.

Elementos HTML <b> e <strong>

Em HTML , o elemento <b> representa texto em negrito, sem nenhum significado adicional.

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<b>As you can see this text is bold</b>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O elemento HTML <strong> especifica o texto com alto nível de importância . O texto em negrito é normalmente usado para indicar o conteúdo interno.

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<strong>This text is strong and important!</strong>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Elemento <pequeno>

Texto menor pode ser especificado pelo elemento HTML <small> :

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<small>Here text is smaller.</small>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Elemento HTML <mark>

O texto marcado ou realçado é descrito pelo elemento HTML <mark> quando se trata de formatação HTML :

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<p>Learn HTML Formatting with <mark>Mr Examples</mark> with ease.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Elemento HTML <grande>

Em HTML, para tornar sua fonte muito maior do que outro texto, coloque o conteúdo dentro de <big>..</big> . Há um aumento de um tamanho no tamanho da fonte na formatação HTML . Veja exemplo abaixo

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph with the <big> big text</big> in it .</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Elemento HTML <u>

Quando falamos de formatação HTML em HTML para deixar sua fonte sublinhada do que o outro texto, coloque o conteúdo dentro de <u>..</u> . O texto entre eles será sublinhado. Veja exemplo abaixo

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph with the <u> underlined text</u> in it .</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Elemento HTML <del>

Documentos com o elemento <del> indicam que o texto foi excluído. Quando o texto é excluído de um navegador, geralmente é desenhada uma linha sobre ele:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<p>How to format <del>HTML</del> ?</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Elementos HTML <i> e <em>

Um elemento HTML <i> indica uma parte do texto em um tom ou humor alternativo. Itálico é normalmente usado para exibir o conteúdo interno.

Dica: Use a tag <i> para terminologia técnica , citações de outros idiomas, pensamentos, nomes de navios, etc.

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<i>Text is italic because of i tag</i>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O texto enfatizado é definido pelo elemento HTML <em> . Itálico é geralmente usado para mostrar o conteúdo dentro.

Você pode pronunciar as palavras em <em> com ênfase enfatizando-as verbalmente .

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<em>Emphasized text looks like this.</em>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Elemento HTML <ins>

Um elemento HTML especificado pela tag < ins > – indica que algum texto foi adicionado a um documento. Na maioria dos casos, o texto adicionado será sublinhado pelo navegador quando se trata de formatação HTML :

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<p>Who is better <del>Jeff Bezos</del> or <ins>Elon Musk</ins>.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Elemento HTML <sub>

O texto subscrito é definido pelo elemento HTML < sub > . Há uma lacuna entre a linha normal e o texto subscrito, e a fonte pode parecer menor quando aparece abaixo dela.

Fórmulas como H2O:a podem ser representadas com texto subscrito

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<p>Here text is <sub>subscripted</sub> text.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Elemento HTML <sup>

Em HTML, o elemento < sup > define o texto sobrescrito. Geralmente, há um espaço de meio caractere acima da linha normal e, às vezes, uma fonte menor é usada para texto sobrescrito quando se trata de formatação HTML .

As notas de rodapé podem ser feitas usando texto sobrescrito, como WWW[1]:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<p>Here text is <sup>superscripted</sup> text.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Elemento HTML <strike>

Qualquer texto contido no elemento <strike>..</strike> é realçado com um tachado. Há uma linha tênue que cruza a declaração. Veja o exemplo abaixo:

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph with the <strike> strikethrough text</strike> in it .</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Elemento HTML <tt>

Para que cada letra tenha a mesma largura, escreva o conteúdo dentro do elemento <tt>..</tt> .

IMPORTANTE: As fontes de largura variável são conhecidas porque cada letra tem uma largura diferente. (Ex.: 'w' é mais largo que 'i'). Fontes monoespaçadas fornecem espaçamento semelhante entre cada letra.

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph with the <tt> monospaced text</tt> in it .</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Elementos de Formatação de Texto HTML

Tag Visão geral
<b>

Deixa o texto em negrito
<em>

Indica qual texto deve ser destacado
<i>

Descreve a voz ou o humor de um texto
<pequeno>

O texto menor é definido por esta propriedade
<forte>

Identifica texto importante
<sub>

Os subscritos são definidos aqui
<sup>

Descreve o texto sobrescrito
<ins>

O texto inserido é definido
<del>

Texto que foi deletado
<marca>

Texto que foi marcado ou realçado
<grande>

Uma unidade convencional é adicionada ao tamanho da fonte com esta tag.
<greve>

Tachados podem ser desenhados usando esta tag. (HTML5-incompatível)
<tt>

Um texto é exibido em teletipo com esta tag. Não é compatível com HTML5.
<u>

O texto escrito entre esta tag é sublinhado.

Formatação HTML para usos de texto

A seguir estão cinco opções essenciais de formatação HTML para texto:

  1. Títulos:
    • Use <h1>tags <h6>para criar cabeçalhos de diferentes níveis, sendo <h1>o nível mais alto.
  2. Negrito e Itálico:
    • Use <b>ou <strong>tags para renderizar o texto em negrito.
    • Use <i>ou <em>tags para renderizar texto em itálico.
  3. Sublinhado e tachado:
    • Use a <u>tag para renderizar texto com sublinhado.
    • Use a <s>tag para renderizar o texto com uma linha tachada.
  4. Sobrescrito e Subscrito:
    • Use a <sup>tag para formatar o texto como sobrescrito (acima da linha normal).
    • Use a <sub>tag para formatar o texto como subscrito (abaixo da linha normal).
  5. Listas:
    • Use <ul>para criar uma lista não ordenada (com marcadores).
    • Use <ol>para criar uma lista ordenada (numerada).
    • Use <li>para definir um item de lista em <ul>ou <ol>.

Conclusão

O formato de texto HTML fornece uma maneira versátil e eficaz de apresentar texto de maneira visualmente atraente e amigável. Uma variedade de elementos de formatação de texto e tags estão disponíveis em HTML para ajudá-lo a estruturar, enfatizar e limpar seu conteúdo da web. Um desenvolvedor web deve dominar a formatação de texto HTML, independentemente de estar criando um blog pessoal ou um site profissional. Você pode criar páginas da Web atraentes, informativas e visualmente impressionantes usando a formatação de texto HTML com um pouco de prática e experimentação.

Você pode deixar seus comentários e feedback como reações abaixo para nos informar o que pensa sobre nossos serviços.

Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.