Formatações adicionais em HTML

Texto Marcado

Podemos também criar Um Texto Marcado Assim, usando a TAG <mark>seu-texto</mark>.

OBS: A cor acima é a padrão definida no CSS da página.

E para Mudar a Cor da Marcação Assim, podemos usar,

<mark style="background-color:SUA-COR;"></mark>

O formato acima aplica a cor diretamente na TAG <mark> com CSS Inline no Mark.

Aplicando cores em várias marcações com CSS

Podemos definir cores dentro do bloco ( <style></style> ) no ( <head></head> ) da página:


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formatações adicionais em HTML</title>
    <style>
    mark.sua-cor { background-color: SUA-COR; }
    </style>
</head>

OBS: Assim todas as marcações com a classe amarelo recebem a mesma cor sem repetir o estilo em cada TAG.

Textos Grande e Pequeno

Estamos criando um TEXTO GRANDE assim, usando a TAG ( <big> seu-texto </big> ) nesse parágrafo.

OBS: a TAG <big> </big> foi descontinuada apesar de ainda funcionar, substituída por estilo no HTML5 desta forma:

<span style="font-size: 1.5em;">SEU-TEXTO AQUI</span>

Estamos criando um TEXTO PEQUENO assim, usando a TAG <small> seu-texto </small> nesse parágrafo.

Textos Deletados

Podemos marcar um ~~Texto Excluído~~ para indicar que ele não deve ser considerado.

Usando a TAG ( <del>SEU-TEXTO</del> ) dessa forma.

Texto Inserido

Podemos marcar um Texto Como Inserido para dar ênfase em algo adicionado.

Usando a TAG ( <ins>SEU-TEXTO</ins> ).

Também existe o sublinhado com TAG Texto Sublinhado (não semântica).

exemplo sublinhado com TAG

(não semântica) ( <u>SEU-TEXTO</u> ).

Resultado visual:

TEXTO SUBLINHADO!

Texto Sobrescrito e Subscrito

Texto Sobrescrito

Para inserir expoentes, como x ²⁰ +8.

Usamos a TAG ( <sup>SEU-TEXTO</sup> ) .

Texto Subscrito

Para subscrito, como H ₂ O.

Usamos a TAG ( <sub>SEU-TEXTO</sub> ).

📘 Aula 11: Formatações adicionais em HTML 📘